Color Palette Generator
Pick a seed color and instantly generate harmonious color palettes. Choose from 5 color harmony rules. Copy as CSS variables or hex codes.
How to use Color Palette Generator
Generate a complete UI color palette from a single seed color — automatically creating 10 shades (50–900) similar to Tailwind CSS or Material Design. Export as CSS custom properties, Tailwind config, JSON, or SCSS variables. Use as the foundation for an entire design system or component library.
- Enter your brand color as HEX or pick it with the color picker.
- The tool generates 10 shades from near-white (50) to near-black (900) based on the seed.
- Preview the shades against white and dark backgrounds to validate contrast.
- Toggle the export format: CSS variables, Tailwind config, JSON, or SCSS.
- Copy or download the output and paste it into your design system.
Your data never leaves your device — 100% private processing.
Shade generation methodology
The generator uses the seed color as the 500 anchor and derives lighter shades (50–400) by increasing lightness and decreasing saturation in HSL, and darker shades (600–900) by decreasing lightness with a slight saturation adjustment to maintain vibrancy. The approach mirrors the methodology used by Tailwind CSS (via the Culori library) and ensures shades look natural together rather than mechanically equidistant. Each shade is validated to meet WCAG AA contrast requirements against white (for dark shades) or dark-800 (for light shades) in the output.
Integrating with Tailwind CSS
Paste the exported Tailwind config into your tailwind.config.js under theme.extend.colors: { brand: { 50: "#f0fdfa", 100: "#ccfbf1", ... } }. All shade utilities (bg-brand-500, text-brand-700, border-brand-300) become available immediately. For consistency with Tailwind's built-in palettes, use the 500 shade as primary, 600 as hover, 700 as active/focus-ring, and 100/200 as subtle backgrounds in light mode. Swap to 400/300/900 for dark mode using the dark: variant.
Glossary
- Shade
- A darker variation of a color, produced by adding black or decreasing lightness.
- Tint
- A lighter variation of a color, produced by adding white or increasing lightness.
- SCSS
- Syntactically Awesome Style Sheets — a CSS preprocessor supporting variables, nesting, and functions.
- Tailwind config
- The tailwind.config.js file where custom colors, spacing, and other design tokens extend or override defaults.
Related reading
Frequently Asked Questions
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Why use Color Palette Generator?
- Converts between HEX, RGB, HSL, HSV, and CMYK instantly
- Accessibility contrast checker built in
- Generates harmonious palette variations from a single colour
- Export-ready CSS variables and design tokens
Common use cases
- Pick brand colours that meet WCAG accessibility standards
- Generate a complementary palette from a logo colour
- Convert Figma HEX codes to CSS rgb() for developers
- Create a gradient from two brand colours
- Verify sufficient contrast for text on coloured backgrounds
Related Color & Design
Color Picker & Converter
Pick a color and instantly convert between HEX, RGB, HSL, HSB, and CMYK. Generate tints, shades, and color palettes.
CSS Gradient Generator
Create beautiful CSS linear, radial, and conic gradients online. Get the CSS code instantly with a live preview.
Color Contrast Checker
Check color contrast ratio for WCAG AA and AAA accessibility compliance. See if your text and background colors meet accessibility standards.
Color Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK formats instantly. Paste any color format and get all others with one click.
Image Color Extractor
Extract dominant colors from any image. Upload a photo and instantly get the top colors as HEX and RGB values. Free online color palette extractor.
Color Shades & Tints Generator
Generate a full color scale from any color. Create 9 shades and 9 tints with Tailwind-style naming (50-900). Copy as CSS variables or Tailwind config.
Explore all Color & Design.