CSS Color and Property Values
This article shows the different ways to assign vales to the color property.
Color property has two type of color keywords.
- Basic Color Keywords
- 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 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.
#808080 /* grey */ #ffc0cb /* pink */
- The value can be abbreviated if the RGB values are the same.
#rgb = #rrggbb #f00 /* shorthand */ #ff0000 /* longhand */
- 3 comma-sparated numbers between 0-255 or 0%-100%
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
- 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 is represented with a percentage.
- 100% is a full saturation, 0% is gray.
- 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)