Pick a color to convert it between HEX, RGB, HSL and HSV, copy any value, generate tints and shades, and check its WCAG contrast ratio.
Converting between HEX, RGB, HSL and HSV
Every color your screen can show is really just three numbers (how much red, green and blue light to mix) wearing different notations. HEX writes each channel as two hexadecimal digits from 00 to FF, so #002FA7 packs red, green and blue into six characters. RGB spells the same channels out as decimals from 0 to 255. HSL and HSV take a different route: they place the hue on a 0–360° color wheel, then use two percentages to say how saturated and how light or bright it is, which maps far closer to how people actually think about color. This tool reads whichever notation you paste, converts it back to raw RGB, and immediately rewrites all four so you can copy the exact string your CSS, design file or codebase expects. No manual math, no rounding mistakes.
Reading a WCAG contrast ratio
Contrast is expressed as a ratio between the relative luminance of two colors, running from 1:1 when they are identical to 21:1 for pure black on pure white. The checker follows the official WCAG formula: it linearizes each RGB channel to undo the display's gamma curve, weights them 0.2126 red, 0.7152 green and 0.0722 blue because the eye is far more sensitive to green than to blue, sums them into a luminance value for each color, then divides the lighter by the darker. The result decides whether text is comfortable to read. For AA compliance, body text needs at least 4.5:1 and large text 3:1; the stricter AAA level raises those to 7:1 and 4.5:1. The badges update live so you can nudge a color until it passes.
Tints, shades and building a palette
The ramp beneath the main swatch blends your color toward white to make lighter tints and toward black to make darker shades, producing a ten-step scale in one glance. Because every step keeps the original hue and saturation direction, the whole set reads as a single family, exactly what you want for hover and active states, hairline borders, subtle backgrounds, badges and disabled text. Click any swatch to copy its hex straight to the clipboard. A practical workflow is to pick a mid-tone as your brand color, take a dark shade for text and a pale tint for its background, then paste both into the contrast checker to confirm the pairing clears AA before it reaches production. Everything here runs offline, so you can iterate as fast as you can click.
Frequently asked questions
What is the difference between HSL and HSV?
Both describe a color by hue, but HSL's third value is lightness (0% black, 100% white, 50% the pure hue) while HSV's is value or brightness (0% black, 100% the brightest version of the hue). A color at HSL 50% lightness and HSV 100% value can be identical; the two systems just measure the vertical axis differently, which is why the panels above rarely show the same percentages.
What contrast ratio do I need to pass WCAG AA?
For normal body text you need a ratio of at least 4.5:1 against its background. Large text (18.66px bold, or 24px and up) only needs 3:1. The stricter AAA level asks for 7:1 on normal text and 4.5:1 on large text. Pure black on pure white is the maximum at 21:1.
What counts as large text for contrast?
WCAG defines large text as at least 24px (18pt) for regular weight, or 18.66px (14pt) when bold. Anything smaller is treated as normal text and must clear the higher 4.5:1 ratio for AA. Icons and user-interface components follow a separate 3:1 rule.
Can I paste an rgb() or hsl() value instead of hex?
Yes. The text field accepts a hex code with or without the # (both #abc and #aabbcc shorthand work), a full rgb() or rgba() string, and an hsl() or hsla() string. The picker and every output update the moment a valid value is recognized; anything it can't parse is flagged without clearing your last result.
Does this tool work offline and keep my colors private?
Yes. Every conversion, the tint and shade ramp, and the WCAG math run entirely in your browser with plain JavaScript. No color, image or value is ever uploaded, so the page works with no connection and nothing you enter leaves your device.