color
in css


5 ways to say 'Red'

  • red
  • rgb( 255 , 0 , 0 )
  • rgb( 100% , 0 , 0 )
  • #FF0000
  • #F00

red


color name

  • Browser-recognized color name
  • Specific and limiting
  • Not welcome in modern web design
  • Click for a full list

rgb( 255 , 0 , 0 )

rgb( 100% , 0 , 0 )

rgb values

  • 0 to 255
  • No color to full color
  • Also works in percentages

#ff0000

#f00

hexadecimal

  • Base-16 number system
  • 3 sets of value pairs
  • Represent RGB


hexadecimal

A new way to see color

examples

#323232
#CA3092
#FF3016
#F7F7F7
#27A1B4
#EE720E
#F03
#8C2
#444
#9DC
#248
#5AB



#F8C233


initial observations


# F8 c2 33

4 Key elements


# F8 C2 33

Hashtag


# F8 C2 33

First value pair. Represents Red channel.


# F8 C2 33

Second value pair. Represents Green channel.


# F8 C2 33

Third value pair. Represents Blue channel.


base-16


16 distinct symbols

  • 0-9 represent 0-9
  • A-F represent 10-15


why hexadecimal?


range

# 00 00 00 – # ff ff ff

    (Pure Black)       –      (Pure  White)


remember

# xx xx xx

                 (Red)     (Green)     (Blue)


so...

#ff0000 = ?


SO...

#00ff00 = ?


SO...

#0000ff = ?


SO...

#000000 = ?


SO...

#FFffff = ?


how about...

#666666 = ?


try this...

#666 = ?


3 vs. 6

#666 vs. #666666


example

#ff3366


identical?

#FF3366

Only if each pair has repeating numbers....

#F36


yes


IDENTICAL?

#FF3C66

Only if each pair has repeating numbers...

#F36


no

identify valid statements

  1. #33CC99 = #3C9
  2. #77FF00 = #F70
  3. #123456 = #123
  4. #A49955 = #495
  5. #B4AACC = #BAC
  6. #454545 = #454

IDENTIFY VALID STATEMENTS

  1. #33CC99 = #3C9
  2. #77FF00 = #F70
  3. #123456 = #123
  4. #A49955 = #495
  5. #B4AACC = #BAC
  6. #454545 = #454


what's the color?

  • h1 { color: #FF0000; }
  • p { color: #333333; }
  • li { color: #FF6600; }
  • h4 { color: #FFFFFF; }
  • p { color: #84C966; }


don't fret

  • Use Photoshop
  • Use online tools
  • or play around in the browser

Only a Pro knew the 5th bullet point on the last slide.
Made with Slides.com