Grabbing Hex Codes for Colors
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:
- 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.
- 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!
- 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.
Loading ...
1
I really like the Photoshop trick, did not know that before
Comment by Jermayn Parker — October 4, 2007 @ 6:38 pm
2
In CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit: #000 is the same as #000000, #369 is the same as #336699
Source:
http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_1/
Comment by Volkan Görgülü — October 5, 2007 @ 12:38 pm
3
Yep, that’s a good point. I’m not huge on CSS shorthand in general since a lot of times makes CSS more confusing to read, but this one fine I think since #369 is just as non-descriptive as #336699.
It is important to remember that if you are able to “abbreviate” the color into 3-digits, that means the color is “web safe”. Basically meaning its part of the 216-colors that don’t vary between operating systems. This is an all-but-dead practice though, so feel free to use full 6-digit Hex Codes.
Comment by Chris Coyier — October 5, 2007 @ 1:07 pm
4
I think they are more economical since they help us to save some bytes.
Comment by Volkan Görgülü — October 5, 2007 @ 1:13 pm
5
Here’s a cutey . . . http://www.nattyware.com/pixie.html
Comment by Graham Bannister — October 5, 2007 @ 2:28 pm
6
Cool, thanks for providing a Windows specific solution to this Graham.
Comment by Chris Coyier — October 5, 2007 @ 2:35 pm