Color Picker

How the seven tints and shades are calculated

The strip is a linear mix in RGB space. The three swatches on the left blend the colour toward white by 60%, 40% and 20%; the middle one is the colour itself; the three on the right blend toward black by 20%, 40% and 60%. For each channel the new value is round(c + (target − c) × amount), where target is 255 for a tint and 0 for a shade.

Take the default purple, rgb(109, 77, 240), at the 20% tint: red is 109 + (255 − 109) × 0.2 = 138.2, rounded to 138; green is 77 + 178 × 0.2 = 112.6, rounded to 113; blue is 240 + 15 × 0.2 = 243. That swatch is #8a71f3. For the 20% shade each channel is multiplied by 0.8: 87.2, 61.6 and 192, giving #573ec0.

Mixing in RGB versus adjusting lightness

Because the scale mixes channels rather than changing HSL lightness, tints lose some saturation as they approach white and the hue can drift by a degree or two. Palettes such as Tailwind's 50 to 950 steps are hand-tuned rather than mixed, so the strip will not reproduce them exactly, but it gives a consistent set for hover, border and background variants. Hover a swatch to see its hex in a tooltip, and click it to make it the new centre; clicking the 20% shade and then its own 20% shade is not the same as the original 40% shade, because 80% of 80% is 64% of the starting value, not 60%, and each step also rounds to whole numbers.

What the text field understands

• Hex with three or six digits, with or without the hash, in either case.
• rgb() or rgba() with numbers from 0 to 255 or percentages, separated by commas or spaces; a fourth alpha value is accepted but discarded.
• hsl() or hsla() with the hue in degrees (deg, rad, grad and turn units also work) and saturation and lightness as percentages, in comma or space syntax. The default purple typed as hsl(252, 84%, 62%) lands on #6d4def, one step away because the HSL figures are rounded.
• Named colours and 8-digit hex are not recognised.
• While the text is incomplete or invalid, a red line under the field says it cannot be read, and the square and the codes keep the previous colour until it can. Picking from the square or the strip replaces whatever you typed with the lowercase hex of the new colour.

The native picker and the eyedropper

The square is a standard HTML colour input, so the dialog that opens is drawn by your browser or operating system rather than by this page. On macOS it is the system Colors panel, which includes a magnifier for sampling any pixel on screen. Desktop Chrome and Edge show their own popup with a spectrum, a hue slider, editable hex, RGB and HSL fields and an eyedropper. Firefox on Windows opens the classic Windows colour dialog, and phones show a sheet or a simple spectrum. Whatever you choose there is passed back as a six-digit hex code, which is why the field always shows hex after a pick.

From a picked colour to a small CSS palette

A practical pattern is to pick the brand colour, copy its hex into a custom property, then take the 20% shade for hover and the 60% tint for a soft background. With the default purple that gives --brand: #6d4df0, --brand-hover: #573ec0 and --brand-soft: #c5b8f9. The tool does not measure contrast, so check text on the soft tint against WCAG before shipping: light tints usually need dark text, and the 40% and 60% shades carry white text comfortably.

Not included

There is no transparency slider, no contrast ratio, no saved palettes and no way to sample an uploaded image inside the page itself; screen sampling depends on the eyedropper your browser offers. Output formats are limited to the three shown, so CMYK or LAB values need another converter.