Color is an incredibly compelling and powerful facet of design – color palettes form the visual identity of your site and brand, and can even influence site visitors’ moods or prompt them to take certain actions. Reusable color swatches provide a convenient and efficient way to define your site’s color palette and keep designs uniform across your entire site.
In this lesson, you’ll learn:
How to create a swatch
Good to know: You can create a swatch for any color property (e.g., for backgrounds, typography, outlines, or borders).
To re-use colors throughout a site, you’ll first need to create a swatch:
- Add an element to the Webflow canvas (or select any existing element)
- Open the Style panel and scroll down to the Backgrounds section
- Click the element’s color swatch to open the color picker and choose a color
- Click the “plus” icon at the bottom of the color picker
- Give your swatch a name and click Create
Pro tip: Use the Color contrast checker in the color picker to make sure your color combinations are accessible and legible. Learn more about accessible color contrast ratios.
How to re-use a swatch
Now that you’ve created a swatch, you can re-use it throughout your site:
- Choose an element to use the swatch color (e.g., a Div block)
- Open the Style panel and scroll to the section containing the color property you want to change (e.g., backgrounds, typography, or borders)
- Open the color picker and choose your swatch
Pro tip: Don’t forget to add classes to your elements to keep your styles organized and reusable. Learn more about using classes to save styling information across elements.
How to update a swatch
In the future, you may want to change the swatch’s color to update that color across your entire site. To update a swatch:
- Choose any element that uses the swatch
- Open the Style panel and scroll to the section containing the color property that uses the swatch (e.g., backgrounds, typography, or borders)
- Open the color picker, choose the swatch, and click the “pencil” icon next to its name
- Change the color and click Save
How to unlink a swatch
Let’s say you want to change the color of an element that uses your swatch without affecting other elements that share the swatch. You can unlink the swatch from the element to change its color independently:
- Choose the element you want to change
- Open the Style panel and scroll to the section that uses the swatch (e.g., backgrounds, typography, or borders)
- Open the color picker, choose the swatch, and click the “unlink” icon next to its name
Learn more about the color picker, and check out our beginner's guide to using color theory to create impactful designs.
