There are four main css colour syntax options.

  1. name
  2. hex
  3. rgb
  4. hsl

Here are four ‘div’ elements with a black background and white text color. Each div is styles using colour syntax corresponding to the class name of that div.

See the Pen CSSColourSyntaxOptions1 by Daniel (@Parsons) on CodePen.

CSS Named Colours

The css named syntax is straightforward. Simply use a name colour value such as ‘black’ or ‘white’.

CSS Hex Colours

The hex (hexadecimal) syntax uses a hash sign (#) at the front followed by alphanumerical values. In the above example the black background value is (#000000) and the white color value is ‘#ffffff’.

CSS RGB Colours

The rgb (red, green, blue) syntax uses the letters ‘rgb’ in the front with three values in brackets that range from 0 to 255 and are separated by a comma. In the above example the black background value is written as ‘rgb(0,0,0)’ and the white color value is written as ‘rgb(255,255,255).

CSS HSL Colours

The hsl (hue, saturation, light) syntax uses the letters ‘hsl’ in the front with three values in brackets. The first value ranges from 0 to 360 and the second and third values range from 0% to 100%. In the above example the black background value is ‘hsl(0,0%,0%)’ and the white color value is hsl(0,100%,100%)
(hsl color picker by Brendan Mathis).

Here is another example with all the four color syntaxes used to create a ‘red’ background with an ‘Azure’ text color.

See the Pen CSSColourSyntaxOptions2 by Daniel (@Parsons) on CodePen.

Each colour syntax has its advantages.
The named colours are easy to write and convenient. Blue is blue and red is red e.t.c.
The hex syntax can be easier to write when the values are repeated. For example the value ‘#ffffff’ can also be written as ‘#fff’.
The rgb and hsl color values have an added advantage of a fourth opacity value being available, the alpha value. The ‘rgba(255,0,0,0.5)’ will have the equivalent of a 50% opacity value. The ‘hsla(0,100%,50%,0.5)’ will also have the equivalent of a 50% opacity value. The opacity of the named colours and hex colours can be added as a seperate property. Here is the same example as the last one however this time all four elements have the equivalent of a 50% opacity value.

See the Pen CSSColourSyntaxOptions2 by Daniel (@Parsons) on CodePen.


CSS3 logo. CSS text-shadow Property

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *