CSS Color Converter

Convert between Hex, RGB, HSL, HSV, CMYK, and CIE Lab. Live preview + copy-ready outputs.

How to Use

  1. Paste a color in any supported format (Hex, rgb(), hsl(), etc.).
  2. Or use the picker to choose a color visually.
  3. Copy outputs in the format you need (CSS-ready strings included).
  4. Use “Share Link” only when you want a URL that restores this state.
Live Preview
Swatch updates from your input. Copy formats on the right.
Hex
—
RGB
—
HSL
—
Aa Preview Text
Tip: Outputs are normalized and clamped to valid ranges.
Input & Outputs
Paste any supported color format. Outputs update instantly.
Accepted: Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv()/hsva(), cmyk(), lab().
Use for quick selection; other formats will sync.
If input includes alpha, it’s preserved. You can override here.
HEX
—
RGB
—
HSL
—
HSV
—
CMYK
—
LAB (D65)
—
Paste any format above—outputs update instantly. Share link is generated only from the button in the rail.
Show Work (details & intermediate values)
—
Work shows normalized math steps (sRGB ↔ linear ↔ XYZ ↔ Lab) when relevant.

Reference

Quick format notes used by the converter.

  • Hex: #RRGGBB and #RRGGBBAA supported (alpha optional).
  • RGB: accepts legacy rgb(255, 128, 0) and modern rgb(255 128 0 / 0.8).
  • HSL/HSV: hue in degrees; saturation/lightness/value in percent.
  • CMYK: percent-based output (0–100%).
  • Lab: D65 reference white; output as lab(L a b) numbers.

FAQ

Why do Hex and RGB sometimes not round-trip perfectly?

Conversions involving HSL/HSV/Lab can introduce rounding. This tool clamps values safely and rounds outputs for practical CSS use.

Is Lab “perceptually uniform”?

Lab is closer to perceptual uniformity than RGB/HSL, but it’s not perfect. It’s useful for comparing perceived differences.

Does this support Display-P3 or wide-gamut?

This tool targets sRGB for consistent web results. Wide-gamut handling can be added later if you want.

Will the URL change while I type?

No. URLs are generated only when you press “Share Link”.

Tool Info

Last updated:

Updates may include additional parsing tolerance, improved rounding, and export options.