CSS Colors in HTML: Names, Hex, RGB and HSL

Learn how CSS sets text, background and border colors with named colors, hexadecimal, RGB, and HSL values.

Set color with CSS

Use CSS color properties to set text, backgrounds and borders. The color property sets text color; background-color sets an element's background.

Common color formats

CSS supports named colors, hexadecimal notation, RGB and HSL values. RGB describes red, green and blue channels. HSL describes hue, saturation and lightness. Both RGB and HSL can include an alpha value for transparency.

.notice {
  color: #243447;
  background-color: hsl(26 90% 54% / 20%);
  border: 2px solid rgb(244 128 36);
}

Prefer sufficient contrast between text and its background. Do not rely on color alone to communicate an important state or instruction.

Examples

• View the named color example (opens in a new tab)
• View the RGB and alpha example (opens in a new tab)
• View the hexadecimal color example (opens in a new tab)
• View the HSL color example (opens in a new tab)