Inspect and debug HD and non-HD colors with the Color Picker

Jecelyn Yeen

Sofia Emelianova

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.

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.

   

To inspect the computed value, use the Computed pane.

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:

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

   

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.

Hover over the icon to see the original value.

The next video shows conversions in action.

Fix contrast

To fix a contrast issue for a color declaration:

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

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

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:

1. Open the Color Picker and do one of the following:
   • Click the 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.