Back to all lessons
Lesson library

Use swatches for consistent color

Add reusable color swatches to define sitewide colors and keep your designs consistent.

This video features an old UI. Updated version coming soon!

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: 

  1. How to create a swatch
  2. How to re-use a swatch
  3. How to update a swatch
  4. How to unlink a swatch

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: 

  1. Add an element to the Webflow canvas (or select any existing element)
  2. Open the Style panel and scroll down to the Backgrounds section
  3. Click the element’s color swatch to open the color picker and choose a color
  4. Click the “plus” icon at the bottom of the color picker
  5. 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.
Color picker in the Style panel of the Webflow Designer, choosing a background color
Backgrounds section of the Style panel. The color swatch icon is highlighted to open the color picker when clicked
Color picker in the Style panel, creating a new swatch called “Blue”

How to re-use a swatch

Now that you’ve created a swatch, you can re-use it throughout your site: 

  1. Choose an element to use the swatch color (e.g., a Div block)
  2. Open the Style panel and scroll to the section containing the color property you want to change (e.g., backgrounds, typography, or borders) 
  3. 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: 

  1. Choose any element that uses the swatch
  2. Open the Style panel and scroll to the section containing the color property that uses the swatch (e.g., backgrounds, typography, or borders)
  3. Open the color picker, choose the swatch, and click the “pencil” icon next to its name
  4. Change the color and click Save
The Burnaby Bouquets Webflow site uses a neon green color swatch across its headings, borders, and buttons. The “Edit swatch” menu is open to update the color of this swatch. 
The color swatch has been updated from neon green to vibrant purple, and all headings, borders, and buttons on the site reflect this change. 

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: 

  1. Choose the element you want to change
  2. Open the Style panel and scroll to the section that uses the swatch (e.g., backgrounds, typography, or borders)
  3. Open the color picker, choose the swatch, and click the “unlink” icon next to its name
Color picker in the Style panel with a “Blue” swatch selected. The “unlink” icon is highlighted to unlink the swatch from the selected element.

Learn more about the color picker, and check out our beginner's guide to using color theory to create impactful designs.

Try Webflow — it's free