Colors Tutorial

Colors are displayed combining RED, GREEN, and BLUE light.

CSS Color Values

With CSS, colors can be specified in different ways:

 By color names
 As RGB values
 As hexadecimal values
 As HSL values (CSS3)
 As HWB values (CSS4)

RGB Colors
RGB color values are supported in all browsers.

An RGB color value is specified with: rgb( RED , GREEN , BLUE ).

Each parameter defines the intensity of the color as an integer between 0 and
255.

For example, rgb(0,0,255) is rendered as blue, because the blue parameter is

set to its highest value (255) and the others are set to 0.

Example

Color RGB Color

  rgb(255,0,0) Red
   rgb(0,255,0) Green

  rgb(0,0,255) Blue

Try it Yourself »

Shades of gray are often defined using equal values for all the 3 light sources:

Example

Color RGB Color

  rgb(0,0,0) Black

  rgb(128,128,128) Gray

  rgb(255,255,255) White

Try it Yourself »

Hexadecimal Colors
Hexadecimal color values are also supported in all browsers.

A hexadecimal color is specified with: #RRGGBB.

RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and

FF specifying the intensity of the color.
For example, #0000FF is displayed as blue, because the blue component is set
to its highest value (FF) and the others are set to 00.

Example

Color HEX RGB Color

  #FF0000 rgb(255,0,0) Red

  #00FF00 rgb(0,255,0) Green

  #0000FF rgb(0,0,255) Blue

Try it Yourself »

Shades of gray are often defined using equal values for all the 3 light sources:

Example

Color HEX RGB Color

  #000000 rgb(0,0,0) Black

  #808080 rgb(128,128,128) Gray

  #FFFFFF rgb(255,255,255) White

Try it Yourself »
Upper Case or Lower Case?
You can use upper case or lower case letters to specify hexadecimal values.

Lower case are easier to write. Upper case are easier to read.

Color Names
CSS supports 140 standard color names.

In the next chapter you will find a complete alphabetical list of color names with
hexadecimal values:

Color Name Hex Color

AliceBlue #F0F8FF  

AntiqueWhite #FAEBD7  

Aqua #00FFFF  

Aquamarine #7FFFD4  

Azure #F0FFFF  

Beige #F5F5DC  
 Bisque #FFE4C4  

16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of
more than 16 million different colors to play with (256 x 256 x 256).

Most modern monitors are capable of displaying at least 16384 different colors

Web Safe Colors?

Many years ago, when computers supported maximum 256 different colors, a
list of 216 "Web Safe Colors" was suggested as a Web standard (reserving 40
fixed system colors).

This is not important now, since most computers can display millions of different
colors.

This 216 hex values cross-browser color palette was created to ensure that all
computers would display the colors correctly when running a 256 color palette:

RGB Colors
RGB color values are supported in all browsers.

An RGB color value is specified with: rgb(red, green, blue).

Each parameter (red, green, and blue) defines the intensity of the color as an
integer between 0 and 255.

For example, rgb(0, 0, 255) is rendered as blue, because the blue parameter is
set to its highest value (255) and the others are set to 0.

<style>
div {
    background-color: rgb(0, 191, 255);
    color: rgb(255, 255, 255);
}

</style>

Hexadecimal Colors
Hexadecimal color values are also supported in all browsers.

A hexadecimal color is specified with: #RRGGBB.

RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and

FF specifying the intensity of the color.

For example, #0000FF is displayed as blue, because the blue component is set
to its highest value (FF) and the others are set to 00.

HSL Colors
HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera
10+.

HSL stands for hue, saturation, and lightness.

HSL color values are specified with: hsl(hue, saturation, lightness).

Hue
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is
blue.

Saturation
Saturation is a percentage value; 0% means a shade of gray and 100% is the
full color

Lightness
Lightness is also a percentage; 0% is black, 100% is white
HSL color values are supported in all major browsers.

Example
<style>
div {
    background-color: hsl(180, 50%, 50%);
    color: hsl(0, 0%, 100%);
}

</style>

Colors HWB
HWB (Hue, Whiteness, Blackness) is a suggested standard for CSS4.

Colors CMYK
CMYK is a suggested standard for CSS4.

CMYK Colors
CMYK colors is a combination of CYAN, MAGENTA, YELLOW , and BLACK.

Computer screens display colors using RGB color values. Printers often presents
colors using CMYK color values.

HTML Support
CMYK is not supported in HTML, but it is suggested as a new standard in CSS4

cmyk(100%, 0%, 0%, 0%)

rgb(0, 255, 255)
#00ffff
hsl(180, 100%, 50%)
 What is Color Theory?
Color theory is a multitude of categories, definitions and concepts.

This tutorial covers the parts that are most useful for web design:

 Primary, Secondary, and Tertiary Colors

 Color Wheels (RGB, CMY, RYB)
 Color Hue, Lightness and Saturation

The Color of Light

Sir Isaac Newton developed the theory that all colors are mixtures
of Red, Green, and Blue light.

This resulted in the first known color circle in 1666.

The Color of Paint

In 1766 the scientist Moses Harris created the first color wheel to
classify Red, Yellow, and Blue as the primary colors.

Moses Harris worked with paint (Newton worked with light) following a theory
(by a French painter) that all colors are mixtures of Red, Yellow, and Blue
pigments.

Color Systems
In this tutorial we will cover 3 different color systems:

 The color system used when producing colors by light (RGB)

 The color system used when printing (CMY)
 The color system used by artist and painters (RYB)

Printing actually uses a four ink color system.

CMYK: Cyan, Magenta, Yellow, and Key (black).

Primary Colors
Primary colors are the main colors in a given color system.

Primary colors can not be produced by mixing other colors a color system.

The primary colors for light are Red, Green, and Blue:

RGB Red Green Blue

The primary colors for print are Cyan, Magenta, and Yellow:

CMY Cyan Magenta Yellow

The primary colors for paint are Red, Yellow, and Blue:

RYB Red Yellow Blue

Secondary Colors
Secondary colors are made by mixing two primary colors in a color system

There are 3 secondary colors in the color systems described here.

Mixing Light (RGB)

Secondary colors are Yellow, Cyan Magenta.
 Red + Green = Yellow

Green + Blue = Cyan

Blue + Red = Magenta

Mixing Ink (CMY)

Secondary colors are Blue, Red, Green.

Cyan + Magenta = Blue

Magenta + Yellow = Red

Yellow + Cyan = Green

Note that mixing the primary colors of CMY produces the primary colors of light
(RGB)

Mixing Paint (RYB)

Secondary colors are Orange, Green, Violet.

Red + Yellow = Orange

Yellow + Blue = Green

Blue + Red = Purple

Tertiary Colors
Tertiary colors are made by mixing one primary and onesecondary color in a
color system.

There are six named tertiary colors in RYB:

 Red-Orange
 Yellow-Orange
 Yellow-Green
 Blue-Green
 Blue-Purple
 Red-Purple

Color Wheels

A color wheel is an illustrative organization of colors around a circle, showing

the relationships between primary colors, secondary colors, and tertiary colors.

Three Important Color Wheels

The RGB Color Wheel
The RGB (Red, Green, Blue) color wheel represents the 3 light sources used to
produce colors on a TV or computer screen.

Primary colors are Red, Green, and Blue.

Secondary colors are created by mixing primary colors:

Red and Green= Yellow

Green and Blue = Cyan
Blue and Red = Magenta

The CMY(K) Color Wheel

The CMY(K) (Cyan, Magenta, Yellow) represent the colors used to print on
paper.
The primary colors are Cyan, Magenta, and Yellow.

Secondary colors are created by mixing primary colors:

Cyan and Magenta = Blue

Magenta and Yellow = Red
Yellow and Cyan = Green.

The RYB Color Wheel

The RYB (Red, Yellow, Blue) color wheel is used by painters, artists and
designers for blending pigment colors.

The 3 primary colors are Red, Yellow, and Blue.

Secondary colors are created by mixing primary colors.

The 3 secondary colors are Orange, Green, and Purple.

Red and Yellow = Orange

Yellow and Blue = Green
Blue and Red = Purple.

The tertiary colors are made by mixing two secondary colors.

The 6 tertiary colors are Red-Orange, Yellow-Orange, Yellow-Green, Blue-

Green, Blue-Purple, Red-Purple

Color Hue
Hue is just another word for color.

Simply put: Each position around the color wheel represents a different hue

Color Value (Lightness / Darkness)

Color value is a term for how light or dark dark a color is (from white to black)

Color Saturation
Saturation is about intensity.
Highly saturated colors are bright. Desaturated colors have less pigment.

Color Schemes
Color schemes are logical combinations of colors on the color wheel.

The purpose of a color scheme is to create an aesthetic feeling of style and

appeal.

Achromatic Color Schemes

Black text on white background.

White text on black background.

The black on white achromatic color scheme is the default color scheme for a
web page.

The white on black achromatic color scheme is often preferred for smaller
devices.

White on black requires less energy (improves battery life) on most display
technologies.

Monochromatic Color Schemes

Monochromatic color schemes are easy to create because they use only one
color.

Monochromatic schemes use different tones from the same angle on the color
wheel (the same hue).

Experiment and learn more using our Monochromatic Color Scheme Generator.

Analogous Color Schemes

Analogous color schemes are also easy to create.

Analogous color schemes are created by using colors that are next to each other
on the color wheel.

Experiment and learn more using our Analogous Color Scheme Generator.

Complementary Color Schemes

Complementary schemes are created by combining colors from opposite sides of

the color wheel.

Experiment and learn more using our Complementary Color Scheme Generator.

Triadic
Triadic schemes are made up of hues equally spaced around color wheel.

Experiment and learn more using our Triadic Color Scheme Generator.

Compound (aka Split Complementary) Color

Scheme

Compound schemes are almost the same as complementary schemes.

Instead of using colors that are opposites, it uses colors on both sides of the
opposite hue.

Experiment and learn more using Compound Color Scheme Generator.

Color Psychology
 Colors can influence human behavior.
 Colors can influence human perceptions.
 Colors can influence the taste of food.
 Colors can influence attractiveness.
The Perception of Colors
GREEN
RED Blac Whit Gray BLUE Yellow
k e
Green is
Red the Grey is Blue is the Yellow is a
attracts most Conservat most used Happy
the restful Black is White is ive office color Color
human color Authori Purity
Sea Sunshi
eye ty and Security
Nature Myster Cleanlin
Energy y Reliabilit
Fertility
ess
y Water ne
Power Freshne Autho Neutralit Ocean
Strengt ss y Classic Depth Light
rity Knowledg Wealth
h New Clarity
Excitem Growth
Power Goodnes e Energy
ent
Eleganc s Quality Warmth
Safety Professio
e
Danger Formali Innocen
nal Stability Optimism
Good ty ce Wisdom Conservati
Fire Health sm Happiness
Blood Healing Productivit Positivity
Myster
Urgency Power y Cheerfulnes
y s
Traffic Free Wisdom
Stop Traffic Intelligenc Youngfulne
Evil ss
e
Fear
Passion Harmony Death
Appetite Peace
Sky
Emotion Easines
Love s Truth
Calmnes Peace
s Heaven