Chrome Dev Tools’ Color Picker

April 24, 2017

Did you know that Chrome came with a built in awesome color picker in it’s Dev tools? While this color picker is not accessible outside the Dev tools, it does provide some great features.

To access the picker, simply click on the colored little square beside the color in the styles tab, and click on the dropper icon to access it. Selecting a color, automatically replaces the old color with the selected one.


Here are some it’s features:

HEX-RGBA-HSLA Conversion

You can also get HEX-RGBA-HSLA conversion by clicking on the first pair of arrow selectors.

Built in material design palette

This is one of my favorites. Click on the second pair of arrow selectors to open a list of palettes. Among these are options to chose the Material Design color palette, a palette composed of all of your current page’s colors and an option to create your own custom palette. The material design palette gives a list of colors according to Google’s Material Design guidelines. What’s more, click and hold on each color, to obtain it’s different hues.

Page Colors Palette

A palette showing all the colors being used on the current page.

Create a custom palette

You can create your own custom palette to be used later.

This post was published in Other
  • If you want to get notified when a new post is published, please subscribe to the newsletter below.