Design Studio · 37 tools

Color Tools

37 free colour tools: picker, HEX/RGB/HSL/OKLCH converter, WCAG contrast checker, palettes, shades and colour-blindness simulator.

Start here

All color tools

About Color Tools

This category has 37 tools for choosing, converting and checking colours. The Color Picker shows HEX, RGB, HSL, HSV and CMYK values together, the Color Converter moves between HEX, RGB, HSL, HSV, CMYK, LAB and CSS names, and the Color Contrast Checker tells you whether text passes WCAG AA or AAA. Palette tools build harmonies, shades, tints and Material-style scales, and Nearest Tailwind Color finds the closest Tailwind shade for any hex value.

The maths follows CSS Color 4, so modern formats such as OKLCH, LAB and display-p3 are read correctly, and out-of-gamut colours are mapped into sRGB the way browsers do it. Colour difference uses CIEDE2000, and the Color Blindness Simulator applies published simulation matrices for the main types of colour vision deficiency. Results are copied as ready-to-paste CSS values.

Frequently asked questions

What contrast ratio do I need for body text?
WCAG 2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text. Level AAA asks for 7:1 and 4.5:1.
Why does CMYK not match my printer?
Converting screen colours to CMYK without your printer's ICC profile is only approximate. Real print colours depend on the press and paper, so ask your printer for a proof.
Can I pick a colour from an image?
Yes. The image colour tools let you click a pixel or extract the dominant colours from a photo, all on your device.

Other studios

Start typing to search every tool.

↑ ↓ to moveEnter to openEsc to close