Tailwind colour shades
Give it one colour and get a full 50 to 950 scale that behaves like Tailwind's own. See it on a real interface, then export for Tailwind v3, v4, CSS or JSON.
See it on an interface
AcmeProductDocsPricingGet started
New release
Build interfaces with a colour scale that fits
Every step from 50 to 950 comes from one base colour, so buttons, borders and backgrounds stay in harmony.
PrimarySecondaryGhost
you@company.com
Heads up. Your trial ends in 3 days.
OverviewActivitySettings
Take it with you
Pick the format your project uses, then copy it straight into your config or stylesheet.
The default Tailwind palette
All 22 colour families with their 11 steps. These are the Tailwind CSS v3 values as HEX. Click a swatch to copy it.
More colour tools
Every tool runs in your browser. No sign-up needed.
Palette generatorGenerate palettes with the space barImage palettePull colours from any photoColour pickerFormats, shades and harmoniesColour libraryBrowse thousands of named coloursGradientsBrowse ready-made gradientsGradient makerBuild and export CSS gradientsGradient paletteBlend colours in even stepsContrast checkerWCAG pass or fail in one glancePalette visualizerTry colours on real layoutsColour botChat for colour ideas