Color picker and swatches

 

Choosing a color for fonts, backgrounds, borders, or whatever is one of the most common operations when designing a website. The color picker has three primary functions:

  1. Picking a color
  2. Setting opacity
  3. Global and static swatches
 

Picking a color

Use the vertical slider on the left of the color picker to select a hue. You can use the color plane in the center to adjust saturation along the x-axis, and lightness along the y-axis. 

If you’re styling something that you can see on the page, color changes will update in real-time.

 

By default, colors are represented in HEX format. So, you can manually type or paste a value in the color field. Learn more about the different color formats like HEX, RGB, and RGBA

The color picker also supports HTML color names. So, you can type in “blue” or “LightSalmon” or any HTML color name that you wish to use.

 

The eyedropper tool

The eyedropper tool is a great way to pull a precise color from anywhere on the canvas. So if you want to pull a color from an image, or an existing class on the page, you can do that using this tool.

The eyedropper tool is a Chrome browser extension that you can install from Chrome Web Store.

Setting opacity

You can adjust Opacity of a color in three different ways:

  • Using the vertical slider on the right of the color picker
  • Typing the alpha value using RGBA in the color field
  • Typing in the opacity percentage in the opacity field.
 

When opacity is added to a color, the format automatically gets converted from HEX to RGBA.

Swatches

Swatches are the colors that are saved for reuse throughout a project. You can choose and apply them to any element, anywhere on the page, or throughout your project.

Webflow Swatches
Editing a swatch

Static swatches

If you want to apply the same color to various elements, you can create a swatch. This way you'll be applying the exact same color to different elements across your project.

 

However, if you change the color of this swatch, the elements using that color aren’t going to change. They’ll stay the same. That’s why these type of swatches are "static" swatches.

 

Creating a static swatch

  1. Open the Color Picker
  2. Choose your color
  3. Click create swatch
  4. Uncheck the global swatch option
  5. Name your swatch
  6. Click save to create the swatch

Now, you can apply the swatch to any element by selecting the element and clicking the swatch.

 

Global swatches

Global swatches are like magic paint. If you change the color of a global swatch, the color will update on all elements and styles where you’ve used that swatch.

 

This is a great way to ensure color consistency throughout your project.

Creating a global swatch

  1. Open the Color Picker
  2. Choose your color
  3. Click create swatch
  4. Ensure the global swatch option is checked
  5. Click save
 

Now that it’s saved, you can apply it to different classes throughout our project.

When you go in to edit that global swatch, every use of that color changes! That’s the magic.

Converting a static swatch to a global swatch

  1. Select the Static swatch
  2. Go to edit that swatch
  3. Check the Global option
  4. Click Save.

That Static swatch is now converted to a fully-functional global swatch.

 

If you’ve applied this static swatch to other elements, those won’t get affected when you convert that static swatch to a global swatch. You’ll have manually apply the global swatch to each element you want to affect.