[thelist] The use of color (was site header and logo)

Heather Quinn info at windyhilldesign.com
Fri Jan 4 18:54:16 CST 2002

Hi, Alliax.

There's absolutely nothing wrong with your reasoning.  Liquisoft is 
talking about a different color system than is used on the web.

First, use the word complementary, not complimentary.  The c word with 
the e means *opposite*.  The c word with the i means *in harmony with*. 
  (Liquisoft is using the wrong word.)   You are searching for 
complements, or opposite colors, which are, as you've found, the inverse 
of the original colors.

Liquisoft's color wheel, and their entire discussion of color, comes 
from the world of pigments, in which the opposite of blue is orange. 
 But you are working with web color, which is light-based, and has 
different primary and secondary colors, compared to pigment-based colors.

The pigment-based color system is a way of organizing how colors in 
pigments work. with each other.  Pigment absorbs certain parts of the 
light that hits it.  The parts not absorbed by the pigment are reflected 
back to your eye, and that creates the color you see.  The pigment 
primaries are red, yellow, blue.  The pigment secondaries, which are the 
complements of the primaries, are green (complement of red), purple 
(complement of yellow) and orange (complement of blue).

Web stuff works with the world of light.  A monitor creates light of a 
particular color by shooting an electron beam at a pinpoint of dye 
containing a substance that will flouresce, or give off light, when hit 
by electrons.  The pinpoint of dye is on the inner surface of the 
monitor screen.  The "excited" dye pinpoint flouresces at a certain 
wavelength.  You see this wavelength directly as radiated color.  There 
is nothing subtracted or reflected.  The light-based color system is a 
way of organizing how colors of light work with each other.  In 
light-based color, the primaries are red, blue and green.   The 
secondaries, which are the complements of the primaries, are cyan (a 
brilliant blue-green that's the complement of red), yellow (complement 
of blue), and magenta (a brilliant purple/pink color that's the 
complement of green).

In each color system, if you mix two adjacent primaries, you will get 
the correct secondary, which is the complement of the third primary (the 
one not involved in the mix).  The differing color systems are based on 
physics, on the way materials (pigments) and light actually behave: They 
are not arbitrary systems.

(And to make things even more confused, the light-based colors' 
secondaries  become the primary colors of the CMYK -- cyan / magenta / 
yellow / black -- system used for printing, with inks, color channels & 
separations, etc.)

I still haven't worked out a deep knowledge of this stuff in detail. 
 But I do know that the fact that color we see on the web is light-based 
is the reason that print and pigment based colors schemes always need to 
be adjusted before they work on the web, and vice-versa.

I wrote the following to someone else who was comparing the pigment and 
light based complements to blue, and thinking about which one "worked" 
best (the classic test as to whether a complement is "right" is if it 
"vibrates" when placed next to the color it's supposed to be 
complementing) :

"They do, but only in their natural settings. The blue/yellow set really 
vibrates, because it's a complement pair from light, and you're 
displaying it in a light medium (monitor, on the web). But the 
blue/orange set doesn't vibrate, because it's out of its medium. It 
would vibrate in its own natural setting of paint, ink or other 
pigmented media.

"Why is this important to clarify? Because it explains why print artists 
have trouble transitioning to web — they are used to seeing how colors 
work with each other in pigment or ink media. They will often do neutral 
or high-key (pale) color palettes as a temporary "crutch" for a couple 
of years, until the nature of web color sinks in. And, conversely, it 
explains why those of us who started designing on the web cannot always 
produce effective printed pieces! The colors simply don't work the same 
way with each other! The web designer's "crutch" when first doing print 
work is to stay with harmonious color schemes on white or pale 
backgrounds for a few years, until the nature of print-based color sinks 
in ;-)."

IMHO it's important to learn how color really works for yourself.  You 
would start, as you are doing,  with math-based formulae using the light 
color system values.   But things aren't as simple as determining 
complements at 180 degrees, or calculating which colors are 60 or 120 
degrees from your starting color, etc.  Math-based rules can only take 
you so far.  Humans react viscerally to color.  And a color that does 
not work in setting A can be made to work spectacularly in setting B. 
 Advanced color work would mean confronting human and cultural reactions 
to color, doing one's own color experiments, and developing an 
internalized and instinctive understanding of color in this medium that 
will make your work stand out.

Alliax wrote:

>------current message--------------
>Much to my distress, when actually working on it, I realised that inverse color and complimentary color is the same (as for Photoshop)
>for example I take Blue
>RGB is 0 0 255
>HSB is 240° 100% 100%
>I do a reverse, it's yellow
>RGB is 255 255 0
>HSB is 60° 100% 100%
>note that the H roation is 180°
>Well, this would means that the complimentary color of Blue is Yellow ?
>but by reading this page and using their color circle
>If I take the blue, and I do a 180° rotation, I fall on a ORANGE color..
>Well, I am stuck I don't understand exactly how they manage to do this color circle, obviously it's not a RGB -> HSB otherwise I should obtain the same values, no?
>If someone understand what's wrong in my reasoning, it would help me going on..


Heather Quinn
info at windyhilldesign.com

More information about the thelist mailing list