What color format does CSS use?

There are different CSS color formats, including hexadecimal codes, RGB, HSL, and use alpha transparency with RGBA and HSLA.

Hexadecimal (Hex) Color Codes

Hex codes are a common way to represent colors in CSS, using a base-16 hexadecimal notation to denote the Red, Green, and Blue (RGB) components of a color.
A hex code starts with a pound sign (#), followed by six hexadecimal digits (0-9 and A-F). The first two digits represent the red component, the next two the green, and the last two the blue.
Each pair of hexadecimal digits corresponds to a decimal value from 0 to 255 (00 to FF).
If both values in each of the three RGB pairings are the same, the color code can be shortened to three characters (the first digit of each pairing). For example, #ff0000 can be shortened to #f00, and #ffffff to #fff. The browser interprets the shorthand notation by duplicating each digit (e.g., #369 as #336699).
Hex values are case-insensitive.

/* Full hex code for red */
h1 {
  color: #FF0000; /* */
}
/* Short hex code for green */
h2 {
  color: #0F0; /* Equivalent to #00FF00 */
}
/* Hex code for blue */
p {
  color: #0000FF; /* */
}

RGB Color Values

RGB (Red, Green, Blue) is a color system where colors are defined by the intensity of their red, green, and blue components.
RGB values are specified using the rgb() function, which takes three comma-separated values inside parentheses.
These values can be either integers from 0 to 255 or percentages from 0% to 100%.
For example, rgb(255, 0, 0) represents pure red, and rgb(0, 100%, 0%) represents pure green.

h1 {
  color: rgb(255, 0, 0); /* */
}
/* RGB value for green */
h2 {
  color: rgb(0, 255, 0); /* */
}
/* RGB value using percentages for gray */
p {
  color: rgb(50%, 50%, 50%); /* */
}

HSL Color Values

HSL stands for Hue, Saturation, and Lightness. It’s designed to be a more human-readable way to define colors.
HSL values are specified using the hsl() function, which takes three comma-separated values inside parentheses.
- Hue is the degree on the color wheel (from 0 to 360), where 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, and 300° is magenta.
- Saturation is a percentage (0% to 100%) representing the intensity of the color. 0% is fully desaturated (grayscale), and 100% is fully saturated (vivid).
- Lightness is also a percentage (0% to 100%) representing the brightness of the color. 0% is black, 50% is the normal color, and 100% is white.

/* HSL value for blue */
h1 {
  color: hsl(240, 100%, 50%); /* */
}
/* HSL value for green */
h2 {
  color: hsl(120, 100%, 50%); /* */
}
/* HSL value for a light red */
p {
  color: hsl(0, 100%, 75%);
}

Alpha Transparency with RGBA

RGBA extends the RGB color model by adding an alpha channel to specify the opacity of a color.
RGBA values are specified using the rgba() function, which takes four comma-separated values. The first three are the red, green, and blue components (as in rgb()), and the fourth value is the alpha value, which is a number between 0 and 1.
- 0 is fully transparent.
- 1 is fully opaque.
- Values in between represent different levels of transparency (e.g., 0.5 is 50% transparent).
RGBA affects only the color itself, allowing an element to have a transparent background color but opaque text, for example. This differs from the opacity property, which affects the entire element and its content.

/* Red with 50% opacity */
h1 {
  color: rgba(255, 0, 0, 0.5); /* */
}
/* Black with 80% transparency (20% opacity) */
p {
  background-color: rgba(0, 0, 0, 0.2); /* */
}
/* White with 0.8 opacity for background */
#wrapper {
  background-color: rgba(255, 255, 255, 0.8); /* Based on HSLA example - converted to RGBA */
}

Alpha Transparency with HSLA

HSLA extends the HSL color model by adding an alpha channel for transparency.
HSLA values are specified using the hsla() function, which takes four comma-separated values. The first three are the hue, saturation, and lightness (as in hsl()), and the fourth value is the alpha value, a number between 0 and 1.
- 0 is fully transparent.
- 1 is fully opaque.
- Values in between represent different levels of transparency (e.g., 0.5 is 50% transparent).
Like RGBA, HSLA allows for setting the transparency of a color without affecting the opacity of the element’s content.

/* Blue with 50% opacity */
h1 {
  color: hsla(240, 100%, 50%, 0.5); /* */
}
/* White with 80% opacity for background */
#wrapper {
  background-color: hsla(0, 0%, 100%, 0.8); /* */
}
/* Magenta with full saturation and normal lightness, 50% opaque */
p {
  color: hsla(300, 100%, 50%, 0.5); /* */

Other Color Keywords

The keyword transparent represents a fully-transparent black: rgba(0,0,0,0).
The keyword currentColor acts as a variable whose value is the current value of the color property of the element. It can be useful for making related elements share the same text color.

.element {
  color: blue;
  border: 1px solid currentColor; /* Border will be blue */
}
.transparent-box {
  background-color: transparent;
}

CSS also supports named colors (like red, blue, green), with an extended list of about 150 names supported by most browsers. However, for valid HTML and CSS, using hex values preferred over the non-standard named colors.

CCS3 Topics

Page Content

Tutorials