Color Palette Generator
Generate professional color scales for design systems, Tailwind CSS, and design tokens
Algorithm
Contrast Level
Shade Count
About Color Palette Generator
What is a Color Palette Generator?
A color palette generator creates professional color scales from a single base color. It generates multiple shades (typically 50-950) that work harmoniously together in design systems, ensuring consistency across your entire application.
How to use the 50-950 scale?
The 50-950 scale provides 11 shades where 50 is the lightest and 950 is the darkest. Typically, shade 500 or 600 represents your base color. Use lighter shades (50-400) for backgrounds and subtle elements, and darker shades (600-950) for text, borders, and emphasis.
What is OKLCH?
OKLCH is a modern color space that provides perceptually uniform colors. Unlike HSL, OKLCH ensures that colors with the same lightness value appear equally bright to the human eye, making it ideal for generating accessible and visually balanced color palettes.
How to export for Tailwind CSS?
Use the "Tailwind CSS" export option to get a ready-to-use configuration. Copy the generated code into your tailwind.config.js file under theme.extend.colors. For Tailwind CSS v4, use the "@theme" export format with CSS variables.
How to use CSS Variables?
CSS Variables (Custom Properties) allow you to define colors once and reuse them throughout your stylesheet. Export as "CSS Variables" and add the generated code to your global CSS file. Then reference colors using var(--primary-500) in your styles.
How to generate palette for dark mode?
For dark mode, choose a darker base color or use the "Dark Mode Ready" algorithm. This algorithm generates tones optimized for dark backgrounds, ensuring lighter shades have sufficient contrast. You can also use the UI Preview to test your palette in dark mode.
What is the difference between OKLCH and HSL?
HSL (Hue, Saturation, Lightness) is an older color space where colors with the same lightness value may appear different in brightness. OKLCH is perceptually uniform, ensuring colors with the same lightness value appear equally bright, resulting in more harmonious and accessible palettes.
How to ensure color accessibility?
Use the "Contrast" tab to check if your color combinations meet WCAG AA (4.5:1) or AAA (7:1) standards. The tool automatically shows which shades are safe for white or black text, and provides recommendations to ensure your design is accessible to all users.
How many shades should I use in my design system?
The default 11-shade scale (50-950) is ideal for most design systems, offering sufficient flexibility without overwhelming. For smaller projects, 9 shades may be enough. For complex systems with many variations, 11 shades provide adequate granularity for all use cases.
Can I use these palettes commercially?
Yes! The generated palettes are 100% free for commercial and personal use. You have full ownership of the generated colors and can use them in any project, including commercial products, websites, apps, and marketing materials without restrictions.