Color Palette Generator
Developer-focused palette utility with Tailwind tokens, CSS variables, dark/light theme pairs, and WCAG contrast checks.
Enter any hex color and build 50-950 scales.
Used in generated Tailwind and CSS variable exports.
Quick check for common foreground/background token pairs.
Generated scale (light)
Tailwind-like steps from 50 to 950.
Generated scale (dark companion)
Companion scale tuned for dark-theme token sets.
Tailwind export
Paste into your theme file and adjust token name as needed.
export const colors = {
brand: {
50: '#f8fafb',
100: '#f1f4f9',
200: '#d8e2f3',
300: '#b6cbec',
400: '#7ea8ec',
500: '#3b82f6',
600: '#0e64f1',
700: '#1053c1',
800: '#124292',
900: '#113164',
950: '#10213d',
},
brandDark: {
50: '#e9edf4',
100: '#dde4f1',
200: '#c1d2ed',
300: '#9ebae8',
400: '#6297ec',
500: '#0662f8',
600: '#0858db',
700: '#0a47ab',
800: '#0c367b',
900: '#0b254e',
950: '#091527',
},
}CSS variables export
:root and .dark token blocks for direct usage in CSS or Tailwind token bridges.
:root {
--brand-50: #f8fafb;
--brand-100: #f1f4f9;
--brand-200: #d8e2f3;
--brand-300: #b6cbec;
--brand-400: #7ea8ec;
--brand-500: #3b82f6;
--brand-600: #0e64f1;
--brand-700: #1053c1;
--brand-800: #124292;
--brand-900: #113164;
--brand-950: #10213d;
--brand-surface: #f8fafb;
--brand-text: #10213d;
--brand-primary: #0e64f1;
--brand-on-primary: #ffffff;
--brand-border: #d8e2f3;
--brand-muted: #f1f4f9;
}
.dark {
--brand-50: #e9edf4;
--brand-100: #dde4f1;
--brand-200: #c1d2ed;
--brand-300: #9ebae8;
--brand-400: #6297ec;
--brand-500: #0662f8;
--brand-600: #0858db;
--brand-700: #0a47ab;
--brand-800: #0c367b;
--brand-900: #0b254e;
--brand-950: #091527;
--brand-surface: #091527;
--brand-text: #dde4f1;
--brand-primary: #6297ec;
--brand-on-primary: #000000;
--brand-border: #0a47ab;
--brand-muted: #0c367b;
}Accessible contrast matrix
Each shade evaluated against white and black text using WCAG contrast ratio.
| Shade | Hex | On White | On Black | Best Text | Best Ratio |
|---|---|---|---|---|---|
| 50 | #f8fafb | 1.05:1 Fail | 20.06:1 AAA | #000000 | 20.06:1 AAA |
| 100 | #f1f4f9 | 1.10:1 Fail | 19.05:1 AAA | #000000 | 19.05:1 AAA |
| 200 | #d8e2f3 | 1.30:1 Fail | 16.09:1 AAA | #000000 | 16.09:1 AAA |
| 300 | #b6cbec | 1.65:1 Fail | 12.74:1 AAA | #000000 | 12.74:1 AAA |
| 400 | #7ea8ec | 2.41:1 Fail | 8.70:1 AAA | #000000 | 8.70:1 AAA |
| 500 | #3b82f6 | 3.68:1 Fail | 5.71:1 AA | #000000 | 5.71:1 AA |
| 600 | #0e64f1 | 5.11:1 AA | 4.11:1 Fail | #ffffff | 5.11:1 AA |
| 700 | #1053c1 | 6.93:1 AA | 3.03:1 Fail | #ffffff | 6.93:1 AA |
| 800 | #124292 | 9.46:1 AAA | 2.22:1 Fail | #ffffff | 9.46:1 AAA |
| 900 | #113164 | 12.75:1 AAA | 1.65:1 Fail | #ffffff | 12.75:1 AAA |
| 950 | #10213d | 16.07:1 AAA | 1.31:1 Fail | #ffffff | 16.07:1 AAA |
How this generator is developer-first
- Outputs Tailwind-ready color scales for both default and dark companion tokens.
- Provides direct CSS variable exports with
:rootand.darkblocks. - Includes a light/dark theme token pair with immediate contrast status badges.
- Runs WCAG contrast checks against white/black text for every shade.
Contrast guidance
For body text, target at least AA (4.5:1). AAA (7:1) is preferable for long-form content and difficult viewing conditions. For large text and UI labels, WCAG allows lower thresholds, but this tool defaults to normal-text targets so your palette is safe by default.
questions
FAQs
How is the Tailwind palette generated from one base color?
The tool converts your seed color into HSL, then applies tuned lightness and saturation targets for each Tailwind shade step (50-950). The 500 shade stays anchored to your input so the generated scale remains visually faithful to your chosen brand color.
Why are there separate light and dark palette outputs?
Many teams use one palette for light UI tokens and a companion palette for dark mode. The light output targets bright backgrounds while the dark companion shifts tone and saturation to preserve contrast and color character on dark surfaces.
What does the contrast matrix check?
Each generated shade is tested against white and black text using WCAG contrast ratio math. The table reports ratio values and pass levels (Fail, AA, AAA) so you can pick safe foreground/background combinations quickly.
Can I use the CSS variable export directly in production?
Yes. The export includes both :root and .dark blocks with shade tokens plus practical theme pair tokens like surface, text, and primary. You can map them directly in CSS or bridge them into Tailwind theme variables.
Does this tool send palette data to a server?
No. Palette generation, token export, and contrast checks run entirely in your browser. Your color values are not uploaded.
Is Free Color Palette Generator for Developers - Tailwind + CSS Variables free to use?
Free Color Palette Generator for Developers - Tailwind + CSS Variables is completely free and runs in your browser.
Does Free Color Palette Generator for Developers - Tailwind + CSS Variables send my data to a server?
No. Free Color Palette Generator for Developers - Tailwind + CSS Variables processes input directly in your browser.
Do I need to create an account to use Free Color Palette Generator for Developers - Tailwind + CSS Variables?
No account is required to use Free Color Palette Generator for Developers - Tailwind + CSS Variables.
Privacy-first by design
Tool inputs are processed in your browser. Review the Privacy Policy and Terms for full details.
next utilities