Generate complete color palettes in one click — random, warm, cool, earthy, vibrant or pastel. Palettes are built in OKLCH so lightness and strength stay coherent across the set, sorted light-to-dark, and export as CSS variables, SCSS, JSON, design tokens or plain hex lists.
Settings
Generated locally in your browser — your settings and results never leave this page.
What separates a palette from five colors
Coherence — and coherence has coordinates. Colors feel like a set when they agree on lightness discipline and chroma discipline, whatever their hues do. That is why this generator works in OKLCH: each mood is an envelope on L and C (the agreement), while hue roams freely inside it (the variety). Sampling any number of colors inside a disciplined envelope produces sets that look chosen; sampling the raw RGB cube produces sets that look like an accident. The moods are just named envelopes.
The output sorts light-to-dark because a sorted palette is already half-assigned: lightest toward backgrounds, darkest toward text, middle toward accents. What remains is taste.
Working with a generative tool honestly
Generation is a divergence tool — it widens options fast and cheaply. The workflow that respects that: roll freely, screenshot or copy anything promising, stop when two or three rolls in a row add nothing, then converge with the deterministic tools (ramps, contrast checks, role assignment). Palettes are cheap here; decisions remain expensive. Spending the cheap currency liberally is the trick.
Mood envelopes, documented
Nothing is hidden: warm confines hue to the red–yellow arc, cool to the blues, earthy to desaturated olive-to-ochre territory, vibrant raises chroma at mid lightness, pastel raises lightness and drops chroma. If a generated palette is nearly right, note which envelope produced it and tighten by hand in the OKLCH Color Generator — the envelope numbers transfer directly.
From generated to shipped
A rolled palette is a candidate, not a decision. The pipeline that follows: Palette Contrast Matrix to learn which pairs can carry text; Color Blindness Simulator if members will encode meaning; Shades & Tints to expand the keepers into ramps; and the export formats (CSS variables through DTCG tokens) to land the result in code without retyping. Each step is one link away from the output.
Locking in a direction, without the tool fighting you
A generative session ends with a decision, and the handoff deserves care: the moment a rolled palette feels right, copy its export and immediately re-anchor it in deterministic tools — the seed-based generators reproduce structure from a hex, so extract the palette’s key color and rebuild around it. This converts a lucky roll into a documented derivation: “balanced recipe from #2d7a68” survives in a brand doc where “the fourth thing the random tool showed me on Tuesday” does not. Serendipity for discovery, determinism for record — using each mode for what it is good at is the whole craft of working with generators.
How to use the Color Palette Generator
- Choose the palette size and a mood – random, warm, cool, earthy, vibrant or pastel.
- Any control change (or Random) generates a fresh palette, sorted light to dark.
- Copy the export you need before regenerating.
Frequently asked questions
How does the generator build palettes that hang together?
It samples in OKLCH with mood-specific bounds on lightness and chroma – the two axes that make colors feel related – then sorts by perceived lightness. Random hue inside a disciplined L/C envelope is the whole trick; it is why even the random mood rarely produces a clunker.
What do the mood presets actually constrain?
Warm limits hue to the 20-70° arc (reds through yellows), cool to 200-280° (blues), earthy to the 40-140° olive band with restrained chroma, vibrant pushes chroma high at mid lightness, pastel raises lightness and drops chroma. The bounds are in the page source – no secret sauce, just OKLCH discipline.
Can I reproduce a palette I generated earlier?
No – generation is intentionally fresh each time, and the page warns you to copy before touching anything. For reproducible, seed-driven palettes use Palette From HEX or the OKLCH Palette Generator, where identical inputs always give identical outputs.
How many colors should a working palette have?
Fewer than enthusiasm suggests: 3-5 core colors cover most interfaces once you add tint/shade ramps per color. Generate 5 here, promote the survivors, and expand each with Shades and Tints rather than adding more hues.
Are generated palettes accessible out of the box?
They are coherent, not certified – accessibility depends on how you pair them. Run the set through the Palette Contrast Matrix to find the text-safe pairs, or start from the Accessible Palette Generator when contrast is the primary requirement.
What is the DTCG export option?
Design Tokens Community Group draft JSON – the emerging cross-tool token format ($value/$type structure) that Figma-adjacent pipelines and style-dictionary builds consume. The palette arrives named and typed, ready for a token workflow.
Why are the palettes sorted light to dark?
Because role assignment reads off a sorted ramp: lightest = background candidate, darkest = text candidate, middle = accents. Unsorted palettes make you do that triage mentally every time.
Build a palette that stays accessible
A palette with its contrast checked and its behaviour under colour blindness known.
- Online Color PickerSettle on the base colour to build everything else from.
- Color Palette Generator you are hereGenerate a full palette around that base.
- Palette Contrast MatrixSee every foreground and background pairing at once.
- Color Blindness SimulatorCheck the palette still reads for common types of colour blindness.
Turn a palette into design tokens
The same palette as named tokens, as CSS custom properties, and as a Figma token file.
- Color Palette Generator you are hereProduce the palette the tokens will describe.
- Semantic Color Token GeneratorGive the colours role names rather than colour names.
- Design Token GeneratorBuild the token set from those roles.
- CSS Variables GeneratorEmit the tokens as CSS custom properties.
- Figma Token JSON GeneratorEmit the same tokens in the format Figma reads.
