Build Tailwind, Material, or simple shade scales from any base color. Tune curves and export CSS, Tailwind, SCSS, or JSON. No data leaves your browser.
More free utilities you might find useful
Quick answers to common questions
Steps from 50 (lightest) through 950 (darkest), with the base hue held constant and lightness mapped like Tailwind’s palette.
Saturation curve boosts mid-tones and softens extremes. Lightness curve tightens the dark or light end of the scale.
Yes. Each swatch copies its HEX value to the clipboard.
No. Color math runs entirely in your browser.
Your data is processed entirely in your browser. Nothing is sent to any server.
Swatches — click to copy
CSS variables
:root {
--color-50: #F3FCF6;
--color-100: #E6F9ED;
--color-200: #C4F3D5;
--color-300: #98ECB7;
--color-400: #61E592;
--color-500: #28E16C;
--color-600: #1CBA56;
--color-700: #199546;
--color-800: #157036;
--color-900: #0F4C26;
--color-950: #0B3219;
}Tailwind object
{
50: '#F3FCF6',
100: '#E6F9ED',
200: '#C4F3D5',
300: '#98ECB7',
400: '#61E592',
500: '#28E16C',
600: '#1CBA56',
700: '#199546',
800: '#157036',
900: '#0F4C26',
950: '#0B3219',
}SCSS
$color-50: #F3FCF6; $color-100: #E6F9ED; $color-200: #C4F3D5; $color-300: #98ECB7; $color-400: #61E592; $color-500: #28E16C; $color-600: #1CBA56; $color-700: #199546; $color-800: #157036; $color-900: #0F4C26; $color-950: #0B3219;
JSON
{
"50": "#F3FCF6",
"100": "#E6F9ED",
"200": "#C4F3D5",
"300": "#98ECB7",
"400": "#61E592",
"500": "#28E16C",
"600": "#1CBA56",
"700": "#199546",
"800": "#157036",
"900": "#0F4C26",
"950": "#0B3219"
}