Color Converter
Paste any color in any notation and get all eleven formats at once — including OKLCH and Display-P3 — with gamut warnings and copy buttons on every row.
Popular conversions
Choosing a format
Use HEX for static brand values and handoff, OKLCH for anything you intend to manipulate in CSS, and Display-P3 when you want saturated accents to bloom on modern screens while keeping an sRGB fallback.
Understanding the numbers
OKLCH reads as lightness (0–1 or 0–100%), chroma (0 to roughly 0.37) and hue in degrees. LAB and LCH are CIE spaces with the same intent but poorer hue uniformity in blues. HSV and HWB are picker-friendly reparameterisations of RGB, not perceptual spaces.
Wide-gamut safety
If a color needs Display-P3 or Rec.2020, ship it inside an @supports (color: color(display-p3 1 1 1)) block or use oklch() with values that clamp gracefully. The converter always shows the clamped sRGB equivalent so you know what non-P3 users will see.
Frequently asked questions
- Which color formats can I convert between?
- HEX, RGB, HSL, HSV, HWB, LAB, LCH, OKLAB, OKLCH, CMYK and Display-P3. Type or paste any of them into the input and every other format updates instantly.
- Is OKLCH better than HSL for CSS?
- For manipulation, yes. OKLCH lightness matches perception, so lighten/darken and hue rotation behave predictably, and it can express colors outside sRGB for wide-gamut displays. HSL remains fine for static values.
- Why does my color show an out-of-gamut warning?
- Some LAB, LCH, OKLCH and Display-P3 values are more saturated than an sRGB screen can show. The badge tells you which gamut the color needs; the HEX and RGB outputs are clamped into sRGB so they stay renderable.
- How is CMYK calculated?
- With the standard device-independent formula from sRGB. Use it for rough reference only — real print output depends on an ICC profile, paper and press.