Color Converter — HEX, RGB, HSL, OKLCH
HEX, RGB, HSL and OKLCH conversion with a preview and WCAG contrast check
Runs in your browser · nothing is uploaded
Color recognized: #1e90ff
#1e90ffrgb(30, 144, 255)hsl(209.6, 100%, 55.9%)oklch(0.652 0.1901 253.21)WCAG contrast
3.24:1
- AA normal text (4.5)Fail
- AA large text (3)Pass
- AAA normal text (7)Fail
- AAA large text (4.5)Fail
6.49:1
- AA normal text (4.5)Pass
- AA large text (3)Pass
- AAA normal text (7)Fail
- AAA large text (4.5)Pass
What it is
HEX in your stylesheet, RGB in a design tool, HSL or OKLCH in a palette: color values keep changing form. Type a color in any of these formats and this tool shows HEX, RGB, HSL and OKLCH together, previews the color, and checks its contrast against white and black backgrounds.
How to use
- Type a color or use the picker beside the input. Examples:
#1e90ff,rgb(30 144 255),hsl(210 100% 56%),oklch(0.65 0.19 250). - Read the HEX, RGB, HSL and OKLCH values below and copy the one you need.
- In the contrast section, see the ratio on white and on black, and whether it passes AA and AAA. If your design uses another background, type it into Background color to check that exact pair.
- A color with transparency comes out as 8-digit HEX,
rgba(),hsla()and/ alphaforms.
How it works
- Input accepts HEX (3, 4, 6 or 8 digits,
#optional), the 148 CSS Color 4 names (tomato,rebeccapurple, any case) andtransparent,rgb()/rgba()(comma or space syntax, percentages allowed),hsl()/hsla()andoklch(). - OKLCH uses the standard matrices from Björn Ottosson’s OKLab definition (2020). sRGB is made linear, passed through the LMS cube roots to get L, a and b; C is the length of (a, b) and H its angle.
- Output precision is one decimal for HSL, four for OKLCH L and C and two for H, enough that converting back to HEX returns the exact starting value.
- An OKLCH input outside the sRGB gamut is clamped per channel to 0-255 and a notice is shown.
- Contrast follows WCAG 2.x relative luminance. The displayed ratio is rounded to two decimals, but pass or fail uses the unrounded value, so 4.499 is never shown as a passing 4.5.
Examples
| Input | Result |
|---|---|
#ffffff against black |
21:1, passes every level |
#777777 on white |
about 4.48:1, fails AA for normal text, passes for large text |
#ff0000 |
oklch(0.628 0.2577 29.23) |
#ffffff |
oklch(1 0 0) |
Notes
- For body text, treat AA normal (4.5:1) as the minimum. Large text, meaning 18pt or larger or 14pt bold, needs only 3:1 for AA.
- Do not rely on color alone to convey meaning; add an icon or a label. A contrast check only measures the lightness difference between text and background.
FAQ
Why use OKLCH?
In HSL, two colors with the same lightness value can look very different in brightness, which makes palettes fiddly. OKLCH is built on the OKLab color space, designed around human perception, so changing L (lightness), C (chroma) or H (hue) gives fairly even visible steps. CSS accepts it directly through oklch().
What happens when an OKLCH value is outside the sRGB gamut?
If the screen's sRGB cannot show it, each RGB channel is clamped to 0-255 and the nearest color is used, with a notice. This is plain clamping, not gamut mapping that reduces chroma step by step, so the result may differ a little from what you intended.
How is the contrast ratio calculated?
With the WCAG 2.x relative luminance formula - (lighter luminance + 0.05) divided by (darker luminance + 0.05) - which runs from 1:1 to 21:1. Normal text needs 4.5:1 for AA and 7:1 for AAA; large text needs 3:1 and 4.5:1.
How are translucent colors handled for contrast?
They are composited over the chosen background (white or black) first. A 50% black on white looks gray, so the ratio is computed for that gray.
