Color keywords are easier to remember
Saturday November 17, 2007
Named colors or color keywords are so much easier to remember than hexadecimal or RGB codes, so we might as well use them in our CSS.
Okay, sure, maybe "aliceblue" doesn't tell everyone exactly what color that would be. But at least you know it's in the "blue" family. Does #f0f8ff scream blue to you? I can easily remember that I like the color "darkgreen" but remembering #006400 is a lot harder. Consider the color keywords the next time you're putting up a page. They are a lot more fun than codes.
Comments
I generally find a color that I like and find out the hexadecimal code. One way I learned to do that is to use the calculator in the scientific mode. If you know the RGB numbers then just enter the number with the calculator in the scientific mode, make sure that the radiobutton is picked for the DEC, type in the RGB number in the order that they are displayed. Once that is done click on the Hex radiobutton and there is the hexadecimal code for that part of the color. I use this trick quite often.
I use the handy colorzilla firefox extension to get the rgb and hex codes for any color I can see in any web page.
I use the handy color picker tool to get codes for colors and to see how different colors look together.
http://www.pagetutor.com/colorpicker/index.html
And, if I need to convert rgb to hex or vice-versa, I use a bookmarklet.
I think it’s important for new web designers to understand that colors may look different in different browsers. Need to check it.
do you use the 216 web-safe colors? doesn’t look so…
Rambo 8: If you’re asking me, no, the About.com site doesn’t use the browser safe Web palette.
I believe that we have been into the age of millions of supported colors long enough to start using the colors that match well with our graphics and intentions instead of staying with only 216 colors.
The main importance I see is now how you decide and remember the colors but how you use them. It’s not very difficult to open most any graphics program and find the hex value for the color you need.
Just to clarify, this article is not about using the 216-color palette. It’s about using named colors because they’re easier to remember. Most of the named colors come from the extended millions of colors palette and not from the “web safe” palette.
According to W3C, if you want to code for ‘tomorrow’, you should get yourself out of the habit of using named color values and into the habit of going with the hex.
Jenna: can you source that comment? The SVG color keywords come straight from the W3C CSS 3 Color Module which is a candidate recommendation. http://www.w3.org/TR/css3-color/#svg-color
In fact, in that same specification, the first example used is “em { color: lime }” followed by an RGB color listing. They don’t show using a hex color in that example at all.
Photoshop is a pretty useful too to find the hexadecimal value for a color that you want to use. Just use the color picker and you will see the hex value of your selected color in the bottom right of the picker box.
I always use photoshop to get nice colors. After that, I try to remember the hex code of the color. But thanks to Jennifer, I will have a look at the color names… looks fun to me