Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog
Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog

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

Published on

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.

Important

This video shows Chrome DevTools version earlier than 112. In later versions, the Styles pane supports:

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.

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

  3. Click the preview square next to a color to open the Color Picker.

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

    Alternatively, to open the drop-down menu directly, hold down Shift and click on 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.

    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:

    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.

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.

Fix contrast

Important

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.

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.

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.

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.

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.