Color Converter & Picker

One color, five ways to write it

A color on a screen is just three numbers — how much red, green and blue light to emit. HEX and RGB are two spellings of exactly those three numbers; HSL and HSV re-describe the same color in terms a human finds easier — a hue angle plus how vivid and how light it is. This tool keeps every representation in lock-step: move any slider and all six strings above update at once, so you can grab whichever format your CSS, design tool or code needs.

HEX → RGB → HSL, worked out

Take the default color #4f52f0. Split the six hex digits into three pairs — 4f, 52, f0 — and read each as base-16: 4f = (4 × 16) + 15 = 79, 52 = 82, f0 = 240. That is rgb(79, 82, 240): mostly blue, with red and green nearly tied and low.

To reach HSL, scale each channel to 0–1 (0.310, 0.322, 0.941), then find the max (blue, 0.941) and min (red, 0.310). Lightness is their midpoint, (0.941 + 0.310) / 2 = 0.63 → 63%. The spread between them, 0.631, drives saturation: 0.631 / (1 − |2×0.63 − 1|) ≈ 84%. Because blue is the largest channel, hue lands near 60° × (4 + (r − g)/spread) ≈ 239°, in the blue-violet part of the wheel. So #4f52f0 = rgb(79, 82, 240) = hsl(239, 84%, 63%). HSV keeps the same 239° hue but reports value = max channel = 94% and saturation = spread/max = 67%, which is why the two "S" numbers differ between HSL and HSV.

Learn more: for the full first-principles walk-through — additive light, why HEX is just base-16 RGB, the #RGB shorthand rule, the alpha channel and how sRGB limits what these numbers can name — read Color Models Explained.

Reading the contrast check

The two rows under the swatch answer a practical question: if I set text in this color, will people read it? For #4f52f0 the tool reports 5.53:1 against white and 3.80:1 against black. Checked against the thresholds:

So this blue as text on white clears AA for body copy (5.53 ≥ 4.5) but misses AAA (7). As text on black it only reaches 3.80 — fine for a large heading (≥ 3:1) but too weak for body text, which is exactly why the "vs Black" row shows no AA badge. A vivid mid-tone passing one background and failing the other is normal; it tells you which pairing to use. The ratio comes from the WCAG relative-luminance formula (gamma-expand each channel, weight them 0.2126/0.7152/0.0722), not a rough guess.

Which space to reach for

The modern CSS Color 4 spaces

HEX, RGB, HSL and HSV all live in sRGB and share its biggest flaw: equal numeric steps don't look equally spaced, and a fixed hue number drifts in apparent lightness as you change it. The CSS Color 4 spaces fix that by being perceptually organised, and every modern browser now understands them (OKLCH landed in Chrome 111, Safari 15.4 and Firefox 113). This tool shows five of them for your color:

• OKLCH — Lightness (0–1), Chroma (colorfulness, ~0–0.4) and Hue (0–360°). Björn Ottosson's 2020 OKLab space in polar form. Its headline property: hold L and C fixed, sweep the hue, and the swatches stay the same perceived brightness — so you can build a whole palette that reads as one family. The default blue is oklch(0.5386 0.2307 274.63).
• OKLab — the same space in Cartesian form: L plus a (green↔red) and b (blue↔yellow). This is what you want for mixing or interpolating two colors, because a straight line between them looks like a natural gradient with no muddy grey in the middle.
• Lab / LCH — the classic 1976 CIE L*a*b* and its polar LCH form. L runs 0–100; here it's computed with the D65 white point (Lab of pure white is exactly lab(100 0 0)). Long the standard in print and color science.
• HWB — Hue, Whiteness and Blackness. A friendly way to say "this hue with 31% white and 6% black mixed in", which is close to how people describe tints and shades out loud.

All five are computed with the documented forward pipeline — gamma-expand sRGB to linear light, multiply by the sRGB→XYZ (D65) matrix, then apply the OKLab (Ottosson M1/M2) or CIELAB transform. Because a HEX or RGB input is already inside the sRGB gamut, the numbers you see are the exact transform of your color, with no gamut mapping.

Tints, shades and building a palette

The strip of swatches is your base color mixed step by step toward white (tints, on the left) and toward black (shades, on the right). It is the fastest way to derive a matching hover color, a subtle border or a dark background from one brand color. Click any swatch to copy its HEX.

Common mistakes

Confusing HSL lightness with HSV value. They are not the same axis: at 100% HSL lightness you always get white, but at 100% HSV value you get the most vivid color — so hsl(239, 84%, 63%) and any hsv(239, …, 63%) are different colors. Dropping the # or mixing 3- and 6-digit HEX. #f0f is shorthand for #ff00ff, not #0f0f0f. Assuming a bright color is readable. A pure yellow scores near 1.1:1 on white and fails every text threshold despite looking loud. Judging contrast by the two swatches alone when your real background isn't pure white or black — test against the actual color you'll ship. Rounding HSL and expecting the HEX back exactly: hue/sat/light are rounded to whole numbers here, so a round-trip can shift a channel by one.

Honest limits

The tint/shade steps mix in straight sRGB space, which is quick and predictable but not perceptually uniform — equal numeric steps don't look equally spaced, so for a production design system you may want to fine-tune the lightest and darkest steps by eye or in a perceptual space like OKLCH. All values are 8-bit sRGB (0–255 per channel), so wide-gamut Display-P3 colors can't be represented and HSL/HSV numbers are rounded to whole units. The contrast check covers foreground-vs-background luminance only; it does not judge color-blind distinguishability between two hues of similar lightness. Everything is computed locally — nothing you pick is uploaded.