CSS Color Values

CSS colors can be written using several different formats, including color names, hexadecimal values, RGB, HSL, and HWB.

Different color formats provide different ways to describe a color. Some are convenient for choosing fixed colors, while others make it easier to adjust individual color components or add transparency.

Color Names

CSS includes predefined color names that can be used directly as color values. Names such as red, blue, green, and orange provide a readable way to specify common colors.

p {
  color: blue;
}

CSS defines a much larger collection of named colors than these basic examples. The complete set is covered in the CSS Color Names tutorial.

HEX Color Values

Hexadecimal color values begin with a number sign (#) followed by hexadecimal digits representing the color components.

p {
  color: #0088cc;
}

The common six-digit form uses two digits each for red, green, and blue. Values range from 00 to ff.

HEX colors can also use three-digit shorthand when each pair of digits contains matching values. For example, #ff0000 can be shortened to #f00.

RGB Color Values

RGB colors describe a color using its red, green, and blue components. Each component can use an integer from 0 through 255.

p {
  color: rgb(0 136 204);
}

Increasing or decreasing the individual components changes how much red, green, or blue contributes to the resulting color.

HSL Color Values

HSL represents colors using hue, saturation, and lightness. Hue identifies a position around the color wheel, while saturation and lightness are expressed as percentages.

p {
  color: hsl(200 100% 40%);
}

HSL can be convenient when colors need to be adjusted by changing their hue, intensity, or lightness while keeping the other components predictable.

HWB Color Values

HWB represents a color using hue, whiteness, and blackness. Hue identifies the base color, while whiteness and blackness control how much white or black is mixed with it.

p {
  color: hwb(200 0% 20%);
}

Like HSL, HWB provides a way to describe and adjust colors using components that relate directly to visible changes in the resulting color.

Alpha Transparency

RGB, HSL, and HWB color functions can include an alpha value after a slash to control the color's transparency.

background-color: rgb(0 136 204 / 0.5);
background-color: hsl(200 100% 40% / 0.5);
background-color: hwb(200 0% 20% / 0.5);

An alpha value of 1 is fully opaque, while 0 is fully transparent. Values between them create partial transparency. Percentages can also be used for alpha values.

HEX colors can also include an alpha component using four-digit or eight-digit hexadecimal notation.

Equivalent Color Values

The same visible color can often be represented using several different CSS color formats.

color: #0088cc;
color: rgb(0 136 204);
color: hsl(200 100% 40%);
color: hwb(200 0% 20%);

These values all describe the same color. Changing the format changes how the color is expressed in the stylesheet, not the resulting color displayed by the browser.

CSS Color Values Example

Use the sliders to change the color. The example displays the selected color as HEX, RGB, HSL, and HWB values so you can compare the different formats.

<style>
.color-example {
  background-color: #0088cc;
  color: white;
}
</style>

<div class="color-example">CSS Color Values</div>

Play in Editor

Although each format describes the color differently, the browser converts the values into a color that can be displayed on the screen.