CSS Color and Property Values

This article shows the different ways to assign vales to the color property.

Keywords

Color property has two type of color keywords.

  1. Basic Color Keywords
  2. Extended Color Keywords

It’s hard to remember and know all the valid extended color keywords. neil orange peel is a great tool to find all the valid extended color keywords.

RGB Values

RGB values define colors according to its red, green and blue components.

Hexadecimal Values (Hex)

  • Hex values are prefixed with a number sign (#) followed by six characters (0-9 and A-F).

  • Defines the red, green and blue values: #rrggbb

  • The notation is case-insensitive.

Example

#808080 /* grey */
#ffc0cb /* pink */
  • The value can be abbreviated if the RGB values are the same.

Examples

#rgb = #rrggbb
#f00 /* shorthand */
#ff0000 /* longhand */

RGB Functions rgb() and rgba()

  • 3 comma-sparated numbers between 0-255 or 0%-100%

Example

rgb(0, 0, 0) /*black*/
rgb(0%, 0%, 0%) /*black*/

rgba() a stands for alpha.

  • In rgba() function RGB values can be used to define color and a alpha value to change the opacity.
  • Opacity value can only between 0 and 1.
rgba(0, 0, 0, 0.5) /* 50% opacity */

Hue, Saturation, and Lightness Functions hsl() and hsla()

Hue

  • The hue is specified as an angle with in color wheel relative to red. Red equal 0 degrees or 360 degrees and other colors are spread arround the circle.

Saturation

  • Saturation is represented with a percentage.
  • 100% is a full saturation, 0% is gray.

Lightness

  • Lightness is represented with a percentage.
  • 100% = white, 0% = black, 50% = normal

Alpha Channel or Opacity

  • The alpha channel can be represented as decimal or percentage.

  • Defines the color value by its hue, saturation, and lightness.

  • Also includes an optional alpha channel just like in RGB funtions.

/* Hue, Saturation, and Lightness , alpha/opacity */
hsl(270, 60%, 80%)
hsl(270, 60%, 80%, 0.8)

Tool for hsl() colors

CSS Tricks HSLAa Explorer

Next