Guide

HEX, RGB, HSL, and OKLCH color models

Understand which color format to use in CSS, design tools, accessibility checks, and modern wide-gamut workflows.

1

HEX and RGB describe screen channels

HEX is a compact notation for red, green, and blue channel values. RGB expresses the same underlying sRGB channels as numbers, making both formats predictable for established web workflows.

2

HSL is convenient for authoring

HSL separates hue, saturation, and lightness. It is intuitive for simple adjustments, but equal changes in HSL lightness do not always look equally large to people.

3

OKLCH is designed around perception

OKLCH separates perceptual lightness, chroma, and hue. It is useful for smoother scales and modern CSS, while gamut checking remains important for saturated colors.