CSS Gradient Generator
Build linear, radial and conic gradients and copy the CSS.
Design & SEO
Color Converter
HEX, RGB, HSL, HSV, CMYK, LAB and OKLCH with exact math.
What it does. A color converter translates a color between notation systems — HEX for the web, RGB for screens, HSL for intuitive adjustment, CMYK for print, LAB and OKLCH for perceptual work. This tool converts across all of them simultaneously with exact math, and reports WCAG contrast against white and black.
Runs in your browserNothing uploadsNo signupWorks offline
How to use Color Converter
- Enter a color in any format, or pick one from the visual picker.
- Every other format updates instantly. Click any value to copy it.
- Check the contrast ratios and the generated tint and shade ramp.
Which color format should I use?
| Format | Example | Use for | Gamut |
|---|---|---|---|
| HEX | #F5A524 | Web, universal support | sRGB |
| RGB | rgb(245 165 36) | Web, when alpha varies | sRGB |
| HSL | hsl(35 91% 55%) | Adjusting lightness and saturation by hand | sRGB |
| HSV/HSB | hsv(35 85% 96%) | Design tools — Photoshop, Figma pickers | sRGB |
| CMYK | cmyk(0 33 85 4) | Print — but always convert via a profile | |
| LAB | lab(75 20 71) | Perceptual comparison, color difference | Wide |
| OKLCH | oklch(76% 0.15 71) | Modern CSS, perceptual palettes | Wide |
OKLCH is the notable addition to this list. It is perceptually uniform, meaning equal numeric changes produce equal visual changes — so a palette generated by stepping lightness in OKLCH has genuinely even steps, which the same operation in HSL does not. It landed in all major browsers during 2023 and is now the right default for generating systematic color scales.
Why does HSL lightness lie?
Because HSL lightness is a mathematical midpoint, not a perceptual one. hsl(60 100% 50%) is pure yellow and hsl(240 100% 50%) is pure blue — identical lightness values, wildly different apparent brightness. The yellow is roughly ten times more luminous.
This causes a specific, common failure: a designer builds a palette by holding lightness constant and rotating the hue, and the resulting swatches look nothing alike in weight. The yellow glares, the blue disappears.
OKLCH fixes it. Its L channel tracks perceived lightness, so oklch(70% 0.15 60) and oklch(70% 0.15 250) genuinely look equally bright. If you are generating a design system palette programmatically, this is the difference between a ramp that works and one that needs manual correction at every step.
Why does CMYK conversion never quite match?
Because RGB and CMYK are not two notations for the same thing — they are different physical processes with different achievable colors.
RGB is additive: light sources combining toward white. CMYK is subtractive: inks absorbing light from white paper. The CMYK gamut is substantially smaller, and the colors it cannot reach are exactly the ones screens do best — vivid cyan, saturated orange, electric green. A brand color that glows on screen frequently prints as a duller sibling.
A second issue is that CMYK is device-dependent. The same ink values produce different results on coated stock, uncoated stock, and newsprint. Real conversion requires an ICC profile for the specific press and paper, which is why the CMYK values here are a naive approximation suitable for reference, not for a print job.
For anything going to press, get the CMYK values from your printer or convert through a profile in professional software.
How do I check if my colors are accessible?
Contrast ratio, computed from relative luminance, ranges from 1:1 (identical) to 21:1 (black on white). WCAG 2.2 sets the thresholds.
| Content | AA minimum | AAA minimum |
|---|---|---|
| Body text under 18pt | 4.5:1 | 7:1 |
| Large text, 18pt+ or 14pt bold | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | — |
| Disabled elements | No requirement | — |
This tool reports the ratio against both white and black for whatever color you enter, so you can see at a glance which text color a background supports. Note that WCAG 2.x contrast is known to be imperfect for dark backgrounds — it systematically overstates the readability of light text on dark surfaces. The APCA algorithm being developed for WCAG 3 addresses this, but AA remains the legal standard in the US under the ADA and in the EU under EN 301 549.
Frequently asked questions
How do I convert HEX to RGB by hand?
Split the six digits into three pairs and read each as a base-16 number. #F5A524 gives F5 = 245, A5 = 165, 24 = 36, so rgb(245, 165, 36).
What does the fourth pair in an 8-digit hex mean?
Alpha. #F5A524FF is fully opaque, #F5A52480 is about 50% transparent. Supported in every current browser.
Why do my print colors look different?
CMYK has a smaller gamut than RGB, so vivid screen colors cannot be reproduced with ink. Accurate conversion also needs an ICC profile for the specific press and paper.
What is the difference between HSL and HSV?
They handle the top of the scale differently. In HSL, lightness 100% is always white. In HSV, value 100% is the most saturated version of the hue. Design tools generally use HSV.
Should I use OKLCH in production CSS?
Yes, with a fallback. All current browsers support it; declare a hex value first and the OKLCH version second so older browsers take the fallback.
What contrast ratio do I need?
4.5:1 for normal body text and 3:1 for large text or UI components, to meet WCAG AA — the level referenced by accessibility law in the US, UK and EU.
Is the color math done locally?
Yes. Every conversion is hand-written arithmetic running in this page.
Guides for Color Converter
- Layout and Colour Decisions in CSS8 min read
- HEX vs RGB vs HSL: Which to Use When7 min read
- WCAG Contrast Requirements, Explained Properly8 min read