DevTools Tips: Authoring colors

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