mu.nu - Fighting attention deficit disorder wherever it - ooh, shiny!

April 13, 2004

MuNuby Help - Colors

Color codes... what are they... where do I find them... how do I use them... what about fonts...

Thse are some questions we ask when starting on a design for our site. I have compiled some links to answer these questions and presented them by groups in the extended entry.

Design gurus will tell you that content is king and design presentation should not detract from the actual content of your post. I am not presenting this information to discuss the theories of content and presentation. I am presenting it as a set of tools for you to use and decide for yourself how you want to present your content to your corner of the the world.

I tend to favor a more bold approach to using color in my designs, whereas other designers prefer a more subtle approach. I've tried to give you enough information and reference sources so you would be able to make your own decisions and present your content how you want it to look for your readers. After all... it's your site... do what YOU want to do.

Color codes...
W3Schools: CSS Colors

What are they...
There are 4 ways to specify color codes in your HTML and CSS stylesheets:

Unit Description
color_name A color name (red)
rgb(x,x,x) A rgb value (rgb(255,0,0))
rgb(y%, y%, y%) A rgb percentage value (rgb(100%,0%,0%))
#rrggbb A hex number (#ff0000).

Where do I find them...
Visibone Webmaster's Color Lab
Visibone Webmaster's Color Card
Madarin Design: Web Color Swatches
ColorMatch 5K
Web Color Reference: Named Colors
Web Color Reference: Proprietary Color Names

How do I use them....
Dmitry's Design Lab: The World of Color
Communicate With Color
Color Matters - Design Art: Color Theory

What about fonts...
Visibone Webdesigner's Font Card

A really neat color code converter...
Southern Twilight RGB to Hex and Hex to RBG Converter

Posted by: Madfish Willie at 04:07 PM | Comments (20) | Add Comment | Trackbacks (Suck)

1 just my 2c worth. Hex codes can be shortened to a 3 digit number (yeah I know it's got letters in it - it's still a number) so #ff0000 can become #f00, black becomes #000 and white becomes #fff.

Posted by: Rob @ at April 13, 2004 04:37 PM

2 One great way to get hexadecimal color codes i discovered is through Photoshop. On the lower right corner of the color selector chart is a little box that shows the color code for whatever color you have selected, which takes a lot of the guesswork out of it.

Posted by: annika @ at April 13, 2004 05:07 PM

3 I appreciate you input. Will three digit hex codes validate as proper CSS? It seems I've read somewhere that the validators require six digits???

With six digit hex codes, you get a broader range of colors.

Posted by: Madfish Willie @ at April 13, 2004 05:12 PM

4 they should validate as they are valid hex equivalents to their 6 digit cousins.

And I meant it only as a short hand method of entering appropriate colors by all means use 6 digit codes for more complex hues.

Posted by: Rob @ at April 13, 2004 07:41 PM

5 I do the same thing as Annika, but with Paint Shop Pro. When doing a banner, I select a color to match, then read the color code given in hex. Works like a champ, and makes it easy to clone that particularly nice blue you found on someone else's site.

Posted by: Ted @ at April 13, 2004 08:10 PM

6 A neat color-picker can be found here (http://www.pixy.cz/apps/barvy/index-en.html).

Cool stuff soon as I figure out how to do something wid it.

Posted by: Bravo Romeo Delta @ at April 13, 2004 10:08 PM

7 That's a pretty nice picker for a range of the same colors/hues that would look good together. Good find and thanks for that resource.

Posted by: Madfish Willie @ at April 13, 2004 10:18 PM

8 The more I play with that last one, the more I like it. If you go look at it, make sure to move the little black dot on the inside of the color wheel, the slide bars outside the color wheel, and pick some different options from the drop-down menu box.

Posted by: Madfish Willie @ at April 13, 2004 10:25 PM

9 anybody notice who that color picker is copyrighted to? Must be a sign! I love the schemes that soft contrast setting throws up ... xlnt find that man.

Posted by: Rob @ at April 13, 2004 10:41 PM

10 His main digs are at www.pixy.cz

Posted by: Bravo Romeo Delta @ at April 13, 2004 11:30 PM

11 I use the pixy.cz color picker a lot, especially considering my tendency to change the look of things every other day.
ColorMatch Remix is another good one:
http://color.twysted.net/

Posted by: LeeAnn @ at April 13, 2004 11:50 PM

12 "there are 3 ways to specify color codes in your HTML and CSS stylesheets:"

1. color_name A color name (red)

2. rgb(x,x,x) A rgb value (rgb(255,0,0))

3. rgb(y%, y%, y%) A rgb percentage value (rgb(100%,0%,0%))

4. #rrggbb A hex number (#ff0000).
And surely you do not need me to point it out further? There is no doubt that parrots will soon rule the world.

Posted by: Bird Brain @ at April 14, 2004 03:55 AM

13 Thanks Romeo!!!! I found my pink!!!! Yay!!!!

Posted by: Susie @ at April 14, 2004 03:18 PM

Hide Comments | Add Comment






Processing 0.01, elapsed 0.0091 seconds.
22 queries taking 0.0053 seconds, 35 records returned.
Page size 14 kb.
Powered by Minx 0.8 beta.