Color Format Converter — HEX, RGB, HSL, OKLCH, CMYK, Tailwind & More

This tool auto-detects and parses all of the following input formats: HEX — 3-digit (#RGB), 6-digit (#RRGGBB), or 8-digit with alpha (#RRGGBBAA), with or without the # prefix. RGB / RGBA — rgb(255, 87, 51), rgba(255,87,51,0.5), or space-separated modern CSS syntax rgb(255 87 51). HSL / HSLA — hsl(14, 100%, 60%), hsla(14,100%,60%,0.8), or modern hsl(14 100% 60%). OKLCH — oklch(0.63 0.26 29) or oklch(63% 0.26 29). OKLab — oklab(0.63 0.19 0.16). HWB — hwb(14 0% 0%). CSS named colors — all 140 CSS4 named colors by name (e.g., tomato, royalblue, cornflowerblue). Tailwind CSS classes — any Tailwind 3.x color token in the format color-shade (e.g., blue-500, emerald-400, rose-600). The tool normalizes all formats through RGB as an intermediate step, then converts to all output formats.

The Tailwind color matching uses Delta-E (ΔE) perceptual distance to find the closest color in the Tailwind 3.x color palette. Delta-E is calculated in a perceptually uniform color space (using Euclidean distance in linear RGB as an approximation), which means the "closest" result is the one that looks most similar to a human eye — not just the numerically nearest RGB value. The result shows: the matched Tailwind token name (e.g., blue-600), the actual hex value of that Tailwind color, the ΔE distance (lower = closer match — under 5 means very close, over 15 means the match is approximate), and ready-to-copy utility classes in four variants: bg-blue-600, text-blue-600, border-blue-600, and ring-blue-600. This is useful for designers who want to find the nearest standard Tailwind color for a custom brand color, and for developers who want to use Tailwind classes rather than arbitrary values.

HSL (Hue, Saturation, Lightness) is a cylindrical representation of colors based on the RGB color model. It's intuitive and widely used in CSS, but has a perceptual uniformity problem: the same L (lightness) value looks very different across different hues. For example, hsl(60,100%,50%) (yellow) looks much brighter than hsl(240,100%,50%) (blue) even though both have L=50%. OKLCH (OK Lightness, Chroma, Hue) is a perceptually uniform color space. "Perceptually uniform" means equal numerical steps correspond to equal perceived visual differences regardless of hue. In OKLCH, if you change only the L value, the color genuinely looks brighter or darker by a consistent amount across all hues. This makes OKLCH better for: generating tint/shade scales (consistent perceived brightness at each step), creating color gradients without muddy midpoints, and building accessible color systems where lightness has predictable contrast behavior. OKLCH is now natively supported in all modern browsers as part of CSS Color Level 4.

HWB stands for Hue, Whiteness, Blackness — a color model designed to be more intuitive than HSL or HSV. It was proposed by Alvy Ray Smith (co-founder of Pixar) as a way to describe colors the way a painter would: start with a pure hue, then add white (to lighten) or black (to darken). In HWB: H (Hue) is the same 0–360° scale as HSL. W (Whiteness) is how much white is mixed in (0%–100%). B (Blackness) is how much black is mixed in (0%–100%). When W+B = 100%, you get a pure grey. When W=0 and B=0%, you get the pure hue. For example, hwb(0 0% 0%) is pure red, hwb(0 50% 0%) is a light pink (white mixed in), and hwb(0 0% 50%) is a dark red. HWB is now part of the CSS Color Level 4 specification and is supported in modern browsers: color: hwb(14 0% 0%);. It's particularly useful for UI design because "lighter/darker" adjustments are more predictable than HSL.

The bulk converter accepts a list of colors — one per line — in any mix of supported input formats. You can freely mix HEX, rgb(), hsl(), oklch(), CSS named colors, and Tailwind class names in the same list. For each line: (1) The tool attempts to parse the line using auto-detection across all supported formats. (2) If parsing succeeds, the color is normalized to RGB internally. (3) The normalized color is then converted to your chosen output format (HEX, RGB, HSL, OKLCH, etc.). (4) The result is shown in a table row with the original input, output value, and a color swatch. (5) Lines that cannot be parsed show an error. You can copy individual results by clicking their copy button, or copy all successful results at once as a newline-separated list using the "Copy results" button. The bulk converter is particularly useful for converting design token files (CSS variable sheets, JSON palette files) between color formats.

CMYK conversion from RGB/HEX is inherently an approximation for several reasons. First, CMYK is a subtractive color model for physical ink on paper, while RGB is an additive model for light on screens. These two models have different color gamuts — some RGB colors (particularly bright neons and saturated blues/greens) simply cannot be reproduced in CMYK and get clipped. Second, professional CMYK conversion uses ICC color profiles that account for the specific paper stock, ink type, and printing press characteristics — this varies by printer and project. Third, different tools use different simplified formulas for "screen CMYK" (which is what web tools produce) — some include undercolor removal (UCR), gray component replacement (GCR), or total ink limit calculations. The CMYK values in this tool use the standard simplified formula and are suitable for: design mockups, rough print estimates, and documentation. For production print work, always do a proper ICC profile conversion in Adobe Illustrator, InDesign, or a professional RIP system, and request a physical proof from your printer.