Color Converter

About this color converter

Convert a color between HEX, RGB, HSL and OKLCH, and check its contrast against white and black. Everything is computed in your browser.

Accepted input

Hex in 3, 4, 6 or 8 digits (with or without the #), rgb() and rgba() in both modern space syntax and legacy commas, hsl(), and oklch(). Alpha is preserved throughout. Named colors such as rebeccapurple are deliberately not supported: partial support would be worse than none, since it is impossible to guess which names would work.

Why OKLCH is worth knowing

HSL has a flaw that shows up the moment you build a palette: two colors with the same stated lightness can look wildly different in brightness — hsl(60 100% 50%) (yellow) is far lighter to the eye than hsl(240 100% 50%) (blue), despite both claiming 50%. OKLCH is perceptually uniform, so equal lightness values genuinely look equally light, and changing hue does not change apparent brightness. That makes it much better for generating consistent color scales, and it is supported in all current browsers.

Reading the contrast figures

WCAG contrast is a ratio from 1:1 (identical) to 21:1 (black on white). Normal body text needs 4.5:1 for AA and 7:1 for AAA; large text — roughly 24px, or 19px bold — only needs 3:1. These thresholds apply to text and to meaningful interface elements such as icons and input borders, not to decorative color.

Contrast is computed against fully opaque white and black. If your color has alpha, what a user actually sees depends on what is behind it, so treat the numbers as an upper bound for translucent colors.