Color Converter

How to use this color converter

1. Type a color value into any of the three fields (HEX, RGB, or HSL).
2. The other two formats and the preview swatch update instantly.
3. Copy whichever format your CSS, design tool, or code needs.

Why do HEX, RGB and HSL exist for the same color?

HEX and RGB describe a color by its red, green and blue light components — HEX is just RGB written in base-16 shorthand. HSL describes the same color differently, by hue, saturation and lightness, which is often more intuitive for adjusting a color by hand.

The actual math behind WCAG contrast ratios — relative luminance

The contrast ratio this tool calculates isn't a simple comparison of two colors' raw brightness values — it's based on a specific formula defined in the WCAG standard called relative luminance, which weights each RGB channel differently to account for how human vision actually perceives brightness. Green contributes considerably more to perceived brightness than red does, and red contributes meaningfully more than blue, reflecting genuine differences in human eye sensitivity across different wavelengths of light — this is precisely why a pure green and a pure blue of identical raw RGB numeric intensity don't actually look equally bright to a human viewer. The final contrast ratio is then calculated from the relative luminance of both colors using a specific formula defined in the WCAG spec, producing a single number ranging from 1:1 (no contrast at all, identical colors) up to 21:1 (maximum possible contrast, pure black against pure white).

Why CMYK is subtractive while RGB is additive — light versus ink

RGB and CMYK aren't just different notations for the same underlying idea — they model two fundamentally different physical processes for producing color. RGB is additive: it starts from black (a screen emitting no light at all) and adds red, green, and blue light together, with more added light moving progressively toward white, exactly how a display or screen's individual light-emitting pixels actually work. CMYK is subtractive: it starts from white (a blank sheet of paper reflecting all light back to the eye) and adds cyan, magenta, yellow, and black ink, each layer of ink absorbing and subtracting specific wavelengths of light from what the paper would otherwise reflect back, with more added ink moving progressively toward black rather than toward white. This is precisely why RGB is the correct, appropriate model for anything ultimately destined for a screen, while CMYK is the correct, appropriate model specifically for anything ultimately destined for physical, ink-based print.

HSL versus HSB/HSV — two genuinely similar but distinctly different color models

HSL (hue, saturation, lightness) is frequently confused with the closely related but genuinely distinct HSB/HSV (hue, saturation, brightness/value) model, and while they share the same hue and saturation concepts, their third component behaves in a meaningfully different way between the two models. In HSL, lightness reaches pure white at 100% regardless of saturation, and pure black at 0% — the lightness axis runs symmetrically from black through the full color to white. In HSB/HSV, brightness at 100% instead shows the fully saturated color at its most vivid and intense, not white — you have to separately reduce saturation to actually approach white in that specific model instead. This distinction genuinely matters practically because a design tool using HSB/HSV sliders (common in tools like Photoshop) behaves meaningfully differently from CSS's own native hsl() function when you're trying to achieve the exact same specific visual adjustment, which is precisely why this tool specifically implements HSL, matching the model CSS itself natively and directly uses.

Why not every screen color can be accurately reproduced in CMYK print

RGB and CMYK don't cover an identical range of visible, representable colors — each color model has its own specific "gamut," the complete range of colors it's actually capable of representing, and these two particular gamuts genuinely don't fully overlap with each other. RGB screens can display certain vivid, highly saturated colors (particularly bright, vivid greens and certain saturated blues) that fall entirely outside what CMYK ink combinations can physically reproduce on paper, which is exactly why a bright, vivid color that looks perfect and vibrant on your own screen can come back from a professional print run looking noticeably duller or different than expected. This is exactly why the FAQ above specifically notes that this tool's CMYK conversion is a standard mathematical approximation rather than a print-accurate guarantee — professional print workflows use dedicated, specific ICC color profiles matched to the target printer and ink combination for genuinely reliable print-color accuracy, well beyond a general-purpose mathematical RGB-to-CMYK formula alone.

Limitations of this tool

This tool converts between HEX, RGB, HSL, and CMYK, and calculates WCAG contrast ratios, entirely within your browser — as the FAQ above notes, it doesn't currently support alpha transparency channels, and its CMYK conversion is a standard mathematical approximation rather than a specific printer or ICC-profile-calibrated result. The contrast checker evaluates only the two specific colors you provide against the standard WCAG formula — it doesn't account for font weight, letter spacing, or other genuinely real readability factors beyond raw color contrast alone, and as covered above, some vivid RGB screen colors have no exact, precise CMYK print equivalent at all.