Foundations of Web Design Unit 2

THE PROPERTY OF COLOR

WE ALREADY KNOW AND HAVE BEEN USING COLORS BY

NAME…

COLOR NAMES …CSS supports 140 standard color names.

Color Name

  Red

  Orange

  Yellow

  Cyan

  Blue

WHAT IS COLOR VALUE?

 a numerical expression that describes the property of color.

CLASSICAL COLOR THEORY says that all colors come from adding 3
primary colors (red, green, blue) at different levels of intensity. We can
create MILLIONS of colors by mixing RED, GREEN and BLUE.
THE RGB COLOR SCHEME
The way to make colors in HTML is to use a set of numbers known as the
RGB color scheme.

Our TVs and monitors use 3 different colors of light to make any color
on your screen.

 red light

 green light

 blue light

This is known as the RGB color scheme.

If you mix all 3 colors together at their highest intensity (255) you get the
color WHITE but if you take all of the colors to zero (0) then you get the
color BLACK.

In this lesson we’ll learn to incorporate the RGB Color Scheme into our
HTML.

RGB (Red, Green, Blue)

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

For example, rgb(255,0,0) is displayed as red, because red is set to its

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

Adding all 3 colors at maximum intensity = white (255, 255, 255)

Adding 0 from all 3 colors = black (0,0,0)

Color RGB
   rgb(255,0,0) Red

  rgb(255,255,0) Yellow

  rgb(0,255,0) Green

  rgb(0,255,255) Cyan

  rgb(0,0,255) Blue

Using RGB COLOR VALUES in our CSS style declarations:

FOR Example:

Instead of using

 body {background-color: blue}

We would use:

 body {background-color: rgb (0, 0, 255)}

HEXADECIMAL Color Values

Our number system is a base 10 (using digits 0, 1, 2, 3, 4, 5, 6, 7 , 8, 9) and a

hexadecimal number system is a base 16 (so it needs 6 additional characters
so it uses:

A for 10, B for 11, C for 12, D for 13, E for 14, F for 15.
RGB values are specified using hexadecimal color values in the form:
#RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal
values between 00 and FF (same as decimal 0-255).

For example, #FF0000 is displayed as red, because red is set to its highest
value (FF) and the others are set to the lowest value (00).

Color HEX

  #FF0000 Red

  #FFFF00 Yellow

  #00FF00 Green

  #00FFFF Cyan

  #0000FF Blue

Using HEXADECIMAL COLOR VALUES in our CSS style

declarations.

FOR Example:

Instead of using:

 body {background-color: blue}

We would say:

 body {background-color: #0000FF}

LET’S TALK ABOUT SHADES…

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

Color RGB

  rgb(0,0,0)

  rgb(128,128,128)

  rgb(255,255,255)

HEXADECIMAL Shades of gray are often defined using equal values

for all the 3 light sources:

Color HEX

  #000000

  #808080

  #FFFFFF
MORE ABOUT SHADES…
Also, if you turn off all the red and all the green and then change the blue to
decreasing n umbers of intensity you will have different shades of blue.

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

  mediumblue #0000CD rgb(0,0,205)

  darkblue #00008B rgb(0,0,139)

  navy #000080 rgb(0,0,128)

HSL Colors

HSL stands for HUE, SATURATION, and LIGHTNESS.

HUE (Tint) Hue is a degree on the color wheel from 0 to 360.

SATURATION (Intensity) Saturation is a percentage value; 0% means
gray, 100% is full color.
LIGHTNESS (Brightness) Lightness is also a percentage; 0% is black,
100% is white.

COMMUNICATING IN COLOR
Color evokes an emotional response.
Red- Assertive, powerful, dangerous
Black- strong, classic, stylish
White- clean, pure, straightforward, innocent
Blue- consoling, serene, quiet
Yellow- warm, cheerful, optimistic
Orange- friendly, vigorous, inviting
COLOR SCHEMES
Monochrome- a single hue, with varying values for saturation /lightness.
Complementary – 2 hues separated by 180* on the color wheel
Triad- 3 hues separated by 120* on the color wheel
Tetrad- 4 hues separated by 90* on the color wheel
Analogic- 2 hues close on the color wheel, one dominant.

CHECK OUT THIS COLOR WEBSITE at https://htmlcolorcodes.com/

YOUR ASSIGNMENT

Referring to the colors above, locate the RGB Triplet and Hexadecimal code for the
following colors:

1. Cyan rgb ( 55,255,241 )

2. Cyan #37FFF1
3. Lime rgb ( 121,247,56 )
4. Lime #79F738
5. White rgb ( 255,255,255 )
6. White #FFFFFF
7. Grey rgb ( 196,196,196 )
8. Grey #__C4C4C4______________
9. Black rgb ( 0,0,0 )
10. Black rgb ( 000000 )
11. Blue rgb ( 0,167,253 )
12.Blue #___00A7FD_____________
13.Red rgb ( 253,0,0 )
14.Red #___FD0000_____________
15.Yellow rgb ( 2532,253,0 )
16.Yellow #__FDFD00______________