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.
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%)"
002.002.xxx_Color
By lonce
002.002.xxx_Color
A brief overview of audio synthesis fundamentals, and how to create interactive audio on the Web.
- 654