Colour Palette Generator
One colour in, a usable palette out — checked for contrast.
How it worksColour palette generator
The base plus its neighbours at −30° and +30°, at the same perceived lightness.
Spaceregenerates, from anywhere on this tool
#7030f8
White text safe · AA pass · 6.06:1
Base
#0065da
White text safe · AA pass · 5.42:1
Analogous −30°
#a400c8
White text safe · AA pass · 6.15:1
Analogous +30°
Tints & shades of the base hue
Click a step to copy it.
Adjust palette
L 53.0% · C 0.266 · H 288°
Live preview
A small mock composition using your palette as accent colours.
Accessibility
Simulate colour blindness
Preview only — the copied hex values are never altered by the simulation.
Export palette
Custom properties on :root, with the exact OKLCH in a comment beside each hex.
Names the generated tokens, e.g. --brand-500.
:root {
--brand-base: #7030f8; /* oklch(53.0% 0.266 287.9) */
--brand-analogous-warm: #0065da; /* oklch(53.1% 0.196 258.0) */
--brand-analogous-cool: #a400c8; /* oklch(52.9% 0.257 317.9) */
--brand-50: #f4f4ff; /* oklch(97.0% 0.015 287.9) */
--brand-100: #e6e5ff; /* oklch(93.0% 0.035 287.9) */
--brand-200: #d1ceff; /* oklch(87.0% 0.067 287.9) */
--brand-300: #bab3ff; /* oklch(80.0% 0.107 287.9) */
--brand-400: #a193ff; /* oklch(72.0% 0.155 287.9) */
--brand-500: #8a6fff; /* oklch(64.0% 0.205 287.9) */
--brand-600: #7741ff; /* oklch(56.0% 0.258 287.9) */
--brand-700: #5e28d3; /* oklch(47.0% 0.234 287.9) */
--brand-800: #43129e; /* oklch(37.0% 0.197 287.9) */
--brand-900: #270065; /* oklch(26.0% 0.149 287.9) */
}The export covers the harmony and all ten ramp steps. The SVG sheet (top button grid) prints each hex with its rating, for handing a palette to someone else.
