« You too can Blog for Cash | Main | Learning CSS - Finding Good CSS Tutorials »
December 04, 2004
Color schemes for future websites
I've created some color schemes for use in future sites and am posting them here. You can use these on your own sites if you like.
As described on this page: I'm going to use: Monochromatic, Tetradic, Analogous and Triadic color schemes.
Here is a brief explanation of the 4 color scheme methods. Examples are further below:
Monochromatic: All colors in the scheme are the same hue on the color wheel. Pick a base color you like then choose 3 shades of the same color. This is possibly the best place to start in your color scheming.
Analogous: All colors in thi scheme are close together in hue but not the same. You pick a base color from the chart then count forward about 7 - 10 degrees in hue. Do this 2 times.
Tetradic: colors in this scheme have a gap of 180° of hue on the color wheel. You pick a base color you like from the chart, then count forward 180 degrees and pick the color at that point. Repeat 2 more times.
Triadic: colors are separated by 120 degrees in hue. Pick a base color you like then count forward 120 degrees on the chart. Do this 2 times.
In every case we want to save the 3 shades of the same color for use in our scheme. All website color schemes wil also use some white and grey
OK. Here we go:
Monochromatic: One color in different shades. All colors in the scheme are the same hue. Pick a base color you like. Next choose 3 shades. My basic choices are green, red, purple and of course blue.
| No | Name | Hue | Base color | 1 step lighter | 2 steps lighter | 3 steps lighter |
| 1 | terreverte | 89° | #385E0F |
#78CA20 | #B6EA7D | #F3FBE9 |
| 2 | olive3b | 101° | #3B5E2B | #6DAD4F | #AFD39E | #F0F7EE |
| 3 | midnightblue | 240° | #191970 | #2E2ECF | #8B8BE5 | #EAEAFA |
| 4 | ultramarine |
244° | #120A8F | #2619EF | #8780F6 | #E8E7FD |
| 5 | cobaltvioletdeep | 294° | #91219E | #CA48D9 | #E199EA | #F9EAFB |
| 6 | maroon4 | 322° | #8B1C62 | #D73A9D | #E992C9 | #FBEAF4 |
| 7 | indianred | 357° | #B0171F | #E64049 | #F19499 | #FCE8E9 |
| 8 | yellow | 60° | #FFFF00 | #FFFF4D | #FFFF99 | #FFFFE5 |
Some quick notes on the uses of these. Green will be on this blog and possibly on food related sites. Blue is for corporate/business type sites. Purple will be for female-related sites; Red is for use on Red-Grey combined schemes which you see a lot of on the web; Yellow will be for kiddie related sites. The different colors can be used for lettering, boxes, graphics, headlines etc. Any color scheme you will probably be dominated by white and grey. Any of the these Monochromatic color scheme can be used against white or grey. You can deliberately use "off-scheme" colors in certain areas to attract the visitor's attention - perhaps to a money-making click.
Analogous schemes (this is the same one on the site). I plan to use it for this blog. I can pick these fairly easily nearer the site-development time.
| No | Name | Hue | Base color | 1 step lighter | 2 steps lighter | 3 steps lighter |
| 1 | melonrindgreen | 81° | #DFFFA5 | #E7FFBA | #E7FFBA | #F6FFE5 |
| 1 | terreverte | 89° | #385E0F |
#78CA20 | #B6EA7D | #F3FBE9 |
| 1 | cinnabargreen | 96° | #61B329 | #8ED95B |
#BFEAA3 |
#F1FAEA |
Double Complementary (Tetradic): 2 pairs of colors in this scheme have a gap of 180° of hue between them on the color wheel. You pick 2 base colors you like from the chart, then count forward 180 degrees and pick a color. Repeat 2 more times.
| No | Name | Hue | Base color | 1 step lighter | 2 steps lighter | 3 steps lighter |
| 1 | midnightblue | 240° | #191970 | #2E2ECF | #8B8BE5 | #EAEAFA |
| 1 | lightyellow2 |
60° | #EEEED1 | #F1F1DA | #F5F5E3 | #F8F8EC |
In this case the second color I picked ended up being exactly 180 away from the first so it is actually impossible to pick 2 more. Strangley bizarre. I'll try again with green and the same lightyellow2 color.
| No | Name | Hue | Base color | 1 step lighter | 2 steps lighter | 3 steps lighter |
| 1 | midnightblue | 89° | #385E0F |
#78CA20 | #B6EA7D | #F3FBE9 |
| 1 | lightyellow2 |
60° | #EEEED1 | #F1F1DA | #F5F5E3 | #F8F8EC |
| 1 | blue deep | 268° | #380474 | #7108E9 | #B171FA | #F1E6FE |
| 1 | quartz | 240° | #D9D9F3 | #DFDFF5 | #E5E5F7 | #ECECF9 |
Not brilliant but some of the combinations could work. Finally the next scheme I will try out is the Triadic.
Triadic: colors are separated by 120 degrees in hue. Pick a base color you like then count forward 120 degrees on the chart. Do this 2 times.
| No | Name | Hue | Base color | 1 step lighter | 2 steps lighter | 3 steps lighter |
| 1 | cornflowerblue | 240° | #42426F | #6E6EA9 | #AFAFCF | #EFEFF5 |
| 1 | hematite | 360° | #E35152 | #EB8484 | #F3B6B7 | #FBE9E9 |
| 1 | honeydew2 | 120° | #E0EEE0 | #E5F1E5 | #EAF3EA | #EFF6EF |
The best place to see some of these schemes in action is on this page on color shades. Without seeing how they work, the schemes may seem completely wacky. It works best with the less bold colors put together with one bolder color. I'll experiment with these more later, but at least I have all the base colors I'm likely to need. Base colors are probably the key here. They can be used in monochromatic or analogous schemes or they can simply be used effectively against white and grey (any color can be used against white and grey).
Posted by onelukey at December 4, 2004 09:56 PM
Trackback Pings
TrackBack URL for this entry:
http://www.pacemake.com/mt/mt-tb.cgi/10