AnyTool
Your files never leave your device. All processing happens locally in your browser.

How do I generate a colour-theory palette from one base colour?

Open the Advanced Color Palette tool, pick a base colour (hex, RGB, HSL or OKLCH), then choose a harmony — complementary, analogous, triadic, tetradic, square, split-complementary or monochromatic. It rotates your hue on the colour wheel in perceptual OKLCH to build the palette, shows tints/shades/tones and WCAG contrast, and exports CSS, Tailwind, SCSS, JSON, a GIMP .gpl or a PNG — all in your browser, nothing uploaded.

  • Pick any base colour; accepts hex, rgb(), hsl() or oklch()
  • Seven classic harmonies plotted on a live colour wheel
  • Per-colour tints (→white), shades (→black) and tones (→grey)
  • Lock swatches and press Space to shuffle the rest
  • WCAG best-text contrast + a colour-blindness preview
  • Export CSS vars, Tailwind, SCSS, JSON, GIMP .gpl or a PNG swatch sheet

What is

Colour Harmony Palette Generator

A colour harmony palette generator derives a set of related colours from a single base colour using colour-theory rules that rotate hue on the colour wheel — complementary (180°), analogous (±30°), triadic (120°), tetradic/square (rectangle or 90°), split-complementary (±150°) and monochromatic (one hue, varied lightness). A perceptual generator does this in OKLCH so hue rotations and lightness steps look as even as they measure, then clamps back into sRGB for honest hex values. A client-side one computes everything in the browser, so no colour or setting is uploaded.

Design

Related terms

colour harmonycolour wheelcomplementary coloursanalogoustriadictetradicsplit-complementarymonochromaticOKLCHtints shades tonesWCAG contrastcolour blindnessTailwind coloursGIMP paletteCoolors alternative

Frequently Asked Questions

No. Your base colour and settings are just numbers held in the page, and the whole palette — harmonies, tint/shade/tone ramps, contrast ratios and every export string — is computed locally with the culori library. Nothing is uploaded, and there is no server or CDN. Saved palettes stay only in this browser.

The Advanced Color Palette tool is 100% client-side. When you pick a base colour and a harmony, a pure engine rotates the hue in perceptual OKLCH, builds the tints, shades and tones, computes WCAG contrast and the colour-blindness preview, and generates the CSS / Tailwind / SCSS / JSON / GIMP / PNG exports — all on your device. None of these steps upload anything, call a server or fetch from a CDN. Palettes you choose to save are written to this browser’s localStorage only; they never sync anywhere. The tool works offline once cached, keeps no accounts and sets no tracking, and closing the tab discards everything except what you explicitly saved.

Complementary uses two colours opposite on the wheel (180° apart) for maximum contrast. Triadic uses three colours evenly spaced 120° apart for a vibrant, balanced look. Analogous uses neighbours on the wheel (about ±30°) for a calm, unified feel. This tool also offers tetradic, square, split-complementary and monochromatic.

These are classic colour-theory harmonies defined by how far apart the hues sit on the colour wheel. Complementary picks the base and its opposite (180°) for the highest contrast; split-complementary softens that by using the two hues either side of the opposite (±150°). Triadic spaces three hues 120° apart for a bold but balanced scheme, while tetradic (a rectangle of two complementary pairs) and square (four hues 90° apart) give richer, more varied palettes. Analogous keeps hues close together (±30°) for a serene, cohesive result, and monochromatic uses a single hue with varying lightness. This tool computes all of them in perceptual OKLCH and plots each hue on a live wheel so you can see the relationships, then lets you tune count, saturation and lightness.

Not on its own. WCAG contrast is necessary but not sufficient: a palette can pass every ratio and still be unusable if meaning is carried by colour alone. Always pair colour with text labels, icons or patterns, and use the colour-blindness preview to spot risky combinations — but treat it as an approximation, not a medical test.

WCAG contrast ratios measure the luminance difference between a foreground and background for typical (trichromatic) vision, and meeting them is essential for legible text. But contrast alone does not guarantee accessibility: a red/green status system can pass contrast checks yet be indistinguishable to someone with deuteranopia. That is why this tool shows both the best-contrast text colour with its ratio and a colour-blindness preview (using the Viénot–Brettel–Mollon and Brettel matrices) so you can catch colour pairs that collapse for protan, deutan, tritan or achromatopsia viewers. The simulation is a published approximation of perception on an uncalibrated sRGB screen, not a medical assessment, so use it to flag problems and always add a non-colour cue — a label, icon, shape or pattern — and test with real users.

You can copy each colour as hex, RGB, HSL or OKLCH, and export the whole palette as CSS custom properties, a Tailwind colour config, SCSS variables, JSON, a GIMP/Inkscape .gpl file or a PNG swatch sheet. Everything is generated locally and copies to your clipboard or downloads as a file.

The tool exports in the formats designers and developers actually use. Per colour you can copy hex, rgb(), hsl() or oklch(). For the whole palette you can copy CSS custom properties (:root variables), a Tailwind theme.extend.colors snippet, SCSS variables and JSON (with each colour’s hex, RGB, HSL, OKLCH and nearest CSS name). You can also download a GIMP/Inkscape .gpl palette file to load straight into those apps, and a PNG swatch sheet (rendered locally by drawing an SVG onto a canvas) for sharing or moodboards. All exports are built as strings in the browser, so nothing is uploaded; the PNG and .gpl download as files while the code snippets copy to your clipboard.

Detailed Explanation

How It Works

What the Advanced Color Palette Does

The Advanced Color Palette turns a single base colour into a full colour-theory palette, entirely in the browser. Pick a base (hex, RGB, HSL or OKLCH) and a harmony — complementary, analogous, triadic, tetradic (rectangle), square, split-complementary or monochromatic — and the tool rotates your hue on the colour wheel to build the scheme, with a live wheel showing where each hue sits. Every swatch shows hex / RGB / HSL / OKLCH, its nearest CSS colour name, a light-to-dark ramp with tints, shades and tones, the best-contrast text colour (WCAG) and a colour-blindness preview. Lock the colours you like, press Space to shuffle the rest, nudge count, saturation and lightness, and export to CSS, Tailwind, SCSS, JSON, a GIMP .gpl file or a PNG swatch sheet.

  • Seven classic harmonies from any base colour
  • Live colour wheel marks where each hue sits
  • Per-colour hex / RGB / HSL / OKLCH, nearest name, tints/shades/tones
  • WCAG best-text contrast + colour-blindness preview
  • Lock & shuffle; export CSS / Tailwind / SCSS / JSON / GIMP / PNG
Methodology

Method: Perceptual OKLCH Harmony Rotation

Harmonies are generated in OKLCH, a perceptually-uniform colour space, so a 120° triadic rotation or a lightness step looks as even to the eye as it measures — unlike raw HSL, where equal changes can look lopsided. The engine reads the base colour’s OKLCH lightness, chroma and hue, rotates the hue by each harmony’s offsets, fills any extra slots with perceptual tint/shade variations, applies your saturation and lightness nudges, then clamps every result back into the sRGB gamut so the hex values are honest on standard displays. Tints mix toward white, shades toward black and tones toward same-lightness grey, all interpolated in OKLab.

  • Hue rotated in OKLCH, not HSL, for perceptual evenness
  • Offsets: complementary 180°, triadic 120°, square 90°, split ±150°
  • Extra slots become perceptual tints/shades of the harmony hues
  • Results clamped back into sRGB for honest hex readouts
  • Tints/shades/tones interpolated in OKLab (white / black / grey)
Technical Details

WCAG Contrast & Colour-Blindness Math

For each swatch the tool computes the WCAG 2.x relative luminance (linearise sRGB, then L = 0.2126·R + 0.7152·G + 0.0722·B) and the contrast ratio (L₁+0.05)/(L₂+0.05), picking whichever of black or white text gives the higher ratio and grading it AA / AAA. The colour-blindness preview transforms each colour in LINEAR-light RGB using the Viénot–Brettel–Mollon 1999 single-matrix model for protanopia and deuteranopia and a Brettel matrix for tritanopia, with achromatopsia as a Rec.709 luma collapse — the correct decode → matrix → encode pipeline. The nearest CSS colour name is found by smallest ΔE in OKLab.

  • WCAG relative luminance on linearised sRGB; ratio 1:1–21:1
  • Best text colour = higher of black-vs-white contrast, graded AA/AAA
  • CVD simulated in linear RGB (Viénot–Brettel–Mollon / Brettel)
  • Achromatopsia = Rec.709 luma; ΔE-nearest CSS name in OKLab
  • All math via the culori library, computed locally
Limitations

Honest Limitations

Colour harmonies are theory-based starting points, not guaranteed-beautiful results — a triadic or tetradic scheme can still clash, and taste, context, brand and content decide the final palette. All colours are shown in sRGB on an uncalibrated screen, so they will differ across displays, browsers and print. The colour-blindness preview is a published approximation of perception, useful for catching risky pairs but NOT a medical assessment or a substitute for testing with real users. WCAG contrast is necessary but not sufficient: a palette can pass every ratio and still be unusable if meaning is carried by colour alone, so always add text, icons or patterns. The best-text readout only compares pure black vs white, so verify your real type sizes and weights.

  • Harmonies are starting points, not guaranteed-good palettes
  • sRGB on an uncalibrated screen; colours vary by device and print
  • Colour-blindness preview is an approximation, not a medical test
  • WCAG pass ≠ accessible — never rely on colour alone
  • Best-text check compares only black vs white
Privacy & Security

Private by Design

The Advanced Color Palette is 100% client-side. Your base colour and settings are just numbers held in the page, and the whole palette — harmony rotation, tint/shade/tone ramps, WCAG contrast, the colour-blindness preview and every export string — is computed locally with the culori library. Nothing is uploaded, no server or CDN is involved, and the PNG swatch sheet is drawn on an in-page canvas. Palettes you save are written to this browser’s localStorage only and never sync anywhere. The tool works offline once cached, keeps no accounts, sets no tracking, and discards everything except your saved palettes when the tab closes; the only optional network use is consent-gated ads.

  • All colour math runs in the browser with culori
  • No upload, no server, no CDN
  • PNG rendered on an in-page canvas; exports built as local strings
  • Saved palettes live in localStorage only; nothing syncs
  • Works offline once cached; no accounts, no tracking
Ways to build a colour palette from a base colour
ApproachHow it worksTrade-offUsed here
Client-side OKLCH generator (this tool)Rotate hue in perceptual OKLCH + accessibility checks, locallyPrivate, offline, perceptually even; harmonies are starting pointsYes
Online palette generatorCloud service builds and stores palettesCommunity palettes, but network and possible accounts/trackingNo
HSL-only colour wheelRotate hue in raw HSLSimple, but equal steps can look perceptually lopsidedNo
Manual eyedropper / by eyeHand-pick each colourFull control, but slow and easy to get unevenNo

All harmony, contrast and export math here runs in the browser via culori. As of July 2026.