Free generator
Free Color Palette Generator
Lock swatches, check contrast, extract from images, export OKLCH/P3, and share a link.
Click a swatch to lock or unlock it. Locked colors stay put when you regenerate.
Adjustments skip locked swatches.
Base color
From image
Extract dominant colors from a photo — processed in your browser.
How to use
1. Set a base color or extract from an image, then pick a harmony and how many swatches (3–8).
2. Lock colors you want to keep, tweak saturation/lightness, and check WCAG contrast between a text color and a background.
3. Export HEX, OKLCH, Display P3, CSS, JSON, or Tailwind — or copy a shareable link.
What this palette generator does
It builds a small set of related colors from a base hue (or from colors sampled out of an image you select locally). Harmonies are starting points for UI and brand work, not a finished design system. Assign roles next: canvas, surface, text, muted text, accent, and semantic feedback.
How harmonies are built
Colors are generated in HSL, then converted to HEX, RGB, OKLCH, and Display P3 for export. Random picks use crypto.getRandomValues, not Math.random.
- Complementary: base and +180°
- Split: base, +150°, +210°
- Triadic: base, +120°, +240°
- Tetradic: 90° steps around the wheel
- Analogous: ±30° neighbors until the count is filled
- Monochromatic / shades: same hue, lightness stepped across the set
- Random: independent hues, saturations 40–85, lightness 28–72
If you need more swatches than the harmony’s native hues, extra slots jitter ±18° from an existing hue. Locked swatches stay put when you regenerate. If a base color is enabled, index 0 keeps that color except in shades mode.
Contrast checks
Pick a text color and a background from the palette. The ratio follows WCAG: relative luminance of each hex, then (lighter + 0.05) / (darker + 0.05), rounded to two decimals. Thresholds: 4.5:1 AA normal, 3:1 AA large, 7:1 AAA normal, 4.5:1 AAA large. Pretty-but-unreadable body text is the usual failure. Test on tables and forms, not only a hero. See color contrast that passes.
Exports and share links
HEX is still the common handoff. OKLCH helps you move lightness without accidental hue shifts. Display P3 covers wider gamuts on newer screens. CSS variable export includes hex, oklch, and p3 custom properties per swatch.
Share links put the palette state in the URL. Anyone with the link can recreate the set. That is convenient for engineering handoff; it is not access control. Do not put unreleased brand exploration in a public ticket if that matters.
Is the palette generator private?
Image extract, contrast math, and regeneration run in the browser. Images are not posted to GenShelf. Theme preference for the site is separate (localStorage). More: color palette basics.
FAQ
Can I lock colors I like?
Yes. Lock a swatch and regenerate or tweak saturation/lightness — only unlocked colors change.
How does the contrast checker work?
It uses relative luminance (sRGB linearization, 0.2126/0.7152/0.0722) and the WCAG contrast formula (L1+0.05)/(L2+0.05). AA normal text needs 4.5:1; large text 3:1; AAA normal 7:1.
Can I extract a palette from an image?
Yes. The image is sampled in your browser. Nothing is uploaded to a server.
What color formats are supported?
Each swatch shows HEX, RGB, HSL, OKLCH, and Display P3. Export as HEX, OKLCH, P3, CSS variables, JSON, or Tailwind.
Can I share a palette?
Copy link encodes colors, locks, harmony, and adjustments in the URL. There is no palette account on a server.
Related guides
- Color palette basics for readable UI and brand workHue relationships, contrast, and a simple workflow for building palettes you can reuse.
- Color contrast that passes: a practical WCAG checklist for UIText vs background ratios, large text rules, non-text UI, and how to fix pretty-but-unreadable palettes.