Three notations, one color
HEX and RGB are the same eight-bit numbers written in different bases. #3b82f6 is 3b, 82 and f6 in hexadecimal, which is 59, 130 and 246 in decimal, which is what rgb(59, 130, 246) says. Converting between them loses nothing and never will, because it is a change of notation rather than a change of value. Paste a hex code in and the RGB that comes back out will convert straight back to the same hex.
HSL is a genuine re-parameterisation. It splits the color into hue as an angle from 0 to 360 degrees, saturation as a percentage and lightness as a percentage, so that "the same blue but paler" is one number changing instead of three. That convenience costs a little precision: hue, saturation and lightness are rounded to whole numbers for display, so a round trip through HSL can shift a channel by one. Pure and near-pure values survive intact — #ff0000 is hsl(0, 100%, 50%) and comes back as #ff0000 — but if you need a byte-exact match, carry the hex.
HSL is not HSB, and the numbers do not transfer
Photoshop, Figma and most design tools show HSB, where B is brightness. CSS uses HSL, where L is lightness. The hue and saturation fields look identical and the third field means something different, so copying all three across gives you the wrong color. In HSB, B at 100% means fully vivid; in HSL, L at 100% is always white regardless of the other two. Pure red is HSB (0, 100, 100) and HSL (0, 100%, 50%). Move colors between a design tool and a stylesheet through hex and the ambiguity disappears.
Why the contrast number is not an average
WCAG contrast compares the relative luminance of two colors, and luminance is not the mean of the channels. Green is weighted at 0.7152, red at 0.2126 and blue at 0.0722, because that is roughly how much each contributes to perceived brightness, and each channel is gamma-decoded before the weighting is applied. The ratio is then (lighter + 0.05) / (darker + 0.05), which runs from 1:1 for two identical colors to 21:1 for black on white.
The thresholds: 4.5:1 for body text at AA, 3:1 for text at 18pt or 14pt bold, 7:1 for AAA, and 3:1 for user interface components and graphical objects. The crossover between white and black text sits at a background luminance near 0.179, which is why a color that looks mid-toned can flip its best text color with a small nudge.
What it accepts and what it ignores
Input can be #abc, #aabbcc, rgb(...), rgba(...), hsl(...) or hsla(...), with commas or spaces between the values. Alpha is parsed off and discarded: a translucent color has no single contrast ratio, because the answer depends on whatever sits behind it. If you are checking text on a 60% white overlay, composite the overlay against the real backdrop first and test the resulting solid color. Named CSS colors are not recognised — the browser's dev tools will give you the hex for those in one click.
Questions people ask
My contrast number differs by 0.01 from another checker. Which is right?
Both, almost certainly. The difference comes from rounding somewhere in the chain — usually a color that passed through HSL and had a channel shift by one, or a tool that rounds luminance before dividing rather than after. The formula is fixed by the WCAG spec and every implementation of it agrees to several decimal places on identical RGB input. If a ratio is close enough to 4.5:1 that the second decimal decides whether it passes, it is too close to ship; pick a background that clears it with room.
Can I check text on a gradient or a photo?
Not with a single number, and no tool can honestly give you one. Contrast is a property of a pair of colors, so a gradient has a different ratio at every point. The practical method is to sample the lightest and darkest points the text actually crosses and check both. If the darkest point fails, the usual fixes are a scrim behind the text, a text shadow heavy enough to count, or moving the text off the busy part of the image.
What does relative luminance of 0.179 mean?
It is the background luminance at which white text and black text have equal contrast against it. Below that, white text wins; above it, black text wins. It falls out of the ratio formula rather than being chosen: solve (1.05)/(L+0.05) = (L+0.05)/(0.05) and you get L = sqrt(1.05 x 0.05) - 0.05, which is 0.1791. Every "should this button have light or dark text" rule in a design system is this threshold under a different name.
Does the color I pick get sent anywhere?
No. Parsing, conversion and the luminance arithmetic all happen in JavaScript in the page you have open. There is no request behind the Convert button, which you can confirm in the network tab of your browser dev tools.