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!
For 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.
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.) 
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.
(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:
Fred
... 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 |
Got a great Photoshop tip?
__Let us know about it... request our "Readers Guidelines"
Don't forget: this is a reader-driven web site.
Thank you for visiting The Photoshop Wing of The Design & Publishing Center , http://www.graphic-design.com/Photoshop/Tips/ 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 http://www.graphic-design.com Harrisonburg, Virginia, 22801, USA -- 540-433-8402 -graphic-design.com ALL RIGHTS RESERVED, Copyright 1994, 1995, 1996, 1997, and 1998, 1999 Showker Graphic Arts -- If we can design for you, let us know!