Color picker

Learn how to choose colors and create swatches using the color picker.

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

Choosing a color for fonts, backgrounds, borders, or whatever is one of the most common operations when designing a website. The color picker has different tools that allow you to:

  1. Pick a color and set its opacity
  2. Create swatches
Left: the color picker as it appears when adjusting color for a non-typography element. Right: the color picker as it appears when adjusting color for typography elements, which includes the Contrast ratio checker. You can choose your colors with HEX codes, color plane and sliders, an eyedropper, and set swatches to use throughout your project.
Left: the color picker as it appears when adjusting color for a non-typography element. Right: the color picker as it appears (with the contrast ratio checker) when adjusting color for typography elements.

Picking a color and setting its opacity

You can pick a color in one of the following ways:

  1. Using the eyedropper tool
  2. Using the color plane and sliders
  3. Typing in values in the appropriate input fields.
If you’re styling something that you can see on the page, color changes will update in real-time.

You can check the contrast ratio of text on your site directly from the color picker in Webflow, which displays not only the contrast ratio of text but also the WCAG level rating that corresponds to that contrast ratio.

Contrast ratio impacts your site’s accessibility. Sufficient contrast ratio depends on the foreground (your text) and background colors (the background over which the text appears), font size, and font weight.

Light blue text against a black background passes the contrast ratio check with a AAA WCAG rating.
The contrast ratio of text in this example (light blue against a black background) has a "AAA" passing rating on WCAG.
Light blue text against a white background fails the contrast ratio check with a WCAG "Fail" rating.
The same light blue text against a white background has a "Fail" WCAG rating because the white background color reduces the contrast ratio.

You can also toggle the "eye" icon in the contrast ratio area of the color picker to see the curves between AA, AAA, and a Fail rating on WCAG.

Using the eyedropper tool

To pick a color from any element on the canvas, use the eyedropper tool.

Eyedropper

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.

Install the eyedropper extension.

Using the color plane and sliders

To pick a color from the spectrum, use the hue slider to choose a hue, then use the color plane to pick the right shade. If you want to make the color less opaque, use the opacity slider.

Color plane

The color plane allows you to pick the shade of the color you want to use. You can move the picker along the x-axis to adjust the saturation of the color, and along the y-axis to adjust the brightness. To change the color, use the hue slider below.

Hue slider

The hue slider allows you to pick the hue of the color you want to use from the color spectrum. You can, then, pick the right shade using the color plane above.

Opacity slider

The opacity slider allows you to specify the transparency level of your color. 100% will make the color fully opaque, any value below that will make the color see-through. This is useful when adding color overlays on images or creating see-through backgrounds.

Typing in values in the appropriate input fields

If  you want to get more precise when choosing a color, you can use web color names, Hex codes, HSB/HSBA values, or RGB/RGBA values. You can paste these values in in any color field in the Style panel or in the HEX input field in the color picker. Alternatively, you can breakdown the code and input each value in its own field:

  • Hex values in the HEX field
  • HSBA values, broken down, in the H S B and A fields
  • RGBA values, broken down, in the R G B and A fields

You can toggle between HSB and RGB by clicking the labels.

HEX input field

This input field supports all web color formats. So, you can type in or input any HTML color value. All values will be converted to HEX.

Learn more about HEX codes and web color formats.

HSB and RGB inputs

Next to the HEX input field, you’ll notice 3 input fields labeled “H S B”. If you click the label, it will switch to “R G B”. You can click the label again to switch back.

“H” stands for hue, and you’ll notice as you change the color using the hue slider, the value in the field labeled “H” will change as well. “S” stands for saturation and “B” stands for brightness. These values will be updated as you move the picker in the color plane. If you know the HSB values of the color you want to use, you can input the values in the appropriate fields.

If you know the RGB values of your color, click the HSB label and input the value for Red “R”, Green “G”, and Blue “B”. These fields will also automatically show the correct values no matter what tool you’ve used to pick your color.

“A” or Alpha input field

“A” stands for alpha channel. The alpha channel determines the transparency of the color. This value is impacted by the opacity slider. The Alpha value can be anything between 0 and 100%. If you know the alpha value of your color, multiply it by 100 and type it in this input field.

Learn more

Creating swatches

Once you pick a color, you can save it as a swatch to reuse it across your project.

To save your swatch: 

  1. Open the color picker
  2. Choose your color
  3. Click the “plus” icon at the bottom left of the color picker to add your color as a new swatch
  4. Give your swatch a name (or use the default name that appears)
  5. Press Create to save your swatch
You can create swatches of colors you'd like to reuse throughout your project. Open the color picker, choose your color, click the plus icon, give your swatch a name, and press Create to save your swatch.

Part of the power of swatches is that you can update the swatch’s color in the future, and immediately change the colors of all elements that use the swatch you’re updating. This is a great way to maintain color consistency across your project, quickly and easily. 

To edit a swatch’s color: 

  1. Open the color picker and click the swatch you want to edit
  2. Click the “pencil” icon 
  3. Choose your new color
  4. Rename the swatch if you’d like
  5. Press Save
You can edit a swatch color to update that color throughout your project. Open the color picker, click the swatch you want to edit, click the pencil icon, choose your new color, rename the swatch, and press Save.

If you have an element whose color uses a swatch, you always have the option to unlink the color from the swatch. This could be useful if you plan on editing the swatch color in the future, but don’t want it to affect a particular element. 

To unlink a color from a swatch: 

  1. Select the element whose color you want to unlink from the swatch 
  2. Open the color picker
  3. Click the “broken link” icon

The color is displayed with its HEX value only, and any changes to the original swatch color will not affect the unlinked element. 

To unlink a color from a swatch, select the element show color you want to unlink, open the color picker, and click the "broken link" icon.


Clone this project
Try Webflow — it's free
This video features an old UI. Updated version coming soon!