Generate a random palette
Coolors-style random palette generator. Lock colors you like, press space (or shuffle) to regenerate the rest. Up to 10 colors per palette.
How to find a palette by chance
Shuffle, lock the ones you love, shuffle again. Repeat until the palette clicks.
- 01
Press shuffle
Or hit space. The whole palette is regenerated except locked tiles.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
randomOKLCHCSS Color 4perceptualliveshuffle · color✓ · sRGB5 new colors
loaded · normalisedOKLCH · ready - 02
Lock favorites
Click the lock button on tiles you want to keep.
Format conversion handles
hex,rgb(),hsl(),oklch(),color(display-p3 …)with proper gamut mapping when crossing colour spaces.lockhex · rgb · hslP3gamut-mappedlivelock · options2 · live★ locked
options applied · livelive - 03
Shuffle the rest
Repeat shuffle — only unlocked tiles change.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
iterWCAG 2.2APCAAA · AAAcontrastiter · convertedfree · readyreshuffle unlocked
converted · liveWCAG-aware - 04
Copy the palette
Grab one tile or copy all HEX values.
Copy formats any swatch in the chosen syntax (
#aabbcc,rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.copyclipboardCSS varspalette JSONblobok · copiedready · done✓ Copied list
shipped · ready to shipsuccess
Colour work that survives accessibility audits
Use OKLCH for manipulation
OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.
Test against WCAG 2.2
4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.
Mind gamut clipping
P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.
Colour blindness affects 8%
Use the Color Blindness simulator to check critical UI before launch.
Don’t hardcode hex
Use CSS variables. Light/dark themes become trivial when colours are tokenised.
Dark mode isn’t inverted
Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.
When to randomize a palette
Inspiration, prototyping, illustration.
Inspiration
Break out of safe defaults — try something unexpected. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.
WCAG 2.2 AAIllustration
Quick seed palettes for editorial art. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).
P3-awarePrototypes
Splash bold colors on a comp without overthinking. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.
perceptually-uniformBrand exploration
See unusual combinations side-by-side. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.
gamut-safeWorkshops
Generate live palettes during design exercises. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.
a11y-readyCross-tool
Copy hex values into Figma, Sketch, or Tailwind. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.
design-tokenFrequently asked questions
Something missing?
Tell us what you need. We ship the top requests every two weeks.