CSS Colors

❮ Prev Next ❯

By default an HTML page is rendered by web browsers quite sadly in terms of the colors used.

We have a white background, black color, and blue links. That's it.

Luckily CSS gives us the ability to add colors to our designs.

We have these properties:

color
background-color
border-color

All of them accept a color value, which can be in different forms.

Named colors

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

Here is 216 cross-browser color palette used for creating pages of websites.

Hex Value	Color	RGB Value
#000000		rgb(0,0,0)
#FFFFFF		rgb(255,255,255)
#FF0000		rgb(255,0,0)
#00FFFF		rgb(0,255,255)
#0000FF		rgb(0,0,255)
#C0C0C0		rgb(192,192,192)
#FF00FF		rgb(255,0,255)

Hex Value	Color	RGB Value
#000000		rgb(0,0,0)
#080000		rgb(8,0,0)
#100000		rgb(16,0,0)
#180000		rgb(24,0,0)
#200000		rgb(32,0,0)
#280000		rgb(40,0,0)
#300000		rgb(48,0,0)
#380000		rgb(56,0,0)
#400000		rgb(64,0,0)
#480000		rgb(72,0,0)
#500000		rgb(80,0,0)
#580000		rgb(88,0,0)
#600000		rgb(96,0,0)
#680000		rgb(104,0,0)
#700000		rgb(112,0,0)
#780000		rgb(120,0,0)
#800000		rgb(128,0,0)
#880000		rgb(136,0,0)
#900000		rgb(144,0,0)
#980000		rgb(152,0,0)
#A00000		rgb(160,0,0)
#A80000		rgb(168,0,0)
#B00000		rgb(176,0,0)
#B80000		rgb(184,0,0)
#C00000		rgb(192,0,0)
#C80000		rgb(200,0,0)
#D00000		rgb(208,0,0)
#D80000		rgb(216,0,0)
#E00000		rgb(224,0,0)
#E80000		rgb(232,0,0)
#F00000		rgb(240,0,0)
#F80000		rgb(248,0,0)
#FF0000		rgb(255,0,0)

Hex Value	Color	RGB Value
#000000		rgb(0,0,0)
#080808		rgb(8,8,8)
#101010		rgb(16,16,16)
#181818		rgb(24,24,24)
#202020		rgb(32,32,32)
#282828		rgb(40,40,40)
#303030		rgb(48,48,48)
#383838		rgb(56,56,56)
#404040		rgb(64,64,64)
#484848		rgb(72,72,72)
#505050		rgb(80,80,80)
#585858		rgb(88,88,88)
#606060		rgb(96,96,96)
#686868		rgb(104,104,104)
#707070		rgb(112,112,112)
#787878&		rgb(120,120,120)
#808080		rgb(128,128,128)
#888888		rgb(136,136,136)
#909090		rgb(144,144,144)
#989898		rgb(152,152,152)
#A0A0A0		rgb(160,160,160)
#A8A8A8		rgb(168,168,168)
#B0B0B0		rgb(176,176,176)
#B8B8B8		rgb(184,184,184)
#C0C0C0		rgb(192,192,192)
#C8C8C8		rgb(200,200,200)
#D0D0D0		rgb(208,208,208)
#D8D8D8		rgb(216,216,216)
#E0E0E0		rgb(224,224,224)
#E8E8E8		rgb(232,232,232)
#F0F0F0		rgb(240,240,240)
#F8F8F8		rgb(248,248,248)
#FFFFFF		rgb(255,255,255)

Web-color
#000000	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF
#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF
#660000	#660033	#660066	#660099	#6600CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF
#990000	#990033	#990066	#990099	#9900CC	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	v99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	v99FF99	#99FFCC	#99FFFF
#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF

plus tranparent, and currentColorwhich points to the color property, for example useful to make the border-colorinherit it.

Wikipedia has a nice table which lets you pick the perfect color by its name.

Named colors are not the only option.

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() lets you add the alpha channel to enter a transparent part. That can be a number from 0 to 1:

p{
  background-color :rgb(0, 0, 0, 0.5);
}

Hexadecimal notation

Another option is to express the RGB parts of the colors in the hexadecimal notation, which is composed by 3 blocks.

Black, which is rgb(0,0,0) is expressed as #000000 or #000(we can shortcut the 2 numbers to 1 if they are equal).

White, rgb(255,255,255) can be expressed as #ffffff or #fff(we can shortcut the 2 numbers to 1 if they are equal).

The hexadecimal notation lets express a number from 0 to 255 in just 2 digits, since they can go from 0 to "15" (f).

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.

HSL and HSLa

This is a more recent addition to CSS.

HSL = Hue Saturation Lightness.

In this notation, black is hsl(0, 0%, 0%) and white is hsl(0, 0%, 100%).

If you are more familiar with HSL than RGB because of your past knowledge, you can definitely use that.

You also have hsl() which adds the alpha channel to the mix, again a number from 0 to 1: hsl(0, 0%, 0%, 0.5).

Example

<!DOCTYPE HTML>
<html>
    <head>
      <style>
        /* Nice rule! */
        .first-p{
          color:rgb(255, 255, 255);/* White */
          background-color:rgb(0, 0, 0);/* black */
        }
        .second-p{
          color:rgb(255, 255, 255);/* White */
          background-color:rgb(0, 0, 0, 0.5);/*black with opacity*/
        }
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <div> 
        <p class="first-p">the text will be white and black background</p>
        <p class="second-p">the text will be white and black background</p>
      </div>
    </body>
  </html>

Try it Yourself »