Turn your colours into 50–950 scales for Tailwind CSS and design tokens. Several colours side by side, values in HEX, RGB, HSL, OKLCH or Lab, contrast on every shade, and exports for Tailwind v4, v3, CSS, JSON, CSV, SVG and PNG.
Loading the scales…
About these scales
A Tailwind-like curve
Steps follow a lightness curve similar to Tailwind’s own palettes, with colourfulness peaking in the middle. Your colour is never changed: it is placed, exactly as entered, on the step closest to its lightness.
Tailwind CSS v4 and v3
Tailwind CSS v4 reads colours from @theme variables in your CSS. The v3 export is a tailwind.config.js for projects that have not moved to v4 yet; it is checked to be valid JavaScript.
Contrast on every shade
W and B show the contrast of white and black text on each step, rounded down so a fail is never shown as a pass. 4.5:1 meets WCAG AA for normal text.
Generated, not official
These are generated scales for your own colours, not Tailwind’s official palette, and not paint colours.