New Feature: Color Swatches

If you have colors that you reuse in multiple places in your design, you can now save them for easy lookup later. On the Webflow color picker, just click the + button to save the color:

When you click +, Webflow will ask you for a name for this swatch:

(The name will play a more important role in the future when we introduce global swatches, which will automatically update colors on your page when you change the backing swatch. It will also generate LESS/Sass variable names if you prefer to export your code.)

Once a swatch is saved, it will now appear on the color panel for quick access. Just click on a saved swatch to pull that color in in a different style.

Note that saved colors can be transparent, in which case Webflow will show the true color in the top left corner of the swatch, and the fully opaque (non-transparent) representation of that color in the lower right corner. (Like the red color in the screenshot above.)

As always, we’d love to hear your feedback and suggestions for future improvements!

Note: There’s a known issue where swatches don’t copy over if you duplicate your site/project - we’re working on a fix and will remove this note when it’s resolved.


One word : Excellent !

1 Like

Great! Been waiting for this. No more intense hex copying


Awesome. Thank you very much!

1 Like

Really welcome enhancement!

Any way to remove/rename a color once added?

@ramatsu Currently no, but we will be adding more swatch and color management (including the ability to create and edit global swatches).

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
Please create a new linked topic if you have further questions.