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: