Color Converter
Convert colors between HEX, RGB, HSL, and OKLCH instantly.
Color formats explained
Colors in CSS and design tools can be expressed in several different formats, each with its own strengths. Understanding when to use each format makes you a more effective frontend developer and designer.
HEX (#3B82F6) is the most common format for web development. Each pair of hexadecimal digits represents the red, green, and blue channels (0–255). Shorthand is available when each channel has repeated digits (#AAB = #AAAABB). HEX supports 8-digit format for alpha (#3B82F6CC).
RGB (rgb(59, 130, 246)) expresses colors as red, green, and blue values from 0 to 255. The modern CSS Level 4 syntax uses rgb(59 130 246) without commas. rgba() adds an alpha channel from 0 (transparent) to 1 (opaque).
HSL (hsl(217, 91%, 60%)) uses hue (0–360°), saturation (0–100%), and lightness (0–100%). HSL is far more intuitive for humans: to darken a color, reduce lightness. To desaturate, reduce saturation. This makes HSL ideal for creating color scales programmatically.
OKLCH (oklch(0.62 0.20 262)) is a perceptually uniform color space designed for modern CSS. Unlike HSL, equal numerical differences in OKLCH correspond to equal perceived differences in color. This makes OKLCH superior for accessible design, consistent color scales, and smooth gradient interpolation.
Common mistakes
- Ignoring color spaces — Different color spaces (sRGB, Display P3, Rec. 2020) have different gamuts. P3 can display more vivid colors on modern screens. The oklch() function makes it easy to stay within the sRGB gamut.
- Using lightness for contrast calculation — The L in HSL is not a reliable measure of perceived brightness. Use APCA (Advanced Perceptual Contrast Algorithm) or the simpler WCAG 2.x relative luminance formula for contrast checking.