TOOLFree color tools for designers & developers
This collection covers the everyday colour jobs — making sure text is readable, building a scheme, generating gradients and shades, and designing for colour blindness. Every tool runs entirely in your browser, so it's fast, free and private.
Start by checking a pairing with the contrast checker, build a scheme with the palette generator, and generate variations with the shades & tints generator. To convert a colour between HEX, RGB and HSL, use the color converter in Dev Tools.
Design with colour that works for everyone
Good colour choices aren't only about looks — they're about readability and accessibility. Text that's too low-contrast is hard to read for everyone and fails WCAG guidelines, and roughly one in twelve men has some form of colour-vision deficiency, so a palette that relies on red-versus-green alone can fall apart. These tools help you check those things before they become a problem, not after.
Which colour tool do you need?
- Contrast checker — confirm text is legible and meets WCAG AA/AAA.
- Palette generator — build a harmonious colour scheme from a base.
- Gradient generator — create CSS gradients you can copy.
- Shades & tints — generate lighter and darker steps of a colour.
- Colour-blindness simulator — preview a design as different viewers see it.
- Colour mixer — blend two colours to find the midpoint.
To convert a single colour between HEX, RGB and HSL, use the color converter, or learn the basics in hex to RGB.