Skip to content

Color tools

Build palettes, check contrast and convert between color formats, right in the browser.

Open the tools 15 tools, all in your browser

Color work splits into a few small jobs: find colors that go together, make sure text is readable on its background, and convert a color from one notation to another. The tools here do each of those without a design app open.

They run locally and update as you drag, so you see the result immediately. Nothing is uploaded, including any image you pull colors from.

Which tool for which job

Palette generator
Build a set of colors that work together, or pull the dominant ones out of a photo or logo.
Contrast checker
Check a text and background pair against WCAG levels before you ship, so it stays readable.
Color converter
Move a color between HEX, RGB, HSL and OKLCH when your code wants one and your tool gave you another.
Gradient generator
Build a CSS gradient visually and copy the code, instead of guessing at the stops.
Blend
Mix two colors to find a midpoint for a border, a hover state, or a step in a scale.

Questions about the color tools

What contrast standard do you check against?
The contrast checker reports the WCAG 2 contrast ratio and whether a pair passes AA and AAA for normal and large text, which is the standard most accessibility rules point to.
Which color formats are supported?
HEX, RGB, HSL and OKLCH, which covers CSS from older projects through to modern wide-gamut work.
If I pull colors from an image, is it uploaded?
No. The image is read in your browser to sample its colors and is never sent anywhere.
Are the tools free?
Yes, free with no account, supported by light advertising.

Color tools live on /color

Free, no account, nothing uploaded.

Open the tools