Color Palette Generator:
Accessible palettes from one color
Generate a complete design system palette from a single seed color. Preview on real UI components in light and dark mode. Check WCAG AA/AAA contrast ratios instantly. Export to CSS, Tailwind, or hex.
Generated Palette
Click a swatch to copyWCAG Contrast Summary
How it works
Enter your brand color
Type a hex code or use the color picker to set your starting seed color. This becomes the center of your primary scale.
Generate and refine
Press spacebar or click Generate to create your palette. Lock colors you love, regenerate the rest. Every combination is checked for WCAG accessibility.
Preview and export
Switch between light and dark mode previews to see your palette on real UI components. Export as CSS variables, Tailwind theme, or a plain hex list.
Common use cases
Who uses this color palette generator
Brand identity design
Start with one brand hex and generate a complete system of primary, neutral, and semantic colors ready for logos, websites, and marketing materials.
Web and app development
Export directly to CSS custom properties or Tailwind config. Every shade is pre-checked for WCAG accessibility so your interface works for all users.
Dark mode implementation
Preview your palette in both light and dark modes on real components before writing a single line of CSS. Catch contrast failures early.
Design system creation
Generate production-ready design tokens with named scales. Use the exported tokens in Figma, Sketch, or code to maintain consistency across teams.
Frequently asked questions
What is a color palette generator?
A color palette generator is a tool that creates harmonious sets of colors for design projects. You input a starting color (seed), and the tool generates lighter and darker shades, neutral grays, and semantic colors (success, warning, error) that work together visually. This tool also checks every combination against WCAG accessibility standards so your palette is beautiful and readable.
What is WCAG and why does it matter for colors?
WCAG stands for Web Content Accessibility Guidelines. It defines contrast ratio standards to ensure text is readable against its background for people with visual impairments, color blindness, or low vision. WCAG AA requires a 4.5:1 contrast ratio for normal text, and AAA requires 7:1. Meeting these standards makes your website usable by the widest possible audience and can also improve SEO.
What is the difference between AA and AAA contrast ratios?
WCAG AA is the minimum standard for accessibility. It requires a 4.5:1 contrast ratio for normal text and 3:1 for large text. WCAG AAA is the highest standard, requiring 7:1 for normal text and 4.5:1 for large text. Most commercial websites aim for AA compliance. AAA is ideal for government, healthcare, and education sites where maximum accessibility is critical.
How does this tool generate color scales?
This tool converts your seed color into the HSL color space (Hue, Saturation, Lightness) and generates scales by systematically varying lightness while preserving hue relationships. Lighter shades have higher lightness values with reduced saturation, while darker shades have lower lightness with concentrated saturation. This creates perceptually smooth gradients that feel natural and professional.
What is a good contrast ratio for text and backgrounds?
For normal body text (under 18pt or 14pt bold), aim for at least 4.5:1 (WCAG AA) or 7:1 (WCAG AAA). For large text (18pt+ or 14pt+ bold), 3:1 meets AA and 4.5:1 meets AAA. For user interface components like buttons and form fields, a 3:1 contrast ratio against adjacent colors is recommended. This tool checks all of these automatically.
What are design tokens and why should I use them?
Design tokens are named variables that store design decisions like colors, typography, and spacing. Instead of hardcoding hex codes throughout your project, you use semantic names like --color-primary-600 or primary-600. This makes your design system consistent, easier to maintain, and simpler to update. When your brand color changes, you update one token instead of hundreds of CSS rules.
How do I export my palette to Tailwind CSS?
After generating your palette, click the Export section and select the Tailwind tab. The tool outputs a Tailwind v4 compatible @theme block with all your colors named as primary, neutral, success, warning, and error scales. You can copy this directly into your CSS file. For Tailwind v3, use the CSS Variables export and reference them in your tailwind.config.js colors section.
What is the difference between a primary color and a neutral color?
A primary color is the main brand color that defines your visual identity — it appears in buttons, links, and key UI elements. A neutral color scale provides grayscale shades for text, backgrounds, borders, and dividers. A well-designed palette uses neutrals for 80% of the interface and the primary color for the 20% that needs emphasis. This tool generates both automatically from your seed color.
How do I ensure my palette works in dark mode?
This tool includes a live dark mode preview that shows how your palette looks on dark backgrounds. A good dark mode palette inverts the usage pattern: dark backgrounds use neutral-900 to neutral-800, text uses neutral-50 to neutral-200, and primary accents use lighter shades (primary-400 to primary-500) instead of darker ones. The component lab lets you test both modes side by side before exporting.
What is color blindness and how does it affect palette design?
Color blindness affects approximately 8% of men and 0.5% of women worldwide. The most common type is red-green color blindness, where users cannot distinguish between red and green hues. This is why relying solely on color to convey meaning (like error states) is problematic. A safe palette uses distinct lightness differences, icons, and text labels in addition to color. High contrast ratios help colorblind users distinguish elements regardless of hue.
What makes a color palette "accessible"?
An accessible palette ensures that all text is readable against its background, that interactive elements are distinguishable from their surroundings, and that information is not conveyed by color alone. Specifically: normal text needs 4.5:1 contrast, large text needs 3:1, and UI components need 3:1 against adjacent colors. This tool checks every combination and flags failures with red badges so you can fix them before shipping.
Can I use generated palettes for commercial projects?
Yes. All palettes generated by this tool are free to use for both personal and commercial projects. There are no licensing restrictions, no attribution requirements, and no watermarks. The colors are mathematically generated and not derived from any proprietary source. Use them for websites, mobile apps, brand identities, presentations, or any design work.
Explore more free tools
Also try IP Address Checker, Speed Test, Password Generator, SEO Checker, QR Code Generator, Broken Link Checker, Invoice Generator, PDF to Word, and Developer Toolbox.