HEX, RGB, HSL and OKLCH — converted as you type

Because HSL is a rearrangement of the RGB cube, not a model of vision. Its lightness is simply the midpoint between the largest and smallest of the three channels, so hsl(60 100% 50%) — pure yellow — and hsl(240 100% 50%) — pure blue — both claim 50% lightness. Put them side by side and the yellow is dazzling while the blue is nearly as dark as the text you are reading. The eye is far more sensitive to green than to blue, and HSL knows nothing about that. This is why a palette built by holding HSL lightness fixed and spinning the hue produces a set of colours that will not sit together, and why the same trick in OKLCH does.

OKLCH is the polar form of OKLab, a colour space fitted to how people actually judge differences between colours. Its L really is perceived lightness: two colours with the same L look equally light regardless of hue, so oklch(0.7 0.2 30) and oklch(0.7 0.2 250) are a red and a blue of genuinely matching weight. C is chroma, roughly how far the colour is from grey, and H is hue in degrees. The practical payoff is that lightness scales, hover states and accessible pairs can be derived arithmetically instead of eyeballed. It is worth switching when your tooling supports it — Tailwind CSS v4 emits its default palette in oklch(), which is a large part of why the format is spreading. This site is built on Tailwind v4, so the values you copy here are the same notation its own theme uses.

Three bytes, written in base 16. #3B82F6 is 0x3B red, 0x82 green, 0xF6 blue — 59, 130 and 246 in ordinary decimal, which is exactly what rgb(59 130 246) says in words. Two hex digits cover 0–255, one byte, so a six-digit code is three bytes and nothing more. The short form #FFF is not a different system either: each digit is doubled, so #FFF is #FFFFFF and #ABC is #AABBCC. That doubling is also why the short form cannot express most colours — it only reaches 4,096 of the 16,777,216 a full code can. A code with eight digits carries a fourth byte for transparency; this page drops it, because how see-through a colour is only means something once you know what sits behind it.

OKLCH can name colours that no ordinary monitor can produce. Chroma has no upper limit in the notation, but a screen only has three primaries to mix, and the most saturated green sRGB can reach is fixed by its green primary. Ask for oklch(0.8 0.3 140) and you have described a green more saturated than that primary allows — real to your eye, unreachable on the display. When that happens this page says so rather than quietly clamping, and it shows you the nearest colour sRGB can reach: same lightness, same hue, chroma pulled back until it fits. Clamping each channel instead, which is what most converters do silently, shifts the hue as well, so you get a different colour presented as though it were yours. On a wide-gamut display the browser may be able to show more, but a hex code cannot describe it — hex is sRGB by definition.

The contrast ratio compares the relative luminance of two colours, on a scale from 1:1 (identical) to 21:1 (black on white). WCAG 2 sets 4.5:1 as the AA threshold for normal text: it is roughly the contrast a person with 20/40 vision needs to read as comfortably as someone with normal sight reads text at 3:1. AAA raises that to 7:1. Large text gets easier thresholds — 3:1 for AA and 4.5:1 for AAA — because thicker letterforms survive lower contrast. "Large" means 18 point or larger, or 14 point or larger if bold, which in CSS is roughly 24px, or 18.66px bold. Note that the ratio ignores hue completely: it is computed from luminance alone, so a red and a green that look violently different to the eye can sit at nearly 1:1 and be genuinely unreadable together.

Because whole-number HSL is a coarser grid than 24-bit RGB. There are 16,777,216 sRGB colours but only 360 × 101 × 101 whole-number HSL triples, and they are not distributed evenly, so several hex codes share one rounded HSL value. Converting hex to HSL and straight back can therefore land up to a few steps away on a channel. This page prints HSL rounded to whole degrees and whole percentages because that is what every design tool shows and what people expect to copy. The OKLCH values are different: they carry five decimal places precisely so that pasting one back into the box returns the hex it came from, which was checked against all 16,777,216 sRGB colours rather than assumed.

Hex with or without the # and in 3, 4, 6 or 8 digits. rgb() and rgba() in both the modern space-separated form and the legacy comma form, with channels as numbers or percentages. hsl() and hsla() the same way, with the hue in deg, turn, rad or grad. oklch(), with lightness as 0–1 or as a percentage and hue in any angle unit. Any of the 148 CSS colour keywords, including both spellings of grey and rebeccapurple. And three bare numbers, comma or space separated, which is what lands on your clipboard when you copy out of a picker. Where a value is out of range it is clamped and the page says which one it clamped and why.

No. The conversion, the tint scale, the nearest colour name and the contrast maths all run in this tab as ordinary JavaScript, and nothing you type is written to storage — reload the page and it is gone. The page does carry Google AdSense, which loads from Google and sets its own cookies like any ad-supported site; that is a request the browser makes for the advertising, and it never receives the colours you typed. The /privacy page describes exactly what does and does not happen.