Bert Bos | CSS tutorial – colors



Opaque colors

red=0deg, green=120deg, blue=240deg

Colors are used for text, borders, color gradients, and soon also for underlining.

Name Hex RGB HSL  
aquamarine #7FFFD4 rgb(127,255,212) hsl(160,100%,75%)
- #DC9074 rgb(220,144,116) hsl(16,50%,66%)
coral #FF7F50 rgb(255,127,80) hsl(16,100%,66%)
- #b73000 rgb(184,49,0) hsl(16,100%,36%)
darkorchid #9932CC rgb(153,50,204) hsl(280,61%,50%)
black #000 rgb(0,0,0) hsl(0,0,0)
gold #FFD700 rgb(255,215,0) hsl(51,100%,50%)

Transparent colors

rgba(R,G,B,alpha) and hsla(H,S,L,alpha)

hsla(20, 90%, 50%, 0.0)

hsla(20, 90%, 50%, 0.3)

hsla(20, 90%, 50%, 0.6)

hsla(20, 90%, 50%, 1.0)

'opacity' makes the whole element transparent

P {opacity: 0.8}← almost transparent

Compositing & blending

Transparancy is only one of the ways to combine foreground and background.

Two new modules with advanced graphical operations are in development:

Color exercise

Make a document with a number of elements whose colors only differ in hue

This can pose a problem for people with color blindness or less than perfect eyseight. What can you do about that?