Updated June 29, 2026

CSS color formats reference

CSS accepts colors in several notations that all describe the same screen colors. These are the ones you will use most, with an example of each.

Notations

Format	Example	What it is
`HEX`	`#2563eb`	Red, green, blue as two hex digits each.
`HEX + alpha`	`#2563ebcc`	HEX with a fourth pair for opacity.
`rgb()`	`rgb(37 99 235)`	Red, green, blue from 0 to 255.
`rgb() + alpha`	`rgb(37 99 235 / 80%)`	RGB with an opacity value.
`hsl()`	`hsl(221 83% 53%)`	Hue (0-360), saturation, and lightness.
`hsl() + alpha`	`hsl(221 83% 53% / 80%)`	HSL with an opacity value.
`named`	`rebeccapurple`	One of the predefined CSS color keywords.
`oklch()`	`oklch(0.6 0.15 250)`	A modern, perceptually uniform color space.

Modern syntaxCurrent CSS allows space-separated values and a slash for alpha, as in rgb(37 99 235 / 80%). The older comma form rgba(37, 99, 235, 0.8) still works.

References

CSS color value on MDN — MDN

Questions

Do I need rgba() and hsla() anymore?

Not strictly. Modern CSS lets rgb() and hsl() include an alpha value with a slash, so rgb(0 0 0 / 50%) works. The older rgba() and hsla() forms remain valid for compatibility.

What is oklch?

oklch is a newer color notation based on a perceptually uniform color space, which makes lightness and chroma changes look more consistent to the eye than HSL.