Loading color tools…
Loading color tools…
Loading color tools…
Generate a full 11-stop Tailwind CSS color scale from any brand color. Outputs tailwind.config.js and CSS variables.
Used as the Tailwind key: text-brand-500
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#f1f5fe',
100: '#e3ebfc',
200: '#bed0f9',
300: '#86a9f4',
400: '#447aee',
500: '#1555e0',
600: '#1147bb',
700: '#0e3995',
800: '#0a2b70',
900: '#071c4b',
950: '#051433',
},
},
},
},
};:root {
--color-brand-50: #f1f5fe;
--color-brand-100: #e3ebfc;
--color-brand-200: #bed0f9;
--color-brand-300: #86a9f4;
--color-brand-400: #447aee;
--color-brand-500: #1555e0;
--color-brand-600: #1147bb;
--color-brand-700: #0e3995;
--color-brand-800: #0a2b70;
--color-brand-900: #071c4b;
--color-brand-950: #051433;
}Pick your base color
Use the color picker or type a HEX code. This becomes the 500 stop of your scale.
Name your color
Enter a name like 'brand', 'primary', or 'coral'. It becomes the Tailwind key, e.g. text-brand-500.
Review the scale
See all 11 stops (50–950) with their HEX values shown as a visual strip.
Copy the Tailwind config
Click 'Copy Config' to copy the tailwind.config.js extend block. Paste it directly into your config file.
Or copy CSS variables
Copy the :root CSS variables block if you prefer using CSS custom properties instead.
Unlike most online tools, Toolivon processes everything directly in your browser using the Web APIs built into Chrome, Firefox, Safari, and Edge.