CSS Color Charts

Color charts that can be used with CSS. Includes hex, RGB, HSL, and more.

Examples

Here are some quick examples of the various color values.

HSL

The hsl() function allows you to create colors by specifying the hue, saturation, and lightness levels.

hsla(30, 100%, 50%);

HSLA

Same as the hsla() function, but allows you to create a transparent color by using a fourth value. The fourth value represents the alpha channel of the color.

hsla(30, 100%, 50%, 0.5);

RGB

The rgb() function lets you create a color by adding varying amounts of red, green, and blue together.

hsla(30, 100%, 50%);

RGBA

The rgba() function is the same as the RGB method, but allows you to create a transparent color by setting a fourth value. The fourth value represents the alpha channel.

hsla(30, 100%, 50%, 0.5);

Hex 6-Digit

Allows you to specify RGB colors using six-digit hexadecimal notation.

#FFCC00;

Hex 3-Digit

The three-digit notation is shorthand for the six-digit method.

#FC0;

Hex 8-Digit

The eight-digit hex notation is like the six-digit method, but it allows you to specify a transparent color by using a fourth color component, which specifies an alpha channel for the color.

#FFCC0033;

Hex 4-Digit

The four-digit notation is shorthand for the eight-digit method.

#FC03;