Grabbing Hex Codes for Colors

Avatar of Chris Coyier
Chris Coyier on

Defining colors in CSS is all about Hex Codes. You know, those alphanumeric six-digit things like #990000. You might have a handful of them memorized. Like that one I just mentioned is a nice dark red. #cccccc is a light gray, all 0’s is black, all F’s is white, etc. That’s good stuff to know, but web pages often have all kinds of colors and you are going to need to a way to get the Hex Codes for colors you want. But how? Oh, let me count the ways:

  1. Adobe Photoshop. If you have Photoshop there are a number of tricks for grabbing Hex Codes. The most straight forward is to open up the image you want to grab the color from (often a quick screen capture), selecting the eyedropper tool, right-clicking on the area you wish to copy color from and selecting “Copy Color as HTML“. A quicker, trickier way is click somewhere on an open image, hold down and drag, and then you can actually sample color from anywhere on your screen. To get the Hex Code, just double click the foreground color and copy it out of the color picker.
  2. Name That Color. This is my favorite online color picker in the whole wide world =). You select the Hue from the circle around the outside and then the tint/shade from the square in the middle. A big nice bar gives you a good look at your color and you can just copy the Hex Code from the box below. But the best part is that it has names for all the colors. #E5D79F is so impersonal…let’s call it what it is, Zombie!
  3. Colorzilla. Another way to grab Hex Code colors right from your browser is through this excellent Firefox extension. You are using Firefox, aren’t you =). Just click the little eyedropper in the bottom bar and click anywhere in the browser window. The Hex Code is displayed right in the bottom bar or you can right-click the eyedropper and copy the color out in a variety of formats.