Color Converter
Convert colors between HEX, RGB, and HSL formats with visual picker and quick presets.
How do I use Color Converter?
Enter any color string (`HEX`, `RGB`, `HSL`, `OKLCH`, or `CMYK`) or click "Load Sample Data".
Fine-tune hue, lightness, and alpha sliders with real-time gamut and contrast feedback.
Click any formatted color code (`#RRGGBB`, `rgb()`, `hsl()`, `oklch()`) to copy it to your clipboard.
What features does Color Converter offer?
Convert between HEX, RGB, and HSL color values
HSL Color Harmonies (Complementary, Monochromatic, Analogous, Triadic, Tetradic)
Tailwind CSS 50 to 900 10-shade scale generator
WCAG 2.1 AA & AAA Contrast Ratio Calculator with live typography preview
100% private in-browser conversion
CSS Color Module Level 4 Color Space Comparison
Compares sRGB cylindrical/cubic color models against perceptually uniform OKLCH and subtractive CMYK.
| Color Space | CSS Level 4 Syntax | Color Gamut | Perceptual Uniformity & Best Use Case |
|---|---|---|---|
| HEX / sRGB | #3b82f6 / rgb(59 130 246) | Standard sRGB (16.7M colors) | Non-uniform lightness; universal legacy compatibility |
| HSL | hsl(217.2 91.2% 59.8%) | Standard sRGB cylindrical | Non-uniform (yellow at 50% L looks much brighter than blue at 50% L) |
| OKLCH | oklch(62.3% 0.188 259.8) | Wide-gamut Display-P3 & Rec.2020 | Perceptually uniform lightness (L); ideal for Tailwind v4 design systems |
| CMYK | device-cmyk(76% 47% 0% 4%) | Subtractive print ink gamut | Print prepress estimation (requires ICC profile for exact match) |
Frequently Asked Questions about Color Converter
Why does Tailwind CSS v4 use `oklch()` instead of `rgb()` or `hsl()`?
In `hsl()`, changing Hue while keeping Lightness fixed at `50%` causes drastic shifts in perceived brightness (yellow appears blindingly bright while blue looks dark). `oklch()` guarantees identical perceived lightness across all hues and unlocks Display-P3 wide-gamut colors.
How does 8-digit HEX (`#RRGGBBAA`) calculate alpha transparency?
The final two hex digits represent the alpha channel on a `0–255` integer scale (`Math.round(alpha * 255).toString(16)`). For example, `50%` opacity (`0.5 * 255 = 128`) equals `80` in hex (`#3b82f680`).
Why do RGB-to-CMYK conversions differ slightly from Adobe Photoshop?
Mathematical RGB-to-CMYK formulas assume pure ideal inks (`K = 1 - max(R,G,B)`), whereas print RIPs like Photoshop apply device-specific ICC profiles (e.g., US Web Coated SWOP v2) to account for paper dot gain and ink limits.
What happens when an OKLCH color exceeds the sRGB monitor gamut?
High-chroma OKLCH values render vividly on Display-P3 screens (modern MacBooks, iPhones) and automatically gamut-map to the closest displayable sRGB boundary on standard monitors.
Explore Related Developer Tools
Color Palette Generator
Generate HSL color harmonies (Monochromatic, Analogous, Complementary) and Tailwind CSS 10-shade scale palettes online.
CSS & Tailwind Glassmorphism Studio
Design frosted glass UI cards with real-time sliders for backdrop blur, opacity, border, and box-shadow.
WCAG Contrast Checker
Calculate relative luminance and test WCAG 2.1 AA/AAA text accessibility contrast ratio compliance online.
CSS Flexbox & Tailwind Layout Visual Builder
Interactive Flexbox & CSS Grid visual layout studio. Adjust flex-direction, justify-content, align-items, and gap sliders.
Number Base & Bitwise Converter
Convert between Binary, Octal, Decimal, Hexadecimal, and ASCII text. Compute bitwise AND, OR, XOR, NOT operations.
cURL to Code Converter
Convert cURL commands into JavaScript (Fetch, Axios), Python (requests, httpx), Go, Rust, and PHP code.