The value of color is one of the most powerful elements in art. This page briefly and concisely summarizes the value elements of color
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.
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)
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 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%)
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
We use technical and analytical cookies to ensure that we provide you with the best experience on our website. Read our cookie policy.