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

Sofia Emelianova
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.

    Color preview.

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

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

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

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

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.

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.

Using the Eyedropper anywhere on the screen.

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.