Color Palettes
Tweak Settings ⚙️
Copy colors
How it works
This generator uses advanced algorithms to find the most visually distinct colors within your specified range. For HSL, it considers the cylindrical nature of the hue wheel and optimizes for perceptual distance. For OKLCH, it uses the perceptually uniform color space for even better visual distinction.
Why use OKLCH for Color Palettes?
Standard color pickers often struggle with consistency. "Yellow" at 50% lightness looks much brighter than "Blue" at 50% lightness. OKLCH (Oklab) is a modern color space designed to fix this. It ensures that colors with the same "Lightness" value actually look equally bright to the human eye. This makes it the superior choice for generating accessible and harmonious UI color schemes.
Supported Color Schemes
- Pastel Palettes: High brightness, low saturation. Perfect for backgrounds and gentle UIs.
- Neon & Vibrant: High saturation, specific brightness. Ideal for dark mode accents and cyberpunk themes.
- Vintage & Retro: Desaturated ease with warmer hues. Great for nostalgic branding.
- Nature Inspired: Earth, Ocean, and Forest themes derived from organic hue ranges.
Interactive Fine-Tuning
Every generated color is fully customizable. Click on any swatch to open the advanced color picker, where you can adjust hue, chroma, and lightness with precision. Whether you need to ensure WCAG compliance or just want a slightly warmer tone, you have complete control over every individual color in your palette.
Color Palette Generator FAQ
What is a distinct color generator?
A distinct color generator uses mathematical models (like OKLCH or CIELAB) to find colors that are as different as possible from each other. This is crucial for data visualization, where you need to distinguish between multiple categories in a chart or map.
Why use OKLCH for color palettes?
OKLCH is a "perceptually uniform" color space. Unlike RGB or HSL, it ensures that if multiple colors have the same lightness value, they actually look equally bright to the human eye. This makes it perfect for creating accessible, balanced UI themes.
How do I export my color palette to CSS?
Once you've generated your palette, use the "Copy colors" buttons to instantly get your scheme as Hex codes, RGB, or HSL values. You can then paste these directly into your CSS variables or design tools.