Color Palette Generator

How do I generate a colour palette online?

Open AnyTool Color Palette Generator, pick a harmony rule (complementary, analogous, triadic, tetradic, split-complementary or monochromatic) and an optional base colour, and a matching scheme appears instantly. Lock the colours you like, hit Randomize to refill the rest, click any swatch to copy its hex, then export the palette as CSS variables, SCSS, a Tailwind snippet, JSON, a hex list, SVG or PNG. A WCAG contrast readout flags AA/AAA. Everything runs in your browser — nothing is uploaded.

7 colour-theory harmonies plus free random, anchored to any base colour
Lock favourite colours — Randomize only refills the unlocked slots
Click-to-copy hex, plus a shades + tints ramp for every colour
Export to CSS, SCSS, Tailwind, JSON, hex list, SVG or PNG
Live WCAG contrast (AA/AAA) readout · 100% in your browser, nothing uploaded

What is

Colour Harmony

Colour harmony is a set of colour-wheel relationships used to pick palettes that feel coherent. Complementary colours sit opposite each other (180°) for high contrast; analogous colours are neighbours (±30°) for a calm, unified look; triadic uses three hues 120° apart; tetradic uses four hues 90° apart; split-complementary pairs a base with the two hues beside its opposite; and monochromatic varies the lightness of a single hue. They are useful starting points rather than strict rules.

Generators

Related terms

Complementary coloursAnalogous coloursTriadic paletteWCAG contrast ratioHSL colour model

Frequently Asked Questions

A complementary scheme pairs a base colour with the hue directly across the colour wheel — roughly 180° away — which produces strong, energetic contrast that is great for calls to action but can feel jarring if overused. An analogous scheme instead uses colours that sit next to each other on the wheel, within about thirty degrees, so they share visual DNA and read as calm and cohesive. AnyTool lets you switch between these and other harmonies instantly and varies lightness and saturation across the slots so the palette stays varied rather than flat.

Complementary colours sit opposite on the wheel (about 180° apart) for high contrast; analogous colours are neighbours (within ±30°) for a calm, unified look.

Each colour in the strip has a lock toggle. When you lock a swatch and then click Randomize, the generator copies the locked colours over verbatim and only refills the unlocked slots, keeping the chosen harmony. If you have not set a base colour, the first locked colour seeds the harmony, so locking is also a quick way to anchor a scheme around a brand colour you already have.

Lock it. Click the lock icon on a swatch, then press Randomize — only the unlocked colours are regenerated while the locked ones stay put.

The tool includes a live accessibility readout that uses the standard WCAG contrast formula to compute each colour’s ratio against pure white, pure black and the adjacent swatch in the strip. It flags whether each pairing meets AA (4.5:1 for normal text), AAA (7:1) or only the 3:1 large-text/UI threshold, so you can catch unreadable text-on-background combinations before you ship. Harmony rules are only a starting point, so checking real contrast is the part that actually protects readers.

Yes — it shows each colour’s WCAG contrast against white, black and the next swatch, with AA, AAA and large-text flags.

AnyTool Color Palette Generator is completely free with no account required. All of the work — the harmony maths, the shades and tints, the WCAG contrast checks and every export format — runs locally in your browser using the culori colour library. Nothing is sent to a server, logged or stored, and the page keeps working offline after the first load.

Yes — it is free with no signup, and every palette is generated in your browser. No colour or file is ever uploaded.

Generate harmonious colour palettes from colour-theory rules with lock-and-randomize, shades/tints, WCAG contrast checks and CSS/SCSS/Tailwind/JSON export — entirely in your browser, nothing uploaded.

Features

7 harmonies: complementary, analogous, triadic, tetradic, split-complementary, monochromatic, random
Lock colours and randomize only the unlocked slots
Click-to-copy hex plus a shades + tints ramp per colour
WCAG contrast readout with AA / AAA / large-text flags
Export CSS, SCSS, Tailwind, JSON, hex list, SVG and PNG — 100% client-side

PriceFree

CategoryGenerator

PlatformAll (browser-based)

PrivacyPalettes are generated locally and never leave your device

Input: Base colour (hex) — optional, Harmony rule, Colour count

Output: CSS variables, SCSS, Tailwind config, JSON, Hex list, SVG, PNG

Detailed Explanation

Methodology

How the Palette Generator Builds Colour Schemes

AnyTool Color Palette Generator derives a palette from classic colour-wheel harmonies, all computed in the browser with the culori colour library. From an optional base colour it rotates hue by each harmony’s fixed offsets — complementary at 180°, analogous at ±15–30°, triadic at 120°, tetradic (square) at 90°, split-complementary at ±150°, and monochromatic at a single hue — and then nudges lightness and saturation across the extra slots so a two-hue scheme still reads as a varied, usable palette rather than two flat blocks. A free "random" mode spreads pleasant hues evenly with small jitter. Every colour is described with hex, rgb() and hsl() strings plus a five-step shades-and-tints ramp.

Seven modes: complementary, analogous, triadic, tetradic, split-complementary, monochromatic, random
Hue rotates by each harmony’s offsets; lightness/saturation vary across extra slots
Optional base colour anchors the scheme; otherwise a base is chosen for you
Each colour exposes hex, rgb() and hsl() plus a 5-step shades + tints ramp
All colour maths run client-side via the culori library — no server

Technical Details

Locking, Randomizing and Exporting

Each colour can be locked, after which the "Randomize" action copies the locked colours over verbatim and refills only the unlocked slots while keeping the chosen harmony — and if no base colour is set, the first locked colour seeds the scheme. Colours and every step of their shade/tint ramp are click-to-copy. The whole palette exports without leaving the browser as CSS custom properties (:root variables), SCSS variables, a Tailwind theme.extend.colors snippet, JSON (with rgb/hsl and ramps), a plain hex list, a standalone SVG swatch sheet, or a PNG rasterised on an offscreen canvas.

Lock colours so Randomize only changes the unlocked ones
First locked colour can seed the harmony when no base is set
Click any swatch — or any shade/tint — to copy its hex
Exports: CSS variables, SCSS, Tailwind config, JSON, hex list, SVG, PNG
PNG is rasterised locally from the SVG on a canvas — nothing uploaded

Limitations

Accessibility and the Limits of Harmony Rules

A built-in accessibility readout uses culori’s WCAG contrast to report each colour’s ratio against pure white, pure black and the next swatch, flagging whether each pairing clears AA (4.5:1 for normal text), AAA (7:1) or only the 3:1 large-text/UI threshold. The tool is explicit that colour-wheel harmonies are heuristics, not strict laws: a technically "correct" harmony can still look flat or fail contrast, and many strong palettes break the rules. The honest guidance is to treat the generated scheme as a starting point and always verify real text-on-background contrast before shipping. Because everything runs in the browser, no colour, image or file is uploaded, logged or stored, and the page works offline once cached.

Colour palette generation: in-browser (AnyTool) vs typical online generators
Capability	AnyTool	Typical online generators
Harmony rules	7 (complementary…monochromatic + random)	Often 2–4
Processing	Runs in your browser (culori)	Often server-side
Lock & randomize	Yes — refills only unlocked slots	Sometimes
Shades & tints	Per-colour ramp, click-to-copy	Rare
Accessibility	WCAG AA/AAA vs white, black & next swatch	Usually none
Export formats	CSS, SCSS, Tailwind, JSON, hex, SVG, PNG	Often hex/CSS only
Privacy	Never uploaded, not stored, works offline	May transmit or log
Cost / signup	Free, no signup	Often gated or ad-heavy

AnyTool generates every palette locally with the culori colour library and uploads nothing.

Cite This Page

Title: Color Palette Generator (colour-theory harmonies with lock, shades/tints, WCAG contrast & CSS/SCSS/Tailwind export)
Author: AnyTool
Published: January 1, 2026
Modified: February 8, 2026
Section: Generators
URL: https://www.anytool.tech/color-palette-generator

Formatted Citation

AnyTool. "Color Palette Generator (colour-theory harmonies with lock, shades/tints, WCAG contrast & CSS/SCSS/Tailwind export)." AnyTool, January 1, 2026. https://www.anytool.tech/color-palette-generator

A privacy-first, 100% client-side colour palette generator built on the culori colour library. From an optional base colour it derives schemes using classic colour-wheel harmonies — complementary (180°), analogous (±30°), triadic (120°), tetradic/square (90°), split-complementary (±150°) and monochromatic — plus a free random mode, varying lightness and saturation so extra slots stay distinct. Colours can be locked so a "Randomize" refills only the unlocked slots; each colour is click-to-copy and carries a five-step shades-and-tints ramp, rgb() and hsl() values. A WCAG contrast readout flags AA, AAA and large-text thresholds against white, black and the adjacent swatch, and the palette exports to CSS custom properties, SCSS, a Tailwind config snippet, JSON, a hex list, an SVG sheet and a PNG. The tool is explicit that harmony rules are starting points rather than strict laws and that real text contrast should always be checked. Everything runs in the browser without uploading, logging or storing anything, and works offline once cached.