Tailwind Color Export
Generate Tailwind CSS color configuration from your custom colors. Create complete palettes with 100-900 shades for your theme.extend.colors config.
Preview
primary
secondary
accent
Export Configuration
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'primary': {
'100': '#E0E0FC',
'200': '#C1C2F9',
'300': '#A1A3F7',
'400': '#8285F4',
'500': '#6366F1',
'600': '#4F52C1',
'700': '#3B3D91',
'800': '#282960',
'900': '#141430',
},
'secondary': {
'100': '#E8DEFD',
'200': '#D1BEFB',
'300': '#B99DFA',
'400': '#A27DF8',
'500': '#8B5CF6',
'600': '#6F4AC5',
'700': '#533794',
'800': '#382562',
'900': '#1C1231',
},
'accent': {
'100': '#D3F3DF',
'200': '#A7E8BF',
'300': '#7ADC9E',
'400': '#4ED17E',
'500': '#22C55E',
'600': '#1B9E4B',
'700': '#147638',
'800': '#0E4F26',
'900': '#072713',
},
},
},
},
};How to Use
- Add your brand colors using the color picker
- Give each color a meaningful name (e.g., "primary", "brand")
- Toggle shade generation for full 100-900 palettes
- Preview the generated palettes
- Copy the Tailwind config or CSS variables
- Paste into your tailwind.config.js file
Frequently Asked Questions
How do I use this in my Tailwind project? ▼
Copy the generated config and paste it into your tailwind.config.js file. The colors will be available as utility classes like bg-primary-500 or text-accent.
What are the 100-900 shades? ▼
These are automatically generated tints (lighter) and shades (darker) of your base color, following Tailwind's conventions. 500 is the base color.
Can I use CSS variables instead? ▼
Yes! Switch to the CSS tab to get CSS custom properties. You can reference these in Tailwind using var() syntax.
How many colors can I add? ▼
You can add up to 6 custom colors. Each color can optionally generate a full 100-900 palette.