Use swatches for consistent color

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

layout-design
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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 reuse 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 reuse a swatch

Now that you’ve created a swatch, you can reuse it throughout your site. There are 2 ways to reuse a swatch:

  • From the color picker
  • From the color input dropdown

To reuse a swatch from the color picker:

  1. Choose an element on which 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. Click the swatch to open the color picker
  4. Choose your swatch

To reuse a swatch from the color input dropdown:

  1. Choose an element on which 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. Click on the color name field
  4. Choose your swatch from the searchable dropdown
Note: You can hover over a swatch in the searchable dropdown to preview that color on the selected element on the canvas.
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.

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?