Inspect and debug HD and non-HD colors with the Color Picker
The Color Picker provides a GUI for changing color
and *-color
declarations and lets you create, convert, and debug non-HD and HD colors with a click.
This video shows Chrome DevTools version earlier than 112. In later versions, the Styles pane supports:
- 12 new color spaces and 7 new gamuts from the CSS Color Level 4 specification.
- The
color-mix()
function from CSS Color Level 5.
For a deep dive on the new color spaces, see High Definition CSS Color Guide.
Open the Color Picker and change colors
Use the Color Picker to change color values with a click:
Select an element in the Elements panel.
In the Styles pane, find the
color
or*-color
declaration you want to change.To the left of each
color
or*-color
value, there is a small square icon with a preview of that color.This example shows two intersected circles next to the
color-mix()
function: . The intersection is a preview of the resulting color.To inspect the computed value, use the Computed pane.
Click the preview square next to a color to open the Color Picker.
To change the color, use any of the UI elements of the Color Picker.
Color Picker elements
Here's a description of each of the UI elements of the Color Picker:
Shades.
Eyedropper. See Sample a color anywhere with the Eyedropper.
Copy to clipboard. Copy the Display value to your clipboard.
Display value. Arguments of the chosen color space.
Contrast ratio. Available only for
color
values. It's the difference betweencolor
andbackground-color
.Color palette. Click a square to change the color to that of the square.
Gamut boundary. This line is available only for the new color spaces and the
color()
function. They can produce both HD and non-HD colors. The line lets you distinguish between HD and non-HD.Color circle. Drag this circle across the shades to change the display value.
Hue slider.
Opacity slider.
Display value switcher. Pick a color space from the drop-down list. See Convert colors.
Alternatively, to open the drop-down menu directly, hold down Shift and click on the color preview icon next to the color value.
Expand contrast ratio. Opens the corresponding section that lets you Fix contrast.
Color palette switcher. Click it to toggle between:
- Material Design palette.
- Custom palette. To manually add the current color to this palette, click .
- CSS Variables palette. Lists all custom CSS variables (appended with
--
) on your page. - Page colors palette. To generate this palette, DevTools looks for all the colors in your stylesheets.
Choose a color space
To choose a color space:
Shift-click the preview icon next a color value. A drop-down list opens.
Alternatively, click the Display value switcher in the Color Picker.
Choose one of the following color spaces:
Or one of the new spaces:
Or a space defined by the
color(<color_space> X X X)
function.
Convert colors
When you switch between color spaces with the Display value switcher, DevTools automatically converts the values.
When converting from HD to non-HD, DevTools clips gamuts to fit the space and marks clipped values with warning icons. Hover over the icon to see the original value.
Fix contrast
The Color Picker calculates contrast ratios only for the color
values and relative to the respective background-color
values. So, only the color
values have Contrast ratio sections.
To fix a contrast issue for a color
declaration:
Open the Color Picker next to the
color
value.Expand the Contrast ratio section.
Use the suggested color that complies with a guideline:
- Click next to the guideline.
- In the Shades preview at the top, drag the Color circle below the corresponding line.
By default, the Color Picker suggests you to follow the WebAIM guidelines. Alternatively, you can set it to suggest values compliant with APCA:
In Settings > Experiments, check Enable new Advanced Perceptual Contrast Algorithm (APCA)...
To get a list of all contrast issues in one go, follow the Make your website more readable guide.
Sample a color anywhere with the Eyedropper
The Eyedropper can sample colors both from the page and from anywhere on the screen.
To pick a color from anywhere on the screen:
- Open the Color Picker and do one of the following:
- Click the button.
- Press C to activate the Eyedropper. To deactivate, press Escape.
- With the Eyedropper active, hover over the target color and click to sample.
The Eyedropper samples colors only in the sRGB color space. When you sample outside this space, the Eyedropper clips the color to the closest one. See Convert colors.
In this example, the Color Picker shows a current color value of rgb(224 255 255 / 15%)
. This color changes to pink once you click outside Chrome.