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.

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:

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

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):

  1. aliceblue
  2. antiquewhite
  3. aqua
  4. aquamarine
  5. azure
  6. beige
  7. bisque
  8. black
  9. blanchedalmond
  10. blue
  11. blueviolet
  12. brown
  13. burlywood
  14. cadetblue
  15. chartreuse
  16. chocolate
  17. coral
  18. cornflowerblue
  19. cornsilk
  20. crimson
  21. cyan
  22. darkblue
  23. darkcyan
  24. darkgoldenrod
  25. darkgray
  26. darkgreen
  27. darkgrey
  28. darkkhaki
  29. darkmagenta
  30. darkolivegreen
  31. darkorange
  32. darkorchid
  33. darkred
  34. darksalmon
  35. darkseagreen
  36. darkslateblue
  37. darkslategray
  38. darkslategrey
  39. darkturquoise
  40. darkviolet
  41. deeppink
  42. deepskyblue
  43. dimgray
  44. dimgrey
  45. dodgerblue
  46. firebrick
  47. floralwhite
  48. forestgreen
  49. fuchsia
  50. gainsboro
  51. ghostwhite
  52. gold
  53. goldenrod
  54. gray
  55. green
  56. greenyellow
  57. grey
  58. honeydew
  59. hotpink
  60. indianred
  61. indigo
  62. ivory
  63. khaki
  64. lavender
  65. lavenderblush
  66. lawngreen
  67. lemonchiffon
  68. lightblue
  69. lightcoral
  70. lightcyan
  71. lightgoldenrodyellow
  72. lightgray
  73. lightgreen
  74. lightgrey
  75. lightpink
  76. lightsalmon
  77. lightseagreen
  78. lightskyblue
  79. lightslategray
  80. lightslategrey
  81. lightsteelblue
  82. lightyellow
  83. lime
  84. limegreen
  85. linen
  86. magenta
  87. maroon
  88. mediumaquamarine
  89. mediumblue
  90. mediumorchid
  91. mediumpurple
  92. mediumseagreen
  93. mediumslateblue
  94. mediumspringgreen
  95. mediumturquoise
  96. mediumvioletred
  97. midnightblue
  98. mintcream
  99. mistyrose
  100. moccasin
  101. navajowhite
  102. navy
  103. oldlace
  104. olive
  105. olivedrab
  106. orange
  107. orangered
  108. orchid
  109. palegoldenrod
  110. palegreen
  111. paleturquoise
  112. palevioletred
  113. papayawhip
  114. peachpuff
  115. peru
  116. pink
  117. plum
  118. powderblue
  119. purple
  120. rebeccapurple
  121. red
  122. rosybrown
  123. royalblue
  124. saddlebrown
  125. salmon
  126. sandybrown
  127. seagreen
  128. seashell
  129. sienna
  130. silver
  131. skyblue
  132. slateblue
  133. slategray
  134. slategrey
  135. snow
  136. springgreen
  137. steelblue
  138. tan
  139. teal
  140. thistle
  141. tomato
  142. turquoise
  143. violet
  144. wheat
  145. white
  146. whitesmoke
  147. yellow
  148. 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:

Michael Gearon

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects