All 141 tools / Colour and contrast
Build complementary, analogous, triadic, split and tetradic palettes from base colours with even weight
Palette harmonyFreeFor designers and brand teams
25/day
free runs a day, no sign-in.
Before: what you give it
The example input, as typed in. You paste text, CSS, markup or notes.
#1b3a5c, #e4572e
After: what comes back
The first lines of a real run on that input. Nothing here is edited by hand.
Base #1b3a5c oklch(0.343 0.07 252.4) complementary: #4f3204 analogous: #004050* #33335c triadic: #57282e #2a4017 split-complementary: #562b19 #403a02 tetradic: #452d53 #4f3204 #2a4017 Base #e4572e oklch(0.637 0.184 36.5) complementary: #009cb7* analogous: #e24f79 #c37700* triadic: #00a663* #717bf8 split-complementary: #00a196* #0091e9* tetradic: #a38a00* #009cb7* #717bf8 Which suits what: ... full output on the tool page
What you get
Hex and oklch() for each harmony, a note on what each suits, and a list of near-duplicate colours
What it cannot do
One to six base colours; OKLCH opposites differ from the paint wheel, and near-grey bases have no hue.
Who it is for
- Designers
- Brand teams
Free and Pro
| Free | 25 runs a day per IP address, up to 20,000 characters a run. |
|---|---|
| Pro | No daily limit, 300 requests a minute, up to 200,000 characters a run. |
Use it from your assistant
The tool is called palette_harmony. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.
claude mcp add --transport http designers https://designers.allthepossibles.com/mcpcurl -X POST https://designers.allthepossibles.com/api/palette-harmony -H 'content-type: application/json' -d '{"colors":"#1b3a5c, #e4572e"}'Try it here
The form starts with the same example input, so you can run it first and then swap in your own.
More in colour and contrast
- Contrast
Find which text and UI colour pairs fail WCAG contrast and get the nearest colour that passes.
- Tint and shade scale
Turn one colour into a 50 to 950 tint and shade scale with WCAG contrast reported on every step
- Status colour check
Check that error, success and warning colours stay distinct under colour blindness, with a second cue each
- Dark mode palette
Derive a dark-mode palette from your light-mode tokens and fix text and accents that fall below 4.5:1
- Colour temperature mix
Read a palette's warm and cool balance and whether its area shares sit near a 60-30-10 split
- CSS contrast pairs
Find which real text and background colour pairs in your CSS fail WCAG contrast, with file and line