Color Palette Generator
Pick a base color and instantly get a full Tailwind CSS-style shade scale (50–950), plus complementary, analogous, and triadic color combinations for your website. Copy the result as ready-to-use CSS.
Shade scale (50–950)
Color combinations
Export your palette
@theme {
--color-brand-50: #f4f9fb;
--color-brand-100: #e5f2f5;
--color-brand-200: #b9ebf8;
--color-brand-300: #86dcf3;
--color-brand-400: #4ecbee;
--color-brand-500: #17bbe8;
--color-brand-600: #139dc3;
--color-brand-700: #0f7f9e;
--color-brand-800: #0c657d;
--color-brand-900: #075064;
--color-brand-950: #05313e;
}:root {
--brand-50: #f4f9fb;
--brand-100: #e5f2f5;
--brand-200: #b9ebf8;
--brand-300: #86dcf3;
--brand-400: #4ecbee;
--brand-500: #17bbe8;
--brand-600: #139dc3;
--brand-700: #0f7f9e;
--brand-800: #0c657d;
--brand-900: #075064;
--brand-950: #05313e;
}How to Choose a Website Color Scheme
Start with one brand color
Pick a single base color that reflects your brand's personality, then let a generated shade scale handle everything from subtle backgrounds to bold CTAs.
Use complementary for contrast
Complementary pairs (opposite on the color wheel) work well for a primary button against a background, or a highlighted badge.
Use analogous for harmony
Analogous colors sit near each other on the wheel and create a calm, cohesive feel — great for gradients and multi-section landing pages.
Keep neutrals gray, not colored
Reserve your brand hue for accents and CTAs. Body text, borders, and backgrounds should stay on a neutral gray scale for readability.
Frequently Asked Questions
How is the shade scale (50–950) generated?
The tool keeps your base color's hue and saturation, then adjusts lightness across 11 stops to mirror the same scale structure used by Tailwind CSS's own color palettes (like cyan-50 through cyan-950).
Can I use this palette directly in Tailwind CSS v4?
Yes. Copy the generated @theme block and paste it into your global CSS file. Tailwind v4 reads color tokens directly from CSS, so classes like bg-brand-500 or text-brand-700 become available immediately.
What is the difference between complementary and analogous colors?
Complementary colors sit opposite each other on the color wheel (high contrast, good for CTAs). Analogous colors sit next to each other (low contrast, harmonious, good for backgrounds and gradients).
Is this color palette generator free to use?
Yes, completely free with no sign-up. Generate unlimited palettes and copy the code directly into your project.
More free tools & components
Pair your new palette with free Tailwind CSS components.