Color Converter
Convert colors between Hex, RGB, HSL, HWB, and OKLCh with a live preview.
#3b82f6#3b82f6ffrgb(59, 130, 246)hsl(217, 91%, 60%)hwb(217 23% 4%)oklch(0.623 0.188 259.8)?Tips
- Use HSL when you need to create color palettes by varying saturation and lightness.
- OKLCh ensures perceptual uniformity, meaning equal numerical changes produce equal visual changes.
- Click any preset swatch to quickly load a common color.
- Alpha/transparency is preserved across all output formats.
Understanding Color Formats
Digital colors use several formats, each with distinct strengths. Hex is the most compact CSS format, encoding RGB channels as two hex digits each (0-255). Shorthand (#f00) and 8-digit alpha variants (#ff000080) are also supported.
RGB (Red, Green, Blue) is the additive model used by screens. While precise for exact channel values, adjusting lightness or saturation requires changing all three channels simultaneously, making palette generation difficult.
HSL (Hue, Saturation, Lightness) maps to human intuition: hue is the color wheel angle (0-360), saturation controls vividness (0-100%), lightness controls brightness (0-100%). Keeping hue constant while varying S/L creates harmonious palettes easily.
HWB (Hue, Whiteness, Blackness) describes colors by mixing white and black into a hue, matching how artists think about tints and shades. It is now a standard CSS function.
OKLCh is a perceptually uniform color space where equal numerical changes produce equal visual changes. Unlike HSL where 50% lightness in yellow looks much brighter than in blue, OKLCh ensures consistent perceived brightness across all hues. This makes it ideal for accessible design systems and is natively supported in modern CSS.