Designers
ToolsDocsProAll the Possibles

All 141 tools / Colour and contrast

Derive a dark-mode palette from your light-mode tokens and fix text and accents that fall below 4.5:1

Dark mode paletteFreeFor designers and developers

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.

bg: #ffffff
card: #f6f7f9
text: #1a1d23
text-muted: #5b6270
border: #d9dce2
primary: #2563eb
success: #1a7f37
on-primary: #ffffff

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

Dark counterpart for 8 tokens (surfaces lifted by lightness, accents desaturated, text kept off pure white).

token                 role      light    dark
bg                    surface   #ffffff  #141414
card                  raised    #f6f7f9  #1f1f21
text                  text      #1a1d23  #d5dae2
text-muted            text      #5b6270  #acb4c3
border                border    #d9dce2  #23252a
primary               accent    #2563eb  #588fff
success               accent    #1a7f37  #5ba668
on-primary            onAccent  #ffffff  #030303

All 9 text and accent pairs reach their target.
... full output on the tool page

What you get

A mapping per token with a note, any pairs still failing with ratios, and CSS variables

What it cannot do

Roles are guessed from token names then colours, and the lifted-surface approach is a convention, not a standard.

Who it is for

  • Designers
  • Developers

Free and Pro

Free25 runs a day per IP address, up to 20,000 characters a run.
ProNo daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called dark_mode_palette. 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/mcp
curl -X POST https://designers.allthepossibles.com/api/dark-mode-palette -H 'content-type: application/json' -d '{"tokens":"bg: #ffffff\ncard: #f6f7f9\ntext: #1a1d23\ntext-muted: #5b6270\nborder: #d9dce2\nprimary: #2563eb\nsuccess: #1a7f37\non-primary: #ffffff"}'

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

All colour and contrast tools