How do I convert HEX to RGB, HSL, OKLCH, and CMYK?
Type a color in one format - the tool shows live every other format: HEX, RGB, HSL, HSV, OKLCH, LCH, Lab, CMYK.
Plus a screen eyedropper (Chrome / Edge) - click any pixel on your desktop (works outside the browser window too).
Everything runs locally - colors never leave the browser.
Built for web developers (HEX/RGB/OKLCH for CSS), DTP work (CMYK for print), color scientists (Lab/LCH for color difference math).
How to use it
- Type a color in the HEX input (left column) or use the eyedropper - "Pick from screen" samples any pixel on your desktop.
- On the right every format updates live: RGB, HSL, HSV, OKLCH, LCH, Lab, CMYK. Each block has channel sliders - editing one format updates the others.
- Each block has a "Copy" button - copies the CSS-ready string (e.g. `oklch(0.51 0.18 264.5)`).
- "Nearest CSS name" under the swatch shows which named CSS color you're closest to (e.g. mediumslateblue).
- At the bottom of the left panel: 8 popular Tailwind colors as presets - great for starting a palette.
When this is useful
Who benefits from the color converter - typical roles:
- Web developer - you got a HEX from Figma, need OKLCH for modern CSS. Paste and done.
- DTP / print - brand book HEX, printer wants CMYK. Note: ours is approximate - for pre-press production use the printer's ICC profile.
- Migration to OKLCH - Tailwind v4 and Radix Colors use OKLCH. Easy conversion of an old HEX palette to the modern format.
- Color scientist - Lab and LCH are the ΔE 2000 (color difference) standard. Export to your math.
- Branding - OKLCH shows that hue (h) stays consistent across lightness changes - unlike HSL.
Once you have your base color, build a full 50-950 scale in the Tailwind palette generator, find matching accents with the color harmony tool, and verify your text/background pair against WCAG in the contrast checker.
Questions and answers
No. The converter is 100% local - conversion math + CSS named-color lookup. Even the screen eyedropper uses the local EyeDropper API - the browser shows a system dialog, but the result returns only to the page.