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

The Modern Web

Build modern and responsive webpages Try Front-end

The Modern Web will guide you through the most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. The plain-english explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated.

$ Check price
34.9534.95Amazon 4.5 logo(30+ reviews)

More Front-end resources

Aching back from coding all day?

Self-Massage Tool

Aching back from coding all day? Try Back Problems

Relieve spasms, tight muscles, trigger points and pressure points with the Body Back Buddy! This trigger point massage is designed to help you self-message any area of your body - especially those that are hard to reach. Keeping your muscles relaxes and out of contraction is importan in helping to reduce pain and prevent muscle injury.

$ Check price
29.9529.95Amazon 4.5 logo(3,443+ reviews)

More Back Problems resources

Ad