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.