Color Swatch

Freddie Iboy

Open in Framer X

Color Swatch

Now you never have to create color swatches in a design tool ever again! Install this package, tap on the color prop to open the color picker, and watch as you get color information automagically ✨

Bonus: In Preview mode, you can tap on each value to copy it to your clipboard so you can paste it anywhere. Just for you.

Bonus 2: A new component for getting automatic color gradient palette between 2 color swatches! Doesn’t work with Shared Colors yet.


  • Doesn’t work with Shared Colors. Change to allow variables.
  • Add automatic gradient suggestions
  • Display closest CSS color name.
  • Display complimentary color suggestions.
  • Option for circular swatch.
  • Option to hide any piece of data if you don’t need it for that project.

  • Update 9 Added a new component to get a super nice mathematical gradient. Just connect 2 color watches on your canvas and choose how many steps you want between each color. wow wow wow

  • Update 8 Added option to use and display shared colors! Now when you select your color token, the swatch will tell you it’s provided name right underneath the alpha value in the top right.

  • Update 7: Cleaner Readme, Removed display options and added a better default size. You can still resize it however you want!

  • Update 6: This package is now on Github! Contribute to this package and make it even better.

  • Update 5: Massive visual refresh for better readability, copy and paste, and Pantone colors!

  • Update 4: Update artwork just cuz

  • Update 3: Remove useless size prop!

  • Update 2: Flexible box sizing by dragging the box corners and CMYK,RGB+optional A, HEX options.

Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree