Free tool
Colour Palette to Variables
Turn one brand colour into a full scale from 50 to 950, with ready names for Webflow variables and light and dark mode tokens.
Colour name
Brand colour (hex)
Pick a colour
How to use it
From one colour to a system.
Create the variables
In the Variables panel, add a Color variable for each shade. Use the names from the list so they sort in order.
Build tokens on top
Point background, text and accent tokens at the shades, so a rebrand changes one place.
Check the contrast
Each swatch shows its best text contrast. Use the Contrast Checker for exact pairs.