Colours

A colour in CSS is always the same three channels — red, green and blue. What changes is how you write them down.

The shortest way is a name. CSS knows 147 of them, from red to rebeccapurple, and they are exact values rather than approximations. Handy for a quick test, useless when a designer hands you a brand colour.

Hex is the notation you will meet most: a # followed by six digits, two each for red, green and blue, counting 00 to ff. #ff0000 is pure red. It is compact and every design tool copies it out, but you cannot read a hex value and picture the colour.

rgb() writes the same three channels as plain numbers from 0 to 255. Same colour, more characters, easier to adjust one channel by hand.

hsl() is the one worth thinking in. Hue is a position on the colour wheel in degrees, saturation is how much colour there is, lightness how bright. Want the same colour but darker? Lower the third number. In hex that is arithmetic; in hsl it is obvious.

background: #e63946;
background: rgb(230 57 70);
background: hsl(355 79% 56%);
Three spellings, one colour. The browser stores all three identically — which is why the exercises accept any of them.

Exercises0/4

  1. 1Say its namenamed coloursaccount
  2. 2Six digitshex notationaccount
  3. 3Three numbersrgb()account
  4. 4Hue, and how much of ithsl()account
Colours — Beginner · CSS Duel