Let me count the ways.

Over the past year I've become more and more familiar with the color picker in the developer tools(Chrome & Firefox) and slightly obsessed with it. It is, by far, one of my favorite dev tools and the one I use the most when making Pens. I probably spend too much time using it, but I don't care...I just love it.

My process for using the color picker usually varies depending on the pen I'm creating. The vast majority of my pens are either recreations of a design or layout, or small animations of my own. For ones that are recreations, I try my best to match the colors and feeling of the original image. For the animations I never know what color it's going to be until the very end. I'll start with some random colors and then constantly tweak them till I find what I'm looking for.

1. The Eyedropper

Both Chrome and Firefox have this, oh so wonderful, feature called the eyedropper. The eyedropper allows you to select colors from a page. I love it so much because you can literally hover allover the page and it will show you the various colors through a magnifier, allowing you to pick just the right color!

In Chrome, this is on by default when you open the color picker. And there is only one way to access the eyedropper, through the color picker itself.

Image of how to use color picker eyedropper in chrome

In Firefox though, we have a few different options on how we can access the eyedropper!

You can access it the same way as in Chrome, shown above. You can select it from the menu, Tools > Web Developer > Eyedropper. And finally, you can click on the eyedropper button in the toolbox toolbar. Check out the docs for more info!

Fun fact! When you click on the color you want in Firefox, it automatically copies the color value to your clipboard! 😍 In Chrome you can also copy a color value to your clipboard by clicking the color circle in the color picker. Which I honestly did not know till just now.

Image of part of Chrome's color picker

2. Shades

The "Shades" box (not sure if that is its official name for all color pickers) is another favorite feature. There you'll see your selected color, highlighted by a small circle, amongst various shades of that color. You can drag this circle over all the different shades allowing you to view a multitude of color variations!

I love this feature because I often discover shades and colors that I never noticed or thought of before. It's so so delightful.

gif of hovering over shades in chrome

3. The Hue Slider

The hue slider is another small yet powerful feature. Allowing you to effortlessly slide through color hues. Sometimes, I find myself trying to drag the slider as slow as possible so that I don't miss any colors. 😬

gif of chrome's hue slider

4. The Opacity Slider

Similar to the hue slider, the opacity slider allows you to slide through the levels of transparency.

gif of chrome's opacity slider

5. The Value Switcher

This is a Chrome only feature, I believe. As the docs state, the "display value switcher" allows you to "Toggle between the RGBA, HSLA, and Hex representations of the current color." When you copy a color to the clipboard it will use whatever color representation you currently have selected.

gif of chrome's display value switcher

"Mere color, unspoiled by meaning, and unallied with definite form, can speak to the soul in a thousand different ways." - Oscar Wilde

Because color can be such an emotive thing, I really appreciate tools like these that allow us to carefully comb through a variety of colors and shades to find that perfect one.

"How do I love thee? Let me count the ways" - Elizabeth Barrett Browning - Sonnet 43

2,345 4 13