Color Converter

How it works

Every conversion routes through RGB as the common intermediate representation, the same way most color libraries handle it internally: hex parses to an 8-bit RGB triplet, HSL and HSV each convert to and from RGB using the standard cylindrical-coordinate formulas (the classic 1978 Smith HSV and 1915 Munsell-derived HSL models), CMYK subtracts each RGB channel from 1 and factors out the shared black component, and Lab/OKLCH both go through a linear-light XYZ step first — sRGB values are gamma-decoded to linear light, transformed by the CIE 1931 XYZ matrix, then mapped into Lab's opponent-color space or, for OKLCH, into the newer Björn Ottosson 2020 Oklab space designed specifically to fix Lab's known perceptual-uniformity distortions in the blue region. The gamma-decode step itself isn't a flat exponent — sRGB uses a piecewise curve (a near-linear segment for very dark values below roughly 0.04 in normalized terms, then a power curve of approximately 2.4 above that), which is a detail naive implementations sometimes approximate with a flat gamma-2.2 curve, introducing small but measurable errors specifically in shadow tones.

Worked example

Take a mid-saturation blue, #4C8DF6. Converting through the pipeline: RGB(76, 141, 246) → HSL(217°, 89%, 63%) → HSV(217°, 69%, 96%) → CMYK(69%, 43%, 0%, 4%) → Lab(60.1, 6.0, -52.8) → OKLCH(0.65, 0.16, 260°). Notice the Lab a/b values are strongly negative-blue (low a toward green, very negative b toward blue) while OKLCH expresses the same color as a single hue angle near 260° — OKLCH's polar form is usually easier to reason about for design work (rotate the hue, keep lightness/chroma fixed) than Lab's two-axis a/b split. A second example makes the achromatic case concrete: a neutral mid-gray, #767676, converts to RGB(118, 118, 118) → HSL(0°, 0%, 46%) → CMYK(0%, 0%, 0%, 54%) → Lab(50.0, 0.0, 0.0) — every chromatic channel collapses to exactly zero, which is a useful sanity check that the pipeline is implemented correctly, since any true gray should always land at a=0, b=0 in Lab and 0% saturation in HSL regardless of which format it started from.

When to use this tool

Reach for this tool when you already have a color in one format and need it in a different one for a handoff — a designer hands you a Figma hex value and your CSS-in-JS theme needs HSL for a lightness-based hover-state calculation, or a print vendor asks for CMYK values from a brand's RGB logo file. It's also useful when auditing an existing design-token file: pasting each token's hex through the converter and checking the OKLCH lightness value is a fast way to confirm a supposedly 'evenly spaced' lightness scale (like a Tailwind-style 50-950 ramp) is actually perceptually even rather than just evenly spaced in raw HSL lightness, which frequently isn't the same thing. If you specifically need the nearest CSS-named color rather than a raw conversion, use the Color Name Finder instead; if you're starting from a visual pick rather than a known value, the Color Picker is the faster path in.

Precision & accuracy

All conversions carry rounding to a sensible decimal precision per format (integers for RGB/HSL/HSV/CMYK percentages, one decimal place for Lab and OKLCH components) — enough precision that a round-trip conversion (hex → HSL → hex) returns the exact original hex in the overwhelming majority of cases, with the rare off-by-one at extreme edge values being a known, documented rounding artifact of converting between integer and floating-point color spaces, not a bug in the underlying math, which is covered by the round-trip unit tests referenced above. Where precision matters most in practice is CMYK: because the naive RGB-to-CMYK formula has no single canonical rounding convention (some implementations round each channel independently, others round K first and derive C/M/Y from the rounded value), two different tools can report CMYK values that differ by a percentage point or two for the identical input RGB — neither is 'wrong,' they're just applying the rounding order differently, which is worth knowing before treating a one-point CMYK discrepancy between tools as an error.

FAQ