Lonce Wyse
Communication & New Media
lonce.wyse@cnm.nus.sg
Red, Green, Blue (RGB)
rgb(0%, 50%, 100%)
rgb(0, 128, 255)
#0080FF
R G B
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
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
There are
kinds of people in the world.
Those who grok binary, and those who don't.
Hue, Saturation, Lightness (HSL)
hsl(240, 50%, 50%)
angle, %, %
values in [0,1]
hsl(.66, .5, .5)
Sometimes see "proportional" notation:
(transparent, opaque)
(no way to specify alpha in hex)
Naming:
background-color
list-style-type
#FF00AB
rgb(100%, 0%, 50%)
"backgroundColor"
"listStyleType"
"#FF00AB"
"rgb(100%, 0%, 50%)"
CSS
JavaScript
CSS
JavaScript
#colorDisplay{
background-color: blue
}
var cdElement = document.getElementById("colorDisplay");
cdElement.style.backgroundColor = "blue";
Use string concatenation (the '+' operator):
var colorString = "rgb(" + 100 + "%, " + 100 + "%, " + 0 + "%)";
Creates:
"rgb(100%, 100%, 0%)"