What the Hex?! Specifying Color in HTML and CSS

21 Jun

Print designers think in CMYK mode, and know that the web runs in RGB. But, if you’ve never done any web design work, you may not know that there’s a whole other system out there called Hexadecimal, or Hex for short. It produces colors that were deemed “browser-safe,” in the days when monitors could only display websites in 256 colors. But even though electronic display technology has advanced, Hex color is still used in the HTML and CSS coding that produces websites.

Each Hex color is specified by six alphanumeric characters, with each pair translating to an intensity of the RGB spectrum: the first pair equals red, the second green, and the last blue. So, the Hex code #831b19 becomes 131-R, 27-G, 25-B. You can easily translate Hex to RGB mode with a conversion table, but this online resource, the Yellowpipe Internet Services Color Converter makes it even easier.

Even better, if you’re working with hex color in Adobe Illustrator or Photoshop, there’s no need for translation. In Illustrator, if you’re using the Color Panel (shown below), click the stack of short horizontal lines at the top right corner to access the Panel Menu, and choose Web Safe RGB as the mode. Now, you can type in each pair of characters in the appropriate field. The process in Photoshop is the same, but the choice is named Web Color Sliders.

Or, if you want, you can use a pre-defined library of Hex colors. in Illustrator, open your Swatches Panel, access the Panel Menu, click Open Swatch Library, and choose Web from the submenu.

In Photoshop, do the same, but choose Web Safe Colors from the Swatches Panel Menu.

For more on browser-safe colors, check out The History of the Browser-Safe Web Palette, by Lynda Weinmann, co-founder of Lynda.com.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: