Turn one colour into a 50 to 950 tint and shade scale with WCAG contrast reported on every step

Tint and shade scaleFreeFor 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.

color: #2f6fed
name: blue

After: what comes back

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

blue: base #2f6fed  oklch(0.574 0.202 262) sits on step 600

step  hex      oklch                      on white  on black
50    #f5f9ff  oklch(0.981 0.009 258.3)    1.06     19.88 *
100   #d3e3ff  oklch(0.913 0.042 261.7)     1.3      16.2 *
200   #b1cdff  oklch(0.845 0.077 261.9)    1.61     13.05 *
300   #8fb6ff  oklch(0.776 0.113 262.4)    2.04      10.3 *
400   #6c9fff  oklch(0.709 0.151 262.1)    2.61      8.04 *
500   #4d87f7  oklch(0.641 0.178 262)      3.43      6.12 *
600   #2f6fed  oklch(0.574 0.202 262)      4.55 *    4.62 *  <- base
700   #2459c2  oklch(0.493 0.174 262.1)     6.4 *    3.28  
800   #1a4498  oklch(0.411 0.146 262.1)    9.04 *    2.32  
900   #103171  oklch(0.332 0.117 261.8)   12.35 *     1.7  
950   #071e4b  oklch(0.249 0.089 261.8)    16.2 *     1.3  
... full output on the tool page

What you get

Hex, oklch() and contrast on white and black per step, the lightest passing text steps, and CSS variables

What it cannot do

Uses a fixed OKLCH lightness curve and WCAG 2.x contrast only; chroma is reduced where sRGB cannot hold it.

Who it is for

Designers
Developers

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.

What each plan includes

Use it from your assistant

The tool is called tint_shade_scale. 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/tint-shade-scale -H 'content-type: application/json' -d '{"color":"#2f6fed","name":"blue"}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

Base colourVariable name