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.
- Color Palette Generator
Generate complete color palettes in one click — random, warm, cool, earthy, vibrant or pastel.
- Palette Generator From HEX
Turn one hex code into a full five-color palette.
- Color Palette From Image
Build a design palette from any photo or screenshot.
- Website Color Palette Generator
Turn 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 Generator
Expand 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 Generator
Generate palettes where every color is guaranteed to hold white or black text at your chosen WCAG level.
- Dark Mode Palette Generator
Convert an existing light-theme palette into dark-mode equivalents.
- Monochromatic Palette Generator
Build 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 Generator
Generate a palette from two opposite hues.
- Analogous Palette Generator
Create palettes from neighbouring hues — the base plus the colors 30° either side on the wheel.
- Triadic Palette Generator
Generate three-hue palettes with hues spaced evenly 120° apart.
- Tetradic Palette Generator
Build four-hue palettes from two complementary pairs at 90° spacing — the richest of the classic harmonies and the hardest to balance.
- Split Complementary Palette Generator
Generate a base color plus the two hues flanking its complement (150° and 210° away).
- Pastel Color Palette Generator
Create 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 Generator
Generate a Material-style tonal palette — thirteen tones from 0 (black) to 100 (white) — from any source color, approximated in OKLCH.
- Gradient Palette Generator
Turn 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 Extractor
Extract the dominant colors from an image with their pixel percentages.
- Palette Sorter
Sort any list of colors by hue, lightness, chroma or WCAG luminance.
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.
