Generate, extract and refine color palettes: harmony schemes, brand and website systems, accessible and color-blind-safe sets, pastels, Material-style tonal ramps and palettes pulled from images — all computed in perceptual OKLCH and exported as CSS, SCSS, JSON or design tokens.
Your favourites
Recently used
Start from what you are trying to do
- Pull a palette out of an imageAn ordered palette taken from a photograph or screenshot, with its contrast checked.3 steps, starting with Color Palette From Image
- Color Palette GeneratorGenerate complete color palettes in one click — random, warm, cool, earthy, vibrant or pastel.
- Palette Generator From HEXTurn one hex code into a full five-color palette.
- Color Palette From ImageBuild a design palette from any photo or screenshot.
- Website Color Palette GeneratorTurn one brand color into a complete website palette: background, surface, border, text, muted text, primary, hover, link, on-primary and semantic success/warning/danger — for light or dark theme.
- Brand Color Palette GeneratorExpand a primary brand color into a working brand system: dark and light primary variants, a hue-shifted secondary, a contrasting accent and three brand-tinted neutrals.
- Accessible Color Palette GeneratorGenerate palettes where every color is fitted until it holds white or black text at your chosen WCAG level, with each measured ratio shown beside it.
- Dark Mode Palette GeneratorConvert an existing light-theme palette into dark-mode equivalents.
- Monochromatic Palette GeneratorBuild a one-hue palette from any base color: the base plus perceptually even shades toward black and tints toward white, blended in OKLab so the steps look uniform.
- Complementary Palette GeneratorGenerate a palette from two opposite hues.
- Analogous Palette GeneratorCreate palettes from neighbouring hues — the base plus the colors 30° either side on the wheel.
- Triadic Palette GeneratorGenerate three-hue palettes with hues spaced evenly 120° apart.
- Tetradic Palette GeneratorBuild four-hue palettes from two complementary pairs at 90° spacing — the richest of the classic harmonies and the hardest to balance.
- Split Complementary Palette GeneratorGenerate a base color plus the two hues flanking its complement (150° and 210° away).
- Pastel Color Palette GeneratorCreate pastel palettes that hang together: every color shares one high lightness and one low chroma in OKLCH, with hues spread evenly from your anchor color.
- Material-Style Palette GeneratorGenerate a Material-style tonal palette — thirteen tones from 0 (black) to 100 (white) — from any source color, approximated in OKLCH.
- Gradient Palette GeneratorTurn two colors into a discrete palette of evenly blended steps — 3 to 16 stops interpolated in OKLab, so the middle never goes muddy the way naive RGB blends do.
- Color Palette ExtractorExtract the dominant colors from an image with their pixel percentages.
- Palette SorterSort any list of colors by hue, lightness, chroma or WCAG luminance.
Frequently asked questions
How do I create a color palette from one brand color?
Use Palette Generator From HEX: enter your color and pick a recipe — balanced, soft analogous or high-contrast accent — and it derives five coordinated roles in OKLCH. For a full interface palette with background, text and state colors, use the Website Color Palette Generator instead.
Can I build a palette from a photo or screenshot?
Yes, two ways. Color Palette From Image curates a diverse, usable design palette; Color Palette Extractor reports the dominant colors with the percentage of pixels each covers. Both process the image locally in your browser — nothing is uploaded.
How many colors should a palette have?
Fewer than most people expect. Three to five core colors cover almost any interface once each is expanded into a shade ramp. Extra hues add coordination cost rather than information — generate generously, then promote only the colors that earn a role.
Are the generated palettes accessible?
Only the ones that say so. The Accessible Color Palette Generator and Accessible Color Pair Generator fit every color until it measurably meets your chosen WCAG level. Other generators optimize for coherence, so run their output through the Palette Contrast Matrix before using it for text.
Why do palettes generated in OKLCH look more consistent?
Because OKLCH lightness matches perception. In HSL, colors sharing a lightness number can look wildly different in brightness — yellow floats, blue sinks. Fixing lightness and chroma in OKLCH and varying only hue produces sets that genuinely read as one family.
Can I export palettes to my design system?
Every palette tool exports the same five ways: CSS custom properties, SCSS variables, JSON, Design Tokens Community Group draft tokens, and plain text. The DTCG JSON is the one to use for style-dictionary or Figma-adjacent token pipelines.
How do I make a dark mode version of an existing palette?
Paste your light-theme colors into the Dark Mode Palette Generator. It flips lightness in OKLCH — mirroring neutrals fully and brand colors partially — and damps chroma, because saturated colors that behave on white tend to vibrate on near-black. Re-check the result in the Contrast Matrix.
Palettes as engineering
A palette is a small system: colors related by deliberate rules, assigned to jobs, verified against requirements. The tools in this hub cover that lifecycle — generation from harmony geometry, derivation from seeds and brands, extraction from images, transformation for dark mode, and the specialized constructions (accessible-by-construction, CVD-safe, Material-style tonal, data-visualization) where requirements lead. Everything computes in OKLCH, which is why the outputs cohere without hand-tuning: equal lightness numbers that look equally light are the foundation palette work always needed.
Choose by starting material
From nothing: the Color Palette Generator’s mood envelopes, or Random Color for pure serendipity. From one color: Palette From HEX’s deterministic recipes, the Brand Palette’s eight roles, or the Website Palette’s twelve contrast-fitted UI slots. From theory: the harmony family — monochromatic through tetradic — each with its own page and its own personality. From an image: the curated Palette From Image or the census-taking Extractor, both strictly local. From an existing palette: the Sorter to reveal structure, Dark Mode to translate it, Shades & Tints to deepen it.
The verification pair
Two audits separate shippable palettes from pretty ones, and both live one link away throughout this hub: the Palette Contrast Matrix (which pairs can carry text, at which WCAG level — the readability audit) and the Color Blindness Simulator with its hardest-pair report (which members collapse together under CVD — the distinctness audit). The specialized generators internalize these checks — Accessible fits ratios during generation, Vision-Safe optimizes simulated distances — but hand-built and image-derived palettes should visit both before production.
From palette to product
Every generator exports the same five ways — CSS variables, SCSS, JSON, DTCG draft tokens, plain text — so the gap between “chosen” and “in the codebase” is one copy. The adjacent clusters continue the pipeline: the design-token tools structure palettes into semantic systems, the Tailwind pages speak that framework’s dialect, and the accessibility cluster holds the deeper measurement instruments. Palettes end up everywhere; this hub is where they start well.
