Color selection overview

Opting for a shade for fonts, backgrounds, borders, or any other element is a routine task when creating a website. Utilize the color selector to opt for a shade and adjust its transparency. Moreover, you can define color variables on your site and choose them while utilizing the color selector.

Select a color and adjust its transparency

You can select a hue using one of the following methods:

• Utilizing the color picking tool
• Utilizing the color spectrum and controls
• Entering values in the respective input fields

You are able to review the contrast ratio of text on your site directly from the color picker, which not only showcases the contrast ratio of text but also the WCAG level rating corresponding to that contrast ratio.

Contrast ratio influences your site’s accessibility. Sufficient contrast ratio is influenced by the foreground (text) and background colors (the background behind the text), font size, and font thickness.

You can also switch the “eye” icon in the contrast ratio section of the color picker to view the transitions between AA, AAA, and a Fail rating on WCAG.

Utilizing the color picking tool

To pick a hue from any element on the canvas or outside your current browser window, leverage the color picking tool. You can press the spacebar to reveal or conceal RGB numbers for the target hue. 

Note: To access the color picking tool, Chrome or Edge should be used as your browser (e.g., a Chromium-based browser). Explore a list of Webflow’s supported browsers.

Utilizing the color spectrum and controls

To select a hue from the spectrum, utilize the hue slider to opt for a hue, then utilize the color plane to choose the suitable shade. If you desire to reduce the transparency of the hue, employ the transparency slider.

Color plane

The color plane enables you to choose the shade of the hue you wish to employ. You can shift the picker along the x-axis to alter the saturation of the hue, and along the y-axis to modify the brightness. To change the hue, utilize the hue slider below.

Hue slider

The hue slider enables you to pick the hue of the hue you wish to employ from the hue spectrum. Then you can pick the appropriate shade utilizing the color plane above.

Transparency slider

The transparency slider enables you to specify the level of transparency of your hue. 100% will make the hue entirely opaque, any value below that will make the hue see-through. This is beneficial when adding hue overlays on images or establishing see-through backgrounds.

Entering values in the respective input fields

If you wish to be more precise while selecting a hue, you can utilize web color names, Hex codes, HSB/HSBA values, or RGB/RGBA values. You can paste these values in any color field in the Style panel or in the HEX input field in the color picker. Alternatively, you can break down the code and input each value in its designated field:

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

You are able to switch between HSB and RGB by clicking the labels.

HEX input field

This input field supports all web color formats, allowing you to 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

Adjacent to the HEX input field, there are 3 input fields labeled “H S B”. If you click the label, it will switch to “R G B”. To revert, click the label again.

“H” represents hue. As you adjust the hue using the hue slider, the value in the field denoted “H” will update. “S” stands for saturation, and “B” stands for brightness. These values will change as you move the picker in the color plane. If you know the HSB values of the hue you wish to employ, you can input the values in the suitable fields.

If you know the RGB values of your hue, click the HSB label and input the value for Red “R”, Green “G”, and Blue “B”. These fields will automatically display the correct values irrespective of the tool utilized to pick your hue.

“A” or Alpha input field

“A” denotes the alpha channel. The alpha channel determines the transparency of the hue. This value is influenced by the transparency slider. The Alpha value can range between 0 and 100%. If you know the alpha value of your hue, multiply it by 100 and enter it in this input field.

Discover more

• Color formats HEX, RGB, and RGBA
• HTML color names