Full Menu:

Blog Summary

  1. Flash XML loops and accessing data Joel Reinke 13-Mar-2013
  2. The Latest: Apps & PHP customization Joel Reinke 20-Jun-2012
  3. Photoshop Tree Tutorial Joel Reinke 07-Nov-2011
  4. Developer Resource - Papervision3D joel reinke 27-Sep-2011
  5. Photoshop Landscape Painting Expanded Joel Reinke 09-Sep-2011

Web Design Mountain : designers : web design tutorials : color-mixing-by-code

Color Mixing for Web Design by memory

How to mix RGB Hexidecimal Color by Memory for CSS and HTML

Time Saving Methods to make Color work for you on Web Pages

Video Tutorial to follow.

If you code in HTML and CSS you know that color can come up a lot for every DIV, SPAN, or element.  Plus if you design in Photoshop, Fireworks, or any other graphics app you see the hexidecimal code for color every time you bring up the color picker.  It looks like #F1E483 or something like that.  Obviously if you need an exact color match you should use an "Eyedropper" tool to get it.  But many times when you are coding a web page you just want to quickly throw out a color that is the right color but you don't want to spend the time to go into a graphics program to get the code.

Plus, if you know this method you can also mix colors like an artist and put out some cool designs quickly. Also, with HTML5 and CSS3 being widely supported - the gradient fade options can make using this method even more worth while as you want to quickly make meaningful gradient fades.

The Basics:

The RGB Color Code is broken down into PAIRS of characters..
RGB Hex Code Explanation

Each Pair ranges in value from 00 to FF, where 00 is the darkest or lowest in value and FF is FULL value.
Specifically the order is:
0    1      2       3        4       5       6        7       8       9       A      B       C      D       E       F
Why does it go from Numbers to Letters?
Because it runs out of numbers to keep it inside of 2 spaces/Characters.
Furthermore, within each pair the value goes up first in the second slot, then in the first slot, just like numbers do it just keeps counting past 9 with LETTERS. Example:
01, 02,03,04,05,06,07,08,09,0A,0B,0C,0D,0E,0F,10,11, etc.

How are we going to get to ARTISTIC from this techno stuff?  :)  Bear with!

Each Color we are mixing with is LIGHT, not PIGMENT so if you are more familiar with mixing paint, forget about that and focus on how light mixing ADDs up colors from Red, Green, and Blue to form other colors.

Here is an easy to remember take away: (If you don't learn anything else, at least learn this nugget):
When all 3 Pairs are EQUAL they make the GREYSCALE range.

Dark Grey

Exact Mid Grey
Light Grey
Light Grey

Also notice the CSS shorthand for simple colors: the 3 digit Color code.
#000 = #000000
This only works for CSS coding of colors, but that can be pretty useful.

You may notice that its hard to tell the difference between #484848 and #444444 so you may find that while mixing colors by code it will be sufficient to use the CSS shorthand method.  Noted exceptions could be when trying to mix more natural, earthy toned colors.

Mixing Colors Basic

Using just one color and going from 00 to FF (while the others are at 00) will result in Black to Dark-(Red or Green or Blue) to Full Red/Green/Blue.  Full Red is just Red, Full Blue is equivalent to Cobalt Blue, and Full Green is equivalent to gawd-awful, not found in nature Green (maybe Neon Green).

Adding Full Red to Full Green = Yellow.   #FFFF00 or #FF0
Adding Full Green to Full Blue = Cyan #00FFFF or #0FF
Adding Full Red to Full Blue = Magenta  #FF00FF (though maybe a little on the Purple side)
Full Everything = White

Not too shocking, but playing around with the mix is everything.  If you understand this concept you don't have to memorize anything, but you can flexibly play around with the color code to get fast results.

Here are some other common colors mixed by code:
A range of oranges #FFAA00 to FF5500 to CC5500
Forest Green #008800
Seafoam Green #66FFBB
Aqua #00CCFF to #88FFFF
Purple #8800FF
Parchment #FFFFBB
Browns  #CC5533 to #773311 and many more
Golden Yellow #FFCC00
Pastels - no color pair below AA
Hot Pink

I think the point is not to memorize these, just use the principal and mix with light!  However, some of these are good reference points to base other colors off of, so maybe keep these ones in mind but try to learn the concept and you'll be better equipped to handle spitting out colors quickly.

This can be a definite time saver for designing web sites.  You probably won't use this for designing greater portions of the site, you'd probably do that in your graphics program, but when you are coding the CSS style-sheet and you just want to make links a certain color, knowing this will help you GO GO GO and do more without leaving your text editor.

If this has been helpful, please Like It on the Facebook link below.  Thanks!