Color Picker & Converter Pro

Why use this tool?

• Design files, CSS and print briefs each ask for a different colour notation, and converting by hand is error-prone.
• Text that is hard to read against its background is the most common accessibility fault on a web page, and a contrast ratio shows it objectively.
• A single brand colour has to become a set of lighter and darker variants for hover states, borders and backgrounds.
• A palette that relies on red and green alone can look identical to some viewers, so a preview of how it shifts is worth seeing before you commit.

How to use Color Picker

1. Type any colour into Any CSS colour: a hex code, rgb(), hsl() or a name such as tomato. You can also use the Picker swatch, or Pick from screen where your browser offers it.
2. Check the Values tab for HEX, RGB, HSL, the space-separated CSS4 form of HSL, CMYK and luminance. Use the copy button on any row.
3. On the left, click any swatch in the tints and shades strip to copy its hex code, or choose a Harmony and click a colour in the result.
4. Open the Contrast tab, type a second colour in Compare against, and read the ratio and the pass or fail grade.
5. Open Colour vision to compare the colour with its simulated appearance in protanopia, deuteranopia and tritanopia.
6. Open Export for a CSS custom-properties block, a Tailwind colour object, JSON tokens or a comma-separated scheme.

Features

• Accepts HEX in 3, 4, 6 or 8 digits, rgb() and rgba(), hsl() and hsla(), and a list of common CSS colour names
• Converts to HEX, RGB, HSL, CMYK and relative luminance
• Five tints and five shades from the base colour, copyable in a click
• Complementary, analogous, triadic, tetradic and split-complement harmonies
• Contrast ratio on white, on black and against any colour you enter, with AA and AAA grading
• Colour-blindness simulation for three types
• Export as CSS variables, Tailwind config or JSON

Supported formats

Reads HEX (with or without #), rgb(), rgba(), hsl(), hsla and common colour names. Outputs HEX, RGB, HSL, CMYK and, in the Export tab, CSS, Tailwind and JSON text.

Tips

• Body text needs a ratio of at least 4.5:1 to pass WCAG AA; large text and interface borders need 3:1. The Contrast tab applies those thresholds.
• The picker ignores any alpha value. An eight-digit hex or an rgba colour is read as its opaque colour.
• The CMYK figures are a simple mathematical conversion from RGB with no colour profile, so treat them as a starting point for print rather than a proof.
• Do not use a hue as the only signal if the Colour vision tab says it shifts noticeably; add an icon or a label.

Frequently asked questions