CSS Colors

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.
In CSS there are a few ways that we can apply color to elements, such as:
- color
- background-color
- border-color
- fill
All of them accept a color value, which can be in different forms. There are also a few ways to specify colors in CSS:
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 hash symbol (#).
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
RGB
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 */
}
You can also write the RGB without commas:
p {
color: rgb(255 255 255); /* white */
background-color: rgb(0, 0, 0); /* black */
}
RGBa
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%. One way to add the alpha channel is:
p {
color: rgba(255, 255, 255, 0.5); /* white */
background-color: rgb(0, 0, 0); /* black */
}
Which would be 50% transparency. Another way to add the alpha is:
p {
color: rgb(255 255 255 / 0.5); /* white */
background-color: rgb(0, 0, 0); /* black */
}
HSL
Hue, saturation, and lightness (HSL). 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
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
In CSS there are a range of colors that can be selected using keywords as the value. Keywords are specific to the property and are case sensitive, when using a keyword it is not quoted.
For those eagle-eyed readers you will notice a quirk with the keywords that for the gray keyword shades there is also the alternative grey keyword which is the same color. In general CSS is written in American English, for example you can not use the word colour instead of color for the property, so why has this happened? It is actually documented in a few places to read about such as StackOverflow and on the W3C csswg-drafts GitHub thread if you would like to learn more.
When keywords for colors started it had only 16 keywords, but today there are 148 color keywords to choose from (including the duplicated grey/gray keywords):
- 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
. 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.
currentcolor value
The currentcolor keyword is a way to set the background, border, box-shadow and outline colors based on what the color property is set to. This keyword is well supported across all browsers based on the Can I Use website. The benefit of using the currentcolor keyword is that it makes it easier to maintain the stylesheet, although it perhaps is not always very clear what it stands for if someone doesn’t know what this value means.
div {
color: purple;
border: 4px solid currentcolor;
box-shadow: 10px 10px 5px solid currentcolor;
background: currentcolor;
}
Example of the currentcolor
See the Pen
currentcolor by Michael Gearon (@michaelgearon)
on CodePen.
More CSS Guides
You can view all of the CSS guides or here are a few specific ones that may be useful for you:

Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects