Color

 

 

Lonce Wyse

Communication & New Media

lonce.wyse@cnm.nus.sg

Color Primitives

 

Red, Green, Blue (RGB)

 

rgb(0%, 50%, 100%)

 

rgb(0, 128, 255)

 

#0080FF

 

R  G  B

Values

  • Decimal:  0,1,2,3,4,5,6,7,8,9, 10, ..... 99, 100, 101, ... 244, 255, 256
  • HEX:   0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F, 10,  ... BF, C0, C1, ... FE, FF, 100

10 possible digits, nth digit "weight" is 10

HTML/CSS Color values range:

(0-255) in decimal,

(0, FF)  in Hex

n-1

16 possible digits, nth digit "weight" is 16

Why?   

n-1

Values

  • Decimal:  0,1,2,3,4,5,6,7,8,9, 10, ..... 99, 100, 101, ... 244, 255
  • HEX:   0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F, 10,  ... BF, C0, C1, ... FF, 100

10 possible digits, nth digit "weight" is 10

CSS Color values range:

(0-255) in decimal,

(0, FF)  in Hex

n-1

16 possible digits, nth digit "weight" is 16

Why?  Byte size: 

(Binary) 1111 1111 ===

(Decimal) 255  ===  (Hex) FF 

n-1

Geek humor

There are 

kinds of people in the world.

Those who grok binary, and those who don't.

10
1010

Color Primitives

 

Hue, Saturation, Lightness (HSL)

 

hsl(240, 50%, 50%)

 

angle,  %,     % 

 

values in [0,1] 

 

hsl(.66, .5, .5)

 

Sometimes see "proportional" notation:

Different ways to say 'blue'

  • blue
  • hsl(240, 100%, 50%)
  • rgb(0, 0, 255)
  • rgb(0, 0, 100%)
  • #0000FF
  • #00F

Different ways to say 'blue'

  • blue
  • hsla(240, 100%, 50%. .75)
  • rgba(0,0,255,.5)
  • rgba(0,0,100%,1)
  • #0000FF
  • #00F

with 'alpha' (0,1)

(transparent, opaque)

(no way to specify alpha in hex)

CSS vs JavaScript styling

Naming: 

  • CSS property names use lowercase and hyphens JavaScript equivalents utilize "camel case". 
  • JavaScript represents style values as strings.

background-color 

list-style-type

#FF00AB

rgb(100%, 0%, 50%)

"backgroundColor"

"listStyleType" 

"#FF00AB"

"rgb(100%, 0%, 50%)"

CSS

JavaScript

CSS vs JavaScript styling

CSS

JavaScript

#colorDisplay{
	background-color: blue
}
var cdElement = document.getElementById("colorDisplay");
cdElement.style.backgroundColor = "blue";

Constructing a string with numbers 

Use string concatenation (the '+' operator): 

var colorString = "rgb(" + 100 + "%, " + 100 + "%, " + 0 + "%)";

Creates:

"rgb(100%, 100%, 0%)"

Made with Slides.com