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 any color and instantly get its HEX, RGB, HSL, and CMYK values
Generate beautiful multi-color palettes from a single seed color
Create CSS linear, radial, and conic gradients with live preview and code output
Upload an image and extract its dominant colors as a palette
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.
Last updated: