CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS Colors

Colors in CSS are most often specified by:

Valid color names - like "red"
RGB values - like "rgb(255, 0, 0)"
HEX values - like "#ff0000"
HSL values - like "hsl(0, 100%, 50%)"
HWB values - like "hwb(0 0% 0%)"
LAB values - like "lab(53.24% 80.09 67.20)"
LCH values - like "lch(53.24% 104.55 40)"

Example 1: Color Names

CSS supports 140 standard color names.

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Example 2: Background Color

You can set the background color for HTML elements:

Hello World

Example 3: Text Color

You can set the color of text:

Hello World

This text is black (default).

Example 4: Border Color

You can set the color of borders:

Hello World

Example 5: Color Values

In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

Example

h1 {
  background-color: Tomato;
}

h2 {
  color: DodgerBlue;
}

p {
  color: rgb(60, 60, 60);
}