DevTools Tips: Authoring colors

Sofia Emelianova

DevTools lets you author colors with just a few click instead of having to type their values.

The following DevTools Tips video shows you most of the basic features for color authoring. However, since the video released, a couple of features were implemented and one deprecated.

To learn how to author colors fast, watch the video and read the updated documentation:

• To open the color format menu, Shift-click the color preview box next to a color value.

• As shown in the video, edit and copy colors with the Color Picker.

• Pick a color from anywhere on the screen with the Eye Dropper.

• As shown in the video:

  • Change gradient values with the Angle Clock.
  • Use custom CSS variables as a color palette.

• Use the color format menu to convert HD and non-HD colors instead of changing format with command menu shortcuts.

• As shown in the video, get an overview of all your page's colors with the CSS Overview panel.

For more information, see:

• Inspect and debug colors with the Color Picker
• High Definition CSS Color Guide
• CSS Overview: Identify potential CSS improvements