The value of color is one of the most powerful elements in art. This page briefly and concisely summarizes the value elements of color
Value Red-Green-Blue (RGB) Hexadecimal (hex)
Color as hexadecimal values in the format #RRGGBB.
R=red, G=green, B=blue hexadecimal values between 0 and FF (equal to decimal 255)
HTML: <div style="color:#efef00;">
CSS: .classname {color:#efef00;}
#000000
(black)
#FF0000
(red)
#00FF00
(green)
#0000FF
(blue)
The hex value can be shortened to #RGB, for example #F00 = #FF0000.
Red-Green-Blue rgb() Functional Notation
Color it as a decimal value in the form of: rgb (R, G, B)
R=red, G=green, B=blue decimal value between 0 and 255 (together with hex FF)
HTML: <div style="color:rgb(128,128,64);">
CSS: .classname {color:rgb(128,128,64);}
rgb(0,0,0)
(black)
rgb(255,0,0)
(red)
rgb(0,255,0)
(green)
rgb(0,0,255)
(blue)
Red-Green-Blue-Alpha rgba() Functional Notation
Color the decimal value as: rgba (R, G, B, A)
R=red, G=green, B=blue decimal value between 0 and 255 (together with hex FF)
A = alpha (transparency) value antara 0.0 ( fully transparent/invisible) and 1.0 (not transparent)
HTML: <div style="color:rgba(128,128,64,1.0);">
CSS: .classname {color:rgba(128,128,64,1.0);}
rgba(0,0,0,1.0)
(black 100%)
rgba(255,0,0,1.0)
(red 100%)
rgba(0,255,0,1.0)
(green 100%)
rgba(0,0,255,1.0)
(blue 100%)
Alpha Sample: Blue on a white background
rgba(0,0,255,1.0)
(blue 100%)
rgba(0,0,255,0.75)
(blue 75%)
rgba(0,0,255,0.5)
(blue 50%)
rgba(0,0,255,0.25)
(blue 25%)
Hue-Saturation-Lightness hsl() Functional Notation
The hsl model uses a rainbow color circle (hue) combined with color saturation and brightness in the format: hsl (H, S, L)
H (Hue) = Color circle angle from 0 to 360
S (Saturasi) = Color saturation from 0% to 100% (100% is full saturation, 0% is a shade of gray)
L (Lightness) = Lightness/Brightness from 0% to 100% (50% normal, 100% white, 0% black)
HTML: <div style="color:hsl(240,100%,50%);">
CSS: .classname {color:hsl(240,100%,50%);}
hsl(0,0%,0%)
(black)
hsl(0,100%,50%)
(red)
hsl(120,100%,50%)
(green)
hsl(240,100%,50%)
(blue)
Saturation Sample (normal brightness 50%) :
hsl(240,100%,50%)
(blue 100% saturation)
blue
hsl(240,75%,50%)
(blue 75% saturation)
hsl(240,50%,50%)
(blue 50% saturation)
hsl(240,25%,50%)
(blue 25% saturation)
hsl(240,0%,50%)
(blue 0% saturation)
shade of gray
Lightness Sample (saturation 100%) :
hsl(240,100%,100%)
(blue 100% lightness)
white
hsl(240,100%,75%)
(blue 75% lightness)
hsl(240,100%,50%)
(blue 50% lightness)
normal
hsl(240,100%,25%)
(blue 25% lightness)
hsl(240,100%,0%)
(blue 0% lightness)
black