Color Converter
Convert HEX, RGB, HSL, HSV, HWB, LAB, LCH, OKLAB, OKLCH, Display P3 and CMYK color values. Check contrast, generate accessible palettes, preview UI states, and export design tokens locally in your browser.
Preview
Editing Sliders
Contrast Checker
Color Harmonies
UI Color Scale (OKLCH)
Export Design Tokens
Diagnostics
What the Color Converter Does
This tool parses, converts, and analyzes colors across modern CSS color spaces entirely in your browser using the culori library for accurate color science calculations.
HEX, RGB, HSL, HSV, and HWB
HEX and RGB are common web formats. HSL and HSV provide intuitive hue-based editing. HWB is a CSS Color Level 4 format.
LAB, LCH, OKLAB, and OKLCH
OKLCH is a perceptually uniform space ideal for consistent color scales. Equal lightness steps appear equally bright to human vision.
Display P3 and Gamut Warnings
Display P3 represents about 50% more colors than sRGB. Wide-gamut colors are mapped to nearest sRGB for HEX/RGB output.
CMYK Approximation
CMYK conversion is approximate without ICC profiles. Not suitable for press-ready print production.
Contrast and Accessibility
The contrast checker uses WCAG 2.1 relative luminance to calculate contrast ratios and AA/AAA compliance.
Color Schemes and UI Scales
Harmonies use OKLCH hue rotation for perceptually balanced palettes. UI scales generate Tailwind-style shade steps.
Design Token Exports
Export scales as CSS, Tailwind, SCSS, JSON, DTCG, Style Dictionary, Android, iOS, or Flutter code.
Privacy
All calculations run locally. No data is sent anywhere. The culori library is loaded from CDN and cached.
FAQ
Is my color data uploaded?
No. All processing happens locally in your browser.
What formats can I convert?
HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, LAB, LCH, OKLAB, OKLCH, Display P3, CMYK (approximate), and CSS named colors.
What is OKLCH?
A perceptually uniform color space with Lightness, Chroma, and Hue. Produces more consistent gradients than HSL.
Why does OKLCH help with UI color scales?
Equal lightness steps appear equally bright, making palettes look natural and balanced.
What is Display P3?
A wide-gamut color space showing more saturated colors than sRGB on supported displays.
Why is my color outside sRGB?
OKLCH/LCH/P3 colors may exceed sRGB limits. The converter shows a gamut-mapped fallback.
Is CMYK conversion print-ready?
No. These are approximations without ICC profiles. Use prepress tools for print.
Does this include Pantone?
No. Pantone matching is not implemented. Only open CSS color standards are used.
How is contrast calculated?
WCAG 2.1: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance.
What contrast ratio should I target?
4.5:1 for normal text AA, 7:1 for AAA, 3:1 for large text AA and UI components.
Can I export Tailwind colors?
Yes. Select Tailwind Config or Tailwind CSS Vars from the export dropdown.
Can I export design tokens?
Yes. DTCG, Style Dictionary, JSON, CSS, SCSS, Android, iOS, Flutter exports available.
What is the difference between HSL and HSV?
HSL: 50% lightness = pure color. HSV: 100% value = pure color. They map hue differently.
Why do generated palettes need manual review?
Automated palettes are mathematical. Visual perception and accessibility may need human judgment.