Color Converter

Enter a color in any format — HEX, RGB, HSL, HSV, CMYK, OKLCH, or a named CSS color — and get every format back instantly, with a WCAG contrast check and a tint/shade ramp.

#3B82F6
100%

Tint / Shade Ramp

HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HSVhsv(217, 76%, 96%)
CMYKcmyk(76%, 47%, 0%, 4%)
OKLCHoklch(62.3% 0.188 259.8)

WCAG Contrast

vs. white3.68:1
AA Large
vs. black5.71:1
AA
Need this color in a Tailwind utility string or a CSS gradient? Try the Tailwind Class Generator or the CSS Gradient Generator.

Your Data Never Leaves Your Device

Every tool runs entirely in your browser. Nothing you type is uploaded, stored, or logged on our servers.

100% Client-Side

The Color Converter auto-detects whatever format you paste in — HEX, rgb(), hsl(), oklch(), or a named CSS color like rebeccapurple — and instantly converts it to HEX, RGB, HSL, HSV, CMYK, and OKLCH, each with its own copy button.

Adjust the alpha channel, check the color's WCAG contrast ratio against white and black, and generate a tint/shade ramp for building out a color scale — all computed locally in your browser, with nothing uploaded.

FAQ

Both describe a color as hue, plus two other channels. HSL uses saturation and lightness, where lightness runs from black through the pure color to white. HSV (also called HSB) uses saturation and value/brightness, where value alone controls how dark a color is — HSV tends to match how color pickers and painting tools present color selection more intuitively.

OKLCH is a perceptually uniform color space — equal numeric steps in lightness or chroma look like equal visual steps, which HSL and RGB don't guarantee. It's supported in all modern browsers and is increasingly used for building consistent color scales and accessible gradients. It's a good fit for new design systems; just check your browser support target before relying on it in production CSS.

This tool converts RGB to CMYK using a simple, device-independent formula. Real print output depends on the specific printer, ink set, and paper's ICC color profile, which can shift how CMYK values actually render. Treat the CMYK values here as a starting estimate, not a print-accurate proof.

Enter your color and this tool computes its contrast ratio against both white and black backgrounds, along with a pass/fail rating: AAA (7:1+), AA (4.5:1+), AA Large (3:1+ for large text), or Fail. Use it to pick text or background colors that stay readable.

Yes. Type any valid CSS color name and it resolves to its RGB equivalent, alongside HEX, HSL, HSV, CMYK, and OKLCH.