CSS Color Review

Color Review

We've completed our extensive tour of the colors in CSS! Let's review the key information we've learned.

There are four ways to represent color in CSS:

• Named colors — there are 147 named colors, which you can review here.

• Hexadecimal or hex colors

  • Hexadecimal is a number system with has sixteen digits, 0 to 9 followed by "A" to "F".
  • Hex values always begin with # and specify values of red, blue and green using hexademical numbers such as #23F41A.

• RGB

  • RGB colors use the rgb() syntax with one value for red, one value for blue and one value for green.
  • RGB values range from 0 to 255 and look like this: rgb(7, 210, 50).

• HSL

  • HSL stands for hue (the color itself), saturation (the intensity of the color), and lightness (how light or dark a color is).
  • Hue ranges from 0 to 360 and saturation and lightness are both represented as percentages like this: hsl(200, 20%, 50%).

• You can add opacity to color in RGB and HSL by adding a fourth value, a, which is represented as a percentage.