About the Color Palette
Finding related colours for a project can be difficult. Our palette generator uses hue shifting and HSL logic to create five-colour groups that work as a starting point for a UI, illustration, or prototype.
Color Palette
Generate beautiful and cohesive 5-color palettes.
100% Local Processing
How to use the palette generator
- Generate a palette to get five related colour swatches.
- Compare the lightness and contrast of the swatches against your intended background.
- Click a colour to copy its HEX value into your design or stylesheet.
Examples and worked results
Palette output
Input
Generate a new paletteResult
Five HEX colours derived from a shared hue relationshipThe output is a starting point for exploration, not a guarantee of accessible contrast.
How colours are generated
The generator creates a base HSL colour and shifts hue, saturation, and lightness to form a five-colour group. HSL makes related changes easier to reason about, but the result is still algorithmic and should be checked in the context of real text, backgrounds, and brand guidelines.
Common use cases
- Finding a starting palette for a UI or illustration
- Exploring analogous and monochromatic colour relationships
- Copying HEX values into CSS variables or design tokens
Important notes and limitations
- Generated colours are not automatically checked for WCAG contrast or colour-vision accessibility.
- A palette can look cohesive while still being unsuitable for small text or status indicators.
Practical tips
- Test foreground/background pairs with a contrast checker before using them for essential text.
Frequently Asked Questions
Can I copy the colors?
Yes, click any color block to copy its HEX value.