Inspect and debug HD and non-HD colors with the Color Picker Stay organized with collections Save and categorize content based on your preferences.

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.

Key point: 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, and 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:

1. Select an element in the Elements panel.

2. 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.

   [Color preview.]

   Note: This example shows two intersected circles next to the color-mix() function: [Color-mix preview.]. The intersection is a preview of the resulting color.

To inspect the computed value, use the Computed pane.

[The computed value of color-mix().]

1. Click the preview square next to a color to open the Color Picker.
2. 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:

[The Color Picker, annotated.]

1. Shades.
2. Eyedropper. See Sample a color anywhere with the Eyedropper.
3. Copy to clipboard. Copy the Display value to your clipboard.
4. Display value. Arguments of the chosen color space.
5. Contrast ratio. Available only for color values. It's the difference between color and background-color.
6. Color palette. Click a square to change the color to that of the square.
7. 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.
8. Color circle. Drag this circle across the shades to change the display value.
9. Hue slider.
10. Opacity slider.
11. Display value switcher. Pick a color space from the drop-down list. See Convert colors. Note: Alternatively, to open the drop-down menu directly, hold down Shift and click the color preview icon next to the color value.
12. Expand contrast ratio. Opens the corresponding section that lets you Fix contrast.

13. Color palette switcher. Click it to toggle between:

    • Material Design palette.
    • Custom palette. To manually add the current color to this palette, click [Add.].
    • 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:

1. Shift-click the preview icon next a color value. A drop-down list opens.

   Note: Alternatively, click the Display value switcher in the Color Picker.

   [The drop-down list with all the supported color spaces.]

2. Choose one of the following color spaces:

   • #<hex-color>
   • rgb(X X X / .X).
   • hsl(X X X / X).
   • hwb(X X X / .X).

   Or one of the new spaces:

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

   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.

Caution: When converting from HD to non-HD, DevTools clips gamuts to fit the space and marks clipped values with [Warning.] warning icons.

Hover over the icon to see the original value.

[A warning icon indicating a gamut clipping and a tooltip with the original value.]

The next video shows conversions in action.

Fix contrast

Key point: 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:

1. Open the Color Picker next to the color value.
2. Expand the Contrast ratio [Expand.] section.

3. Use the suggested color that complies with a guideline:

   • Click [Use suggested color.] next to the guideline.
   • In the Shades preview at the top, drag the Color circle below the corresponding line.

[The expanded contrast ratio section with WebAIM or APCA guidelines.]

Note: 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.] Settings > Experiments, check [Checkbox.] 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.] Eyedropper can sample colors both from the page and from anywhere on the screen.

To pick a color from anywhere on the screen:

1. Open the Color Picker and do one of the following:
   • Click the [Eyedropper.] button.
   • Press C to activate the Eyedropper. To deactivate, press Escape.
2. With the Eyedropper active, hover over the target color and click to sample.

Note: 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.

[Using the Eyedropper anywhere on the screen.]