The best way to master Adobe Photoshop. Photoshop Tips & Tricks is built on reader questions about
image manipulation, painting and getting the most from Photoshop. In
The Design & Publishing Center

To hex or not to hex:
That is the question

continuing from Mr. Pixelsmith's color column ...

Another reader, JC from Dallas, wrote:

Dear Mr. Pixelsmith
I really enjoy your monthly flights of color even if I don't have a need. However I'm working on a project in Photoshop 6 and I need to match the hex numbers with colors I select for the html code. Where do you get your hex codes? Also, can you tell me whether it's better to use the hex numbers or the newer "words" like "white" in stead of "#FFFFFF"?
Thanks and keep up the good work! JC

Yes, JC, we always enjoy creating the color flight each month too!

First let me say we always use the actual hex code for colors rather than the words. First of all there are only handful of colors represented where there are hundreds of hex codes. Secondly, there are browsers which don't see the color words under certain circumstances -- like when used as a background tag for a table cell. That's one of the irritating things about GoLive. Even when we set the preferences for hex numbers, it still uses the color 'title' instead. Hmpf!

HEX colors in Photoshop 6For our monthly "Colors" column, we start with a color combination that sort of goes with the month's theme. We work directly from the actual codes and build the colors from there. I began a file many moons ago which had all 215 major codes, and have been refining and updating it ever since. It's a CompuServe GIF file which is locked so none of the colors will shift if I inadvertently go to RGB and back. So I sort of start in the opposite direction.

Since you want to get the codes for the colors you've selected, you go the opposite route.

Be sure you've got Photoshop's WEB color palette as the active palette.
HEX colors in Photoshop 6
Go to preferences and turn on "Show Tool Tips" (at right) -- when you rub the Eyedropper over the color swatch you'll see the HEX identification in the tip. (above)

Using the Eyedropper tool in the image window where no tool tips will appear just step on the Control Key (Right-Click for Windows) and a pop-up menu will appear giving you the option to copy the html tag. (See screen capture.) HEX colors in Photoshop 6

Once copied, merely paste the code into your text file and place it in the appropriate color tag. <body bgcolor="#ffffff"> Remember to use lower case.

If you don't mind yet another palette cluttering up your screen you can watch the HEX code from the "Info" palette as well. Pull out the palette menu (arrow in upper right) and select "Web Color," HEX designations will be added to the RGB display.

Bundled on your Photoshop CD is a copy of the HEX code grid. You can also open that in Photoshop and select colors from that file. Be careful where you click however, and always check that the code in the chip matches the RGB readings in the Color Picker.
HEX colors in Photoshop 6(The file was anti-aliased, feathering and mixing some of the colors.)

Snoop around on that CD. There are some other good color files there as well as a collection of surrogate palettes with unique and interesting uses.

Finally, this letter is just one of many we receive on an ongoing basis:


... Continues with "What ever happened to GIF89a?"

The Design Center and Photoshop Tips & Tricks sends out a warm thanks to Mark for sending in this tutorial. If you have a technique to share, just
let us know!

Photoshop Tips & Tricks_/_Design Center Front Page_/_Photographic Department

Joseph Kling's complete Photoshop Photo Retouching Seminar
... full 8 Hours of Certified Training in downloadable PDF format!

Got a great Photoshop tip?
__Let us know about it... request our "Readers Guidelines"

Don't forget: this is a reader-driven web site.

The Design & Publishing Center

Thank you for visiting The Photoshop Wing of The Design & Publishing Center , Copyright 1993 through 2003, The Design & Publishing Center, all rights reserved. Contact The Design Center design team for web page critique, makeover clinics, or website design, production and hosting. Photoshop is a Registered Trademark for Adobe Systems, Inc., All Rights Reserved.

About the Design & Publishing Center:
The Design & Publishing Center has been a community resouce online since 1990, and on the web since 1994, featuring graphic design, photography, typography, illustration and imformation for designers, graphic artists, creative directors and anyone involved in desktop publishing, design, art, illustration or other visual communications fields. Photoshop Tips & Tricks began publication in 1994 as a subscriber only publication. Today, it is still one of the very few portal sites for design and publishing that remains spam-free, with the highest
content to noise ratio in the industry.

You are visiting the award-winning Design & Publishing Center at Harrisonburg, Virginia, 22801, USA -- 540-433-8402 ALL RIGHTS RESERVED, Copyright 1994, 1995, 1996, 1997, and 1998, 1999 Showker Graphic Arts -- If we can design for you, let us know!