Question
Have you ever looked at a web page and wondered why the designer ever put *those* colors together? Or the page was so dark you couldn't even see it? Or so bright it blinded you?
Worse, much worse, is when you created a great, wonderful page. You are so proud: filled with a sense of accomplishment and feeling very creative......until you are at a friend's house and you want to show it off. When it comes up on their monitor it looks.....awful? Oh, nooooooo......
Before you lay out your first background color, you need to make sure your monitor displays the colors correctly. You can't personally adjust every monitor around the world, but if you know yours is correct, at least the people with new, well-adjusted monitors will see what you intended them to see.
Here's a (very long, involved) tutorial on how to adjust your monitor settings: http://www.normankoren.com/makingfineprints1A.html
Wading though the somewhat mystifying text is well worth the effort. The best thing about it? You only have to do it once.
After you know you are seeing true colors on your monitor, it's time to start choosing colors. Fine-tuning is always trial and error, but there are tools to help you get in the ballpark. Here's a few of my favorites:
For me, it's easier when I can see the colors side-by-side: http://visibone.com/colorlab/
To use this one, just click on a color. Then another. And another. The chart layout gives you a good feel for complimenting colors and keeping in the same shade family. Choose colors opposite each other on the chart. Keep your picks in the same general circumference of the circle if you want matching shades. Choose one color from the outside of the circle and one from the inside to get high contrast colors. Notice that when you pick a color, the chart gives you the 6-digit color number used in web design.
For more information about color numbers, and what they mean, read this:
http://www.w3schools.com/html/html_colors.asp
At the bottom of that page are the 216 cross-platform colors. These are also referred to as "web safe colors". These are the colors that, by definition, are rendered exactly the same in all browser windows. That's good to know if you are designing for IE and FireFox and Opera.
This is the page where I spend hours and hours: http://www.w3schools.com/html/html_colornames.asp
This page matches the 6-digit color numbers with their associated names, which are supported by *most* browsers. The best thing I like about this page, and the thing that keeps me there for hours, are the hyperlinks. Click on the color name or number to see a sample page with the chosen color as background and every other color displayed as text. You can very quickly see which colors read the best on which backgrounds.
Happy color picking!
Answer
With your topics of late (for me anyway) -
My love of fonts is second only to my LOVE of COLOR!
attached image is my desk area, its a happy workspace to be sure ...
Have to run to the store right now,
but when I get back I will hit you with some really great color sites I have ...
as well as the dingbats links
~ gem ~
Answer
Here's a neat color chart here on here... I just haven't had time to get it in the Webmaster Resource Center yet...
- be sure to scroll to the right...
-Jim
Answer
Jayne,
don't let GEM try an tell ya that her kids did all those crayon arts on her walls.... she is also a colorbookaddict.
waiting patienty for the color charts!
JIM, cool color chart but ummmm someone stole your black and your white. lol
Edited to add this one:
http://ult-tex.net/tools/ultra/color_chart.cgi
Answer
Jayne - Love Visibone, they are a must have of course (I have the mousepad but you know I quit using it cause the colors werent right - I bet I need to do that monitor calibration thing - I had a different monitor in here before, hmmmm), and I find alot of good stuff on that W3 site, seems like any search for web-design type info they will always come up near the top ...
Jim - Thats a nice (and QUITE complete!) color chart, but very hard (actually impossible) to read the dark text on dark color swatches. yeah yeah just highlight the text I know Great resource.
Janya - yeah sorry just thought it looked cooler with all J's haha
Whats that downloadable eyedropper, I can't find the link -
you should add that its a good one. (And obviously I need it again)
And gimme back my crayons!
-----------------------------------------------------------
I tend to collect color SCHEMERS as opposed to charts,
but heres a nice handy one for your collection:
http://www.specialtyfonts.com/colors/skintones.htm
Not all schemers I use are good if you need color matched perfection for say - printing, but if you just want to play with colors or want to see what goes with what, (base, accent,etc) these are good tools.
but then, I've gone as far as using the color tool on the Behr paint website,
and saved favorite swatches for use in designs ... so ...
1.
You'll need to know the HEX# for your base color,
but gives a nice assorted harmonious palette to choose from:
http://www.degraeve.com/reference/color.php
2.
Similar to above, but more involved (and more fun & interesting!)
http://www.colorschemer.com/online.html
I keep telling myself I need to buy the sofware for that one, cause I like it so much - but haven't yet. I stink.
3.
Heres a nice informational page that discusses different color schemes and the pros/cons for using each.
Plus lots more great stuff all over the site:
http://www.color-wheel-pro.com/color-schemes.html
4.
My all-time favorite {{most beloved}} secret weapon color page:
http://www.smartpixel.net/chromoweb/uks/indexgb.html
Oooh lala it's en Francais! Viva la color!
I had one more that was a really cool toy but seem to have lost it as well.
Can't even remember what it was called (a guys name, something) Bah.
So, have fun, make it pretty!
~ gem ~
Answer
LOL JEM nooooooo problem
I found zeeee eyedropperz on ziss page ere.
http://eyedropper.inetia.com/
It iz in zee 4un lan guige but zee can downlowd it wif no problemez
Ohhh and btw... I must be a complete moron - (keep yer comments to yerself woman!) - cause I can't figure out what is on that visibone thingybob.
wanna clue me in ohhh masterful one?
Answer
Tanya, on visibone, click a little color hexagon, then another, and another.
Answer
Similar to the charts on W3 that Jayne posted,
but it's sorta a mix of both, all on one page:
HYPE Named Color Chart w/ Codes
Has the color swatches, named - (and its a big, complete list)
the name-link takes you to a full page rendered in that color.
plus it has the RGB and HEX number codes listed.
Enjoy, my little rainbows!
~ gem ~
Answer
I had one more that was a really cool toy but seem to have lost it as well.Can't even remember what it was called (a guys name, something) Bah.
PaletteMan!
Thank God for old notebooks I have scribbled things in!
And for carline which allows me the time to read them!
~ gem ~