Chrome DevTools: Colour tricks in the Elements Panel
Last updated: December 14, 2018
DevTools has a few tricks to aid with colour selection 🎨️, here are three useful features:
Tip One
DevTools now shows both AA and AAA Contrast Ratios on the Colour Spectrum. Read more about this here (archive). This can help improve accessibility for your users by warning you when your foreground colour has poor contrast with the background colour.
Tip Two
The Colour Palettes are customised for you, they show colours for:
- Material Design
- CSS Custom Variables
- Colours extracted from the current page
- User-defined colour palettes
Tip Three
The Element Toolbar is hidden by default, but you can hover over a CSS style rule block in the Styles Pane to reveal it. Click on the three dots which appear. These buttons allow you to quickly add the following CSS properties:
- Text Shadow
- Box Shadow
- Colour
- Background Colour