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

Responsive Typography

Build modern and responsive webpages Try Front-end

Responsive web design helps your site maintain its design integrity on a variety of screen sizes, but how does it affect your typography? With this practical book, graphic designers, web designers, and front-end developers alike will learn the nuts and bolts of how to get the best appearance from type without sacrificing performance on any device.

$ Check price
24.9924.99Amazon 4.5 logo(3+ reviews)

More Front-end resources

Aching back from coding all day?

Acupressure Mat & Pillow

Aching back from coding all day? Try Back Problems

Relieve your stress, back, neck and sciatic pain through 1,782 acupuncture points for immediate neck pain relief. Made for lower, upper and mid chronic back pain treatment, and improves circulation, sleep, digestion and quality of life.

$$ Check price
144.87144.87Amazon 4.5 logo(1,890+ reviews)

More Back Problems resources