UUID Generator
Generate unique UUIDs for your applications.
Color Palette Generator
Developer-focused palette utility with Tailwind tokens, CSS variables, dark/light theme pairs, and WCAG contrast checks.
Base color
Enter any hex color and build 50-950 scales.Token name
Used in generated Tailwind and CSS variable exports.Theme pair status
Quick check for common foreground/background token pairs.Light primary contrast5.11:1 AA
Light surface contrast15.35:1 AAA
Dark primary contrast7.16:1 AAA
Dark surface contrast14.32:1 AAA
Generated scale (light)
Tailwind-like steps from 50 to 950.
50
#f8fafb
100
#f1f4f9
200
#d8e2f3
300
#b6cbec
400
#7ea8ec
500
#3b82f6
600
#0e64f1
700
#1053c1
800
#124292
900
#113164
950
#10213d
Generated scale (dark companion)
Companion scale tuned for dark-theme token sets.
50
#e9edf4
100
#dde4f1
200
#c1d2ed
300
#9ebae8
400
#6297ec
500
#0662f8
600
#0858db
700
#0a47ab
800
#0c367b
900
#0b254e
950
#091527
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.
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.
Related Tools
All ToolsOpen Tool →
Hash Generator
Generate MD5, SHA1, SHA256 hashes securely.
Password Generator
Generate strong, secure passwords in seconds.
HMAC Generator
Generate HMAC digests using SHA-1/256/512.