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:

greenSample
transparencySample

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.

Hue

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.

Saturation

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

Lightness

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

Transparency

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:

purple

transparencySample

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?

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

Ad