Color calculators
8 free tools
Color utilities for designers and developers — convert between HEX, RGB, and HSL, and make sure your text is readable with a WCAG contrast check.
Check text and background contrast against WCAG AA and AAA levels.
Blend two HEX colors and slide the ratio to find the exact midpoint — or anything between — with a live swatch and copyable hex.
Start from one HEX color and get a strip of lighter tints and darker shades, each with a copyable hex code for your palette.
Enter a HEX color and see its complement — the hue directly opposite on the color wheel — with both swatches and their codes.
Choose two colors and a direction, preview the linear gradient live, and copy the exact CSS to paste into your stylesheet.
Turn a HEX color into HSL — or type HSL and get the HEX — with a live swatch you can see as you go.
Convert colors between HEX, RGB, and HSL with a live preview.
Enter an RGB color and get the CMYK percentages a printer expects, with a swatch so you can check the color at a glance.
Frequently asked questions
What color formats can I convert between?
HEX, RGB, and HSL. Enter a color in any of them — or pick one visually — and the others update instantly, with a live swatch so you can see exactly what you're working with.
What is a good contrast ratio for text?
WCAG asks for at least 4.5:1 for normal text and 3:1 for large text to meet AA, and 7:1 for the stricter AAA level. The contrast checker shows your ratio and whether it passes each one.
Do these tools work offline in my browser?
Yes. All the color math runs locally, so nothing is sent anywhere and everything responds the instant you change a value.