Color Theory
Facts About color
- Color is a sensation of light that is experienced through sight (on the retina)
- Colors are continually changing --
- different people perceive colors differently
- colors look different when the light changes
- colors look different when they are put next to other colors
- 8% of males are colorblind -- this is what they see -- the Vision Simulator
top
Additive Color
- Light generates color as waves of light energy with different wavelengths measured in nanometers (nm)
- Some wavelengths are discrete colors (e.g., red=720 nm):
- Humans can sense light wavelengths (and the colors they represent) from 380 nm to 720 nm -- only a part of the color spectrum
- ROYGBIV (Red, orange, yellow, green blue, indigo, violet) are the discrete colors visible to humans
Additive Colors: Mixing light -- works on computer screens
top
Primary colors of light
- Red - defined by the R value in RGB colors
- Green - defined by the G value in RGB colors
- Blue - defined by the B value in RGB colors
Secondary colors of light
Mixed from the Primary colors of light
- Yellow = equal wavelengths of Red + Green
- Cyan = equal wavelengths of Blue + Green
- Magenta = equal wavelengths of Red + Blue
top
Other colors of Light
White & black
- White = equal wavelengths of Red + Green + Blue (fully saturated colors) = RGB(255, 255, 255) = #FFFFFF in hexadecimal code
- Black = the absence of color = RGB(0, 0, 0) = #000000 in hexadecimal code
Colors mixed in unequal proportions yields other colors
- Yellow-Green = 2 parts Green + 1 part Red
Color Definitions
Color is defined by three qualities that affect the color we see -- labeled hsb in Photoshop:
hue -- the NAME of the color (e.g., red, blue, green, yellow)
saturation or chroma -- the color's dullness or vividness
value or brightness -- the color's relative lightness or darkness
top
Complementary Colors and their effects on each other
Complementary colors are directly opposite one another on the color wheel:
When you mix complementary colors with each other, they dull each other:
When you use complementary colors next to each other they tend to flicker and are hard to look at:
Orange and blue and yellow and magenta are also complementary colors -- how easy are they to look at next to each other?
top
Websafe Colors
To ensure that colors look the same in different
browsers, use the 216
Browser Safe Colors
NOTE: This restriction is no longer a problem for most users since most PCs and even mobile devices have suffience color depth to handle non-websafe colors consistently.
Browser- or Web- safe colors are available in programs that produce graphics and HTML documents
Not as important today as 99% of computers no longer have 8-bit color, in contrast to when websafe color system was set up.
- Dreamweaver's default colors are Web-safe
- Photoshop lets you set the color palette to Web-safe colors
- use Web-safe colors when you are creating flat graphics such as buttons, titles, logos, that will be compressed using GIF file compression
- Do NOT use Web-safe colors for editing photos unless you want special effects, because they will cause pixelation in your image
top
Hexadecimal Color
From CIS 311 , you are familiar with the hexadecimal color codes for programming web pages in html.
- Hexadecimal is base 16.
- Base 2 or binary is 0's and 1's (two digits or characters).
- Base 16 is Hexadecimal (Hex) or 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f, (16 digits or characters).
- You can translate numbers into Hex codes on the Calculator, by clicking View>Scientific
top
Hex codes for color are written as #RRGGBB where
- RR is the red portion of the color
- GG is the green
- BB is the blue.
- For codes that are the same (e.g., #FF00CC), you can use a short-hand Hex code:color:#F0C;
Do Colors get darker or lighter as they have a higher level of saturation (more color) in each of the RGB codes?
Mixing different quantities of these colors gives us the colors we can use on our page.
top
Perception of Colors
- Human visual sense first senses light and dark patterns and shapes, before it perceives colors
- Means you should design light and dark patterns first
- Then add color
- Adaptation: The retina adapts to the amount of light -- color is brighter at higher lighting levels
- Lateral inhibition: The retina distinguishes dark/light edges -- a dark area next to a light area appears darker than it actually is
- Colors affect hormonal balances
- An elevated red wavelength increases hormone production and raises blood pressure
- An elevated blue wavelength depresses hormone production and lowers blood pressure
- Memory Color -- color is learned by experience
- We see the color we have learned to see, which means we may perceive an orange we see in dim light as the same color as the orange we see in bright light
- Symbolic colors
- Red usually means what? Does it mean that in every culture?
- Green frequently means what? Does it mean that in every culture?
top
Cultural meanings of color
Colors can convey a lot of meaning on your user interface design and Web pages.
- Color can draw someone's eye to a specific portion of a page
- Color can convey emotion.
- Colors mean different things to different people and different cultures -- which means you have to be aware of your audience.
Resources
top
