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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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.