Michael Gearon

CSS Colors

Michael Gearon

Last updated on

CSS3 Pseudo Element

There are plenty of ways to add a splash of color to your website with CSS. Typically we set a color for either the foreground of an element such as the text or a link or the background of an element. By default, the user agent stylesheet (the browser) renders the web page with a basic sets of colors for elements like links.

We have these properties:

  • color
  • background-color
  • border-color

All of them accept a color value, which can be in different forms. There are also a few ways to specify colors in CSS:

  1. Color keywords
  2. RGB
  3. RGBA
  4. HSL
  5. HSLA
  6. Hexadecimal


Probably one of the most commonly used ways to references colours until recently was through hexadecimals. Hexadecimals are 6 (also 3 but we’ll cover this later on) letters or numbers long starting with the “#”.

There are two main parts to the hexadecimals colours which are:

  • The first 2 digits after the “#” represents the red colour, followed by 2 digits for green and then finally 2 digits for blue altogether its RGB.
  • To control the amount of red, green and blue in a colour it’s controlled by the values. If the red was set to say 00 then it would be the least intense whilst FF is the most intense.

With this in mind let’s take a look at some examples:

  • #0000FF – This HTML code shows just blue and no red and green. The result is pure blue
  • #00FF00 – This HTML code shows just green and no red and blue. The result is pure green
  • #FF0000 – With this HTML code we tell browser to show maximum of red and no green and no blue. The result is of course pure red color
  • #000000 – This would be pure black as we are not adding any colour
  • #ffffff – This would result in pure white as we are setting the red, green, blue at its highest intensity.

3 digits

To confuse things a little more you can also write hexadecimal colours in 3 digits rather than 6. You can see the benefit in doing so as it’s more readable and maintainable.

The alpha channel

We can add the alpha channel by adding 1 or 2 more digits at the end, for example #00000033. Not all browsers support the shortened notation, so use all 6 digits to express the RGB part.

RGB and RGBa


You can use the rgb() function to calculate a color from its RGB notation, which sets the color based on its red-green-blue parts. From 0 to 255:

p {
color: rgb(255, 255, 255); /* white */
background-color: rgb(0, 0, 0); /* black */


RGBa offers us the ability to control the alpha value as well as the red, green and blue channels. The alpha value represents the level of transparency the RGB color should have. It can be a value anywhere between 1 and 0 or in a percentage form 100% to 0%.


Hue, saturation, and lightness (HUE).

When we look at the hue value the best way to think of it is to imagine a color wheel. It goes from 0 degrees right around back to 360 degrees. Red starts at 0 degrees, green begins at 120 degrees and for blue it starts at 240 degrees.

Saturation is percentage based, with 100% being fully saturated which is the maximum intensity. At 0% it is then desaturated.

Lightness is again percentage based with 100% completely light and 0% being completely dark. 50% is the average lightness.


HSLa is the same as above about hue, saturation and lightness but you have the additional alpha channel. It is value based from 0 (or in other words 0%) which is fully transparent all the way up to 1 (or 100%) which is fully opaque.

Color keywords

First, we have CSS keywords that define colors. CSS started with 16, but today there is a huge number of colors names:

  • aliceblue
  • antiquewhite
  • aqua
  • aquamarine
  • azure
  • beige
  • bisque
  • black
  • blanchedalmond
  • blue
  • blueviolet
  • brown
  • burlywood
  • cadetblue
  • chartreuse
  • chocolate
  • coral
  • cornflowerblue
  • cornsilk
  • crimson
  • cyan
  • darkblue
  • darkcyan
  • darkgoldenrod
  • darkgray
  • darkgreen
  • darkgrey
  • darkkhaki
  • darkmagenta
  • darkolivegreen
  • darkorange
  • darkorchid
  • darkred
  • darksalmon
  • darkseagreen
  • darkslateblue
  • darkslategray
  • darkslategrey
  • darkturquoise
  • darkviolet
  • deeppink
  • deepskyblue
  • dimgray
  • dimgrey
  • dodgerblue
  • firebrick
  • floralwhite
  • forestgreen
  • fuchsia
  • gainsboro
  • ghostwhite
  • gold
  • goldenrod
  • gray
  • green
  • greenyellow
  • grey
  • honeydew
  • hotpink
  • indianred
  • indigo
  • ivory
  • khaki
  • lavender
  • lavenderblush
  • lawngreen
  • lemonchiffon
  • lightblue
  • lightcoral
  • lightcyan
  • lightgoldenrodyellow
  • lightgray
  • lightgreen
  • lightgrey
  • lightpink
  • lightsalmon
  • lightseagreen
  • lightskyblue
  • lightslategray
  • lightslategrey
  • lightsteelblue
  • lightyellow
  • lime
  • limegreen
  • linen
  • magenta
  • maroon
  • mediumaquamarine
  • mediumblue
  • mediumorchid
  • mediumpurple
  • mediumseagreen
  • mediumslateblue
  • mediumspringgreen
  • mediumturquoise
  • mediumvioletred
  • midnightblue
  • mintcream
  • mistyrose
  • moccasin
  • navajowhite
  • navy
  • oldlace
  • olive
  • olivedrab
  • orange
  • orangered
  • orchid
  • palegoldenrod
  • palegreen
  • paleturquoise
  • palevioletred
  • papayawhip
  • peachpuff
  • peru
  • pink
  • plum
  • powderblue
  • purple
  • rebeccapurple
  • red
  • rosybrown
  • royalblue
  • saddlebrown
  • salmon
  • sandybrown
  • seagreen
  • seashell
  • sienna
  • silver
  • skyblue
  • slateblue
  • slategray
  • slategrey
  • snow
  • springgreen
  • steelblue
  • tan
  • teal
  • thistle
  • tomato
  • turquoise
  • violet
  • wheat
  • white
  • whitesmoke
  • yellow
  • yellowgreen

There is also the values tranparent, and currentColor which points to the color property, for example useful to make the border-color inherit it. They are defined in the CSS Color Module, Level 4. They are case insensitive. Wikipedia has a nice table which lets you pick the perfect color by its name. Named colors are not the only option.

Michael Gearon

Written by

Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.

Leave a Reply

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