Color Code Converter

Convert between HEX, RGB, HSL, HSV, CMYK, HWB, and Oklch. Generate color palettes, check WCAG contrast, and simulate color blindness — all free, all local.

Color Picker
100%
—
Recent Colors
Color Values
—Hue
—Saturation
—Lightness
—Rel. Luminance
—vs White
—vs Black
🌈 Color Harmonies Based on current converter color
▣ Shades & Tints Tailwind-style scale
↗ Export Palette
Colors to Compare
Contrast Results
— Contrast Ratio
FG: L = — BG: L = —

The quick brown fox

The quick brown fox

AA Normal ≥4.5:1
AA Large ≥3:1
AAA Normal ≥7:1
AAA Large ≥4.5:1
👁 Color Blindness Simulation
Normal Standard vision
Aa
Protanopia Red-blind (~1% men)
Aa
Deuteranopia Green-blind (~5% men)
Aa
Tritanopia Blue-blind (rare)
Aa
100% Private. All conversions and simulations happen locally in your browser. No data is sent anywhere.

How to Use

1

Enter a Color

Type any color format (HEX, RGB, HSL, HSV, CMYK, HWB, Oklch, or a CSS name like "coral") into the input — or use the native color picker. All formats update instantly.

2

Explore the Palette

Switch to Palette & Harmonies to generate complementary, triadic, or analogous colors. Browse 11-step shades/tints and export as CSS variables, Tailwind config, or JSON.

3

Check Accessibility

Use the Contrast & A11y tab to verify WCAG AA/AAA compliance. Get automatic fix suggestions and preview how your color pair appears to users with color blindness.

Frequently Asked Questions

What color formats does this tool support?

This converter supports HEX (3, 4, 6, and 8-digit with alpha), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, HWB (CSS Level 4), Oklch (CSS Level 4), and all 140+ CSS named colors like "coral", "steelblue", or "rebeccapurple". Enter any format and all others update instantly.

What is Oklch and why should I use it?

Oklch is a perceptually uniform color space introduced in CSS Color Level 4. Unlike HSL, equal steps in Oklch lightness appear equal to the human eye, making it ideal for generating accessible color scales. The "L" is lightness (0–100%), "C" is chroma (color intensity), and "H" is hue angle (0–360°).

What is WCAG contrast compliance?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors. AA requires at least 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+). AAA requires 7:1 for normal and 4.5:1 for large text. Meeting these ensures readability for users with visual impairments.

How does the color blindness simulation work?

The simulation uses the Machado 2009 mathematical model (peer-reviewed research), which applies transformation matrices to linearized RGB values. It simulates protanopia (red-blind, ~1% of men), deuteranopia (green-blind, ~5% of men), and tritanopia (blue-blind, rare). All processing is local — no image or color data is uploaded anywhere.

How are color harmonies calculated?

Harmonies are generated by rotating the hue angle in HSL space while keeping the same saturation and lightness. Complementary = +180°, Triadic = +120°/+240°, Analogous = ±30°, Split-Complementary = +150°/+210°, Tetradic = +60°/+180°/+240°, Square = +90°/+180°/+270°. Monochromatic varies lightness at fixed hue and saturation.

Is my data safe with this tool?

Yes. This tool runs entirely in your browser. No color values, images, or any data are sent to any server. You can disconnect from the internet after loading the page and everything will continue to work. Recent color history is stored only in your browser's localStorage.