06. Colors

There are four ways to specify a color in CSS:

  1. Predefined Colors
  2. RGB values
  3. Hexadecimal values
  4. HSL

Predefined Colors

There are 147 predefined colors. Some of these include: yellow,lime,aqua,red,fuchsia,silver,gray,green, and teal.

To get a more complete listing, visit the w3schools color names webpage.

RGB (Red, Green, Blue)

RGB expresses how much red, green and blue are mixed in to produce the color. The three values are given a numerical value from 0 to 255. 0 meaning none of that color is mixed, while 255 means the maximum shade is used.

Thus, if we have rgb(0, 255, 0) we have 0 red, full green and 0 blue, giving us a green color. Additionally, you can specify the numbers using a percentage value. 0% is the value 0, while 100% would translate to 255.

Additionally, we can add an optional fourth value that specifies the color's opacity. To do so, we use "rgba," which is the same concept, but adds a fourth value a, which stands for alpha transparency.

#greenSample {
  color: rgb(0, 255, 0);
#transparencySample {
  color: rgba(0, 255, 0, 0.75);

We would have:


Hex Codes

Instead of applying values of red, green and blue as a number from 0 to 255, we can use two hexadecimal numbers, one for each RGB value.

Note that hexadecimal values go from 0 9, then A to F. Since there are two hexadecimal values for each RGB, we have a total of six values that are preceded by a pound symbol (#).

If every other value is repeated (eg #FF00BB), we can simplify this to #F0B. Note that capitalization does not matter, so $f0b would be the same as #F0B. For a quick-hand reference for hex colors, go to w3school website.

To specify transparency values for predefined/hex codes, we can add a separate opacity property.

HSL (Hue, Saturation, Lightness)

HSL stands for hue, saturation and lightness.


The hue is taken from a color wheel, as shown below. The first degree starts at the red, and wraps around the wheel to 360. Any value that are greater than 360 simply wraps around the wheel. Thus, the values of 0 and 360 would also represent the same red.

color wheel diagram

Some general colors are: 0 and 360 for red, 120 for green, and 240 for blue.


The saturation signifies how washed out (or vibrant) you want the color to look. 0% means mid-gray, and 100% means more vivid.


The lightness(aka luminosity) is how light you want your color to appear. 0% means black, 100% means white and 50% is brightest.


You can also control how the transparency with an optional alpha value between 0 and 1.0. color: hsla(60, 50%, 50%, 0.3);

#purpleSample {
  color: hsl(272, 69%, 45%);
  font-weight: bold;
#transparencySample {
  color: hsla(272, 69%, 45%, 0.78);
  font-weight: bold;

We would have:



To experiment around with these colors, try Brand Manthis' nifty HSL picker.

Build modern and responsive webpages

High Performance Web Sites

Build modern and responsive webpages Try Front-end

Want your web site to display more quickly? This book presents 14 specific rules that will cut 25% to 50% off response time when users request a page. Author Steve Souders, in his job as Chief Performance Yahoo!, collected these best practices while optimizing some of the most-visited pages on the Web.

$ Check price
29.9929.99Amazon 4.5 logo(63+ reviews)

More Front-end resources

Aching back from coding all day?

Prism Glasses

Aching back from coding all day? Try Back Problems

Ever feel achy from sitting crunched up on your computer table? Try lying down with these optical glasses that allow you to work on your laptop while lying flat on your back. This is the perfect solution with those with limited mobility or those who wish to prevent neck cramps and back strains.

$ Check price
4.454.45Amazon 4 logo(128+ reviews)

More Back Problems resources