/dev tips

(187) Code Coverage Export Code Folding (189)

Chrome DevTools: Colour tricks in the Elements Panel

14th December 2018
Colour tricks in the Elements Panel

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:

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:

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.