Color Picker & Palette

How to pick and convert a color

1. Click the color swatch to open your browser's native picker, or type a HEX code directly into the text field. Both stay in sync, and three-digit shorthand like #f60 is accepted.
2. Read the four readouts: HEX, RGB, HSL, and the best text color for that background with its contrast ratio.
3. Scan the ten-swatch scale below, running from near-black shades to near-white tints of your hue. Click any swatch to copy its HEX code, and hover to see the value first.

A worked example

The page loads with #2547F4, a strong blue. The readouts show RGB 37, 71, 244 and HSL 230°, 90%, 55%, and the text-color stat reads "White (6.4:1)", meaning white text on this blue hits a 6.4 to 1 contrast ratio, comfortably past the 4.5 to 1 that WCAG requires for normal text. Suppose you want a hover state slightly darker than your button color: click the swatch on the scale one step darker than the middle and its HEX is on your clipboard. Because every swatch keeps the same hue of 230 and saturation of 90, the darker variant still reads as the same brand blue rather than drifting muddy, which is what happens when you darken by just mixing in black.

What the numbers mean and how they are computed

HEX, RGB, and HSL are three notations for one color, converted here with the standard formulas, no rounding surprises beyond whole numbers. The interesting computation is the text-color recommendation: the tool calculates the color's relative luminance per the WCAG definition, with each channel gamma-linearized and weighted by how sensitive the eye is to it (green counts about ten times blue), then computes the contrast ratio against both white and black and recommends the winner with its ratio. The shade and tint scale is built in HSL space: hue and saturation frozen, lightness stepped from roughly 9 percent to 92 percent in ten increments. That is the same construction UI frameworks use for their color scales, which is why the output drops neatly into a design token file.

Honest limitations

The recommended text color is the better of exactly two candidates, black or white; it will not suggest a tinted dark blue for your cream background, and a mid-lightness color can win with a ratio that still fails WCAG for normal text, so read the number, not just the color name. Check ratios yourself for any pair that is not simply your color plus black or white. There is no alpha channel, no CMYK for print work, and no saved palettes; the tool forgets your color on refresh. The ten-step scale uses fixed lightness stops, so very light or very dark base colors will have their nearest steps look almost identical to the base. And the eyedropper depends on your browser's native picker, which on some platforms can sample from anywhere on screen and on others cannot; that behavior belongs to the browser, not this page.