CSS supports more color formats than most developers use. Knowing when to reach for hex vs HSL vs oklch affects readability, maintainability, and how easily you can manipulate colors in code.

Hex

The most widely used format. A 6-digit hexadecimal value representing red, green, and blue channels:

color : #3 b82f6 ; /* blue */ color : #ff0000 ; /* red */ color : #000000 ; /* black */ color : #ffffff ; /* white */

Enter fullscreen mode

Exit fullscreen mode

Each pair represents a channel from 00 (0) to ff (255). You can also use 3-digit shorthand when each pair is a repeated digit:

color : #fff ; /* same as #ffffff */ color : #000 ; /* same as #000000 */ color : #f00 ; /* same as #ff0000 */

Enter fullscreen mode

Exit fullscreen mode

With alpha (transparency) : append two more hex digits (00–ff):

color : #3 b82f680 ; /* 50% opacity blue */ color : #00000040 ; /* 25% opacity black */

Enter fullscreen mode

Exit fullscreen mode

When to use hex : copying from design tools (Figma, Sketch export hex),…