Color Palette Generator

space to generate · lock · extract from image · WCAG · export — free, no signup

Press space to regenerate · drag a column to reorder · G for blend view · click a color name for its full breakdown.

02 · Accessibility lab

WCAG contrast for every color pair


—	Aa3.0 AA-L	Aa6.0 AA	Aa4.9 AA	Aa3.3 AA-L
Aa3.0 AA-L	—	Aa2.0 ✗	Aa1.6 ✗	Aa1.1 ✗
Aa6.0 AA	Aa2.0 ✗	—	Aa1.2 ✗	Aa1.9 ✗
Aa4.9 AA	Aa1.6 ✗	Aa1.2 ✗	—	Aa1.5 ✗
Aa3.3 AA-L	Aa1.1 ✗	Aa1.9 ✗	Aa1.5 ✗	—

AAA ≥ 7:1 · body textAA ≥ 4.5:1 · normal textAA-L ≥ 3:1 · large text / UI only✗ fails WCAG — don't pair for text

Palette intelligence

TemperatureWarm60% warm hues

Lightness spreadMedium43 points light-to-dark

SaturationVivid66% average

Strongest text pairing

Readable text6.0:1

Use this pair for body copy — it's the highest-contrast combination in your palette.

03 · Color readout

Every value, copy-ready

Name	RGB	HSL	CMYK	OKLCH
Charcoal	rgb(38, 70, 83)	hsl(197.3, 37.2%, 23.7%)	cmyk(54.2%, 15.7%, 0%, 67.5%)	oklch(37.5% 0.044 226.2)
Persian Green	rgb(42, 157, 143)	hsl(172.7, 57.8%, 39%)	cmyk(73.2%, 0%, 8.9%, 38.4%)	oklch(63% 0.101 183)
Hansa Yellow	rgb(233, 196, 106)	hsl(42.5, 74.3%, 66.5%)	cmyk(0%, 15.9%, 54.5%, 8.6%)	oklch(83.4% 0.117 87.4)
Sandy Brown	rgb(244, 162, 97)	hsl(26.5, 87%, 66.9%)	cmyk(0%, 33.6%, 60.2%, 4.3%)	oklch(78.1% 0.127 57.9)
Burnt Sienna	rgb(231, 111, 81)	hsl(12, 75.8%, 61.2%)	cmyk(0%, 51.9%, 64.9%, 9.4%)	oklch(67.8% 0.156 35.2)

04 · See it in context

A live UI mock from your palette

Aurora

ProductPricingAbout

Design with colors
that just work.

This entire card is painted with your generated palette — background, text, surface and accent, doing real interface jobs.

Surface card

Secondary content sits on a third tone.

Enter colors manually

Charcoal

Persian Green

Hansa Yellow

Sandy Brown

Burnt Sienna

Type or pick any HEX. Locked colors survive every shuffle.

05 · Gradient studio

Turn your palette into a CSS gradient

Angle90°

background: linear-gradient(90deg, #264653, #2a9d8f, #e9c46a, #f4a261, #e76f51);

06 · Need a starting point?

Load a trending palette

Browse the full palettes library →

Field notes

How to generate a color palette that actually works

The fastest way to a good color scheme isn't to pick five colors at once — it's to anchor and iterate. Find one color you love, lock it, then keep pressing space. Each press regenerates only the unlocked slots, so you're exploring the space around a fixed point rather than starting from scratch. Already have a brand color? Use From color to build the whole harmony around it, or From image to extract a palette straight from a photo, screenshot or moodboard — the generator quantizes the image in your browser and pulls its dominant colors. Made a wrong turn? Undo walks you straight back, and every shuffle lands in the Recent generations shelf so nothing is ever lost.

The harmony mode decides the math behind each shuffle. Analogous keeps every color within a slice of the wheel for calm, cohesive looks; complementary, split-complementary and triadic introduce opposing hues for contrast and energy; monochrome holds the hue steady and varies only lightness. Auto blends these heuristics with curated irregularity so results feel designed rather than mechanical. The global Adjust panel then lets you rotate hue, push saturation or shift brightness across the entire set at once — perfect for warming up or muting a palette without rebuilding it.

Beautiful isn't enough — a website color scheme has to be accessible. The contrast matrix below the generator scores every text-on-background pair in your palette against WCAG AA and AAA, so you know before you ship whether your button label reads. Flip the vision simulator to protanopia, deuteranopia or tritanopia to preview how roughly 8% of men experience your colors — if two swatches collapse into one, add a lightness difference, not just a hue difference. The 60-30-10 rule is a reliable spread: a dominant neutral (~60%), a supporting mid-tone (~30%) and one saturated accent (~10%) for calls-to-action.

When you've got the colors, the work is just beginning. Your palette is encoded in the page URL, so you can bookmark or share it as-is — and Save keeps a private shelf on your device. Export drops it straight into your stack: CSS custom properties, SCSS variables, a Tailwind config block, W3C design tokens, a CSS gradient, or a PNG/SVG image for a brand deck. Then expand your primary into a full 50–950 ramp with the Tailwind generator, or stress-test a specific pair in the contrast checker. A palette is a starting chord; a scale is the whole instrument.

Deep-dive these colors — every hex has a full page

#2a9d8f #264653 #e9c46a #f4a261 #e76f51

Color Palette Generator FAQs

How does the color palette generator work?

Press the Generate button or hit the spacebar and the tool builds a fresh color palette using real color-theory math. Each press recalculates only the colors you haven't locked, so you can keep a color you love and shuffle the rest around it. Switch the harmony mode (auto, analogous, complementary, split-complementary, triadic, tetradic, monochrome or random) to change the math behind each shuffle. You can also seed the generator from your exact brand color, extract a palette from an uploaded image, or start from a trending palette. Every color shows its name and HEX; open any color for RGB, HSL, CMYK, OKLCH, LAB and LCH values plus tints, shades and tones. Everything runs instantly in your browser — no signup, no upload to a server.

Can I generate a color palette from an image?

Yes — click 'From image' and choose any photo, logo, screenshot or moodboard. The generator downsamples the image on an in-browser canvas, quantizes the pixels, and extracts the dominant colors as a ready-made palette, sorted dark to light. Nothing is uploaded: the extraction happens entirely on your device. It's the fastest way to turn a photograph or brand asset into a usable website color scheme — extract first, then lock the colors you want to keep and press space to regenerate the rest into a cleaner harmony.

How do I build a color scheme around my brand color?

Click 'From color', enter or pick your exact brand HEX, choose a harmony mode, and hit 'Generate from this color'. Your brand color stays untouched in slot #1 while the tool derives analogous, complementary, split-complementary, triadic, tetradic or monochrome companions around its hue with designer-balanced saturation and lightness curves. Then lock the results you like and keep shuffling the rest, or fine-tune any slot with its own hue/saturation/lightness sliders. It's the correct way to extend one mandated color into a full, coherent palette.

What does locking a color do?

Locking pins a color so the spacebar/Generate action won't change it. This is the core workflow of a great palette: find one color you like, lock it, then keep generating to discover colors that harmonize with it. Lock a second, generate again, and you converge on a balanced set fast. Click the padlock on any column (or in the manual-entry panel) to toggle it. Unlocked colors are replaced on every shuffle; locked colors persist even if you change the harmony mode, reorder, or use undo/redo.

How do I check if my color palette is accessible (WCAG)?

The built-in accessibility lab computes the WCAG contrast ratio for every text-on-background pair in your palette and grades each one: AAA (≥7:1, ideal for body text), AA (≥4.5:1, the standard for normal text), AA-L (≥3:1, large text and UI components only) or fail. The 'strongest text pairing' card highlights the most readable combination automatically. There's also a color-blindness simulator — flip the eye menu to protanopia, deuteranopia, tritanopia or grayscale to preview how users with color-vision deficiency see your palette. If two colors merge in simulation, separate them by lightness, not just hue.

Which color harmony mode should I use?

Use Analogous for calm, cohesive palettes where every color sits near the same part of the wheel (nature, wellness, minimalist brands). Use Complementary, Split-Complementary or Triadic when you want contrast and energy from opposing hues (sports, kids, bold marketing). Tetradic gives you two complementary pairs for rich editorial schemes. Monochrome holds one hue and varies only lightness for refined single-color systems. Auto blends these heuristics with curated irregularity so the result looks intentionally designed, and Random is pure exploration. The global Adjust panel then rotates hue or shifts saturation and brightness across all colors at once.

What export formats are supported?

One click copies your palette as a HEX list, CSS custom properties (:root variables), SCSS variables, a ready-to-paste Tailwind CSS config block, W3C design tokens JSON, or a CSS gradient — each variable is auto-named after its nearest color name. You can also download the palette as a high-resolution PNG or a crisp SVG poster with hex codes and color names, perfect for brand guidelines and mood boards. And because the palette is encoded in the page URL, the share link itself is an export: paste it in Slack and your teammate opens the exact same colors.

How do I save or share a palette?

Three ways. First, the URL: your palette is live-encoded in the address bar, so copying the link or bookmarking the page saves the exact colors. Second, the Save button (or the S key) keeps a private shelf of up to 24 palettes in your browser's local storage — no account needed, and they reappear on your next visit. Third, the history shelf records your last 12 generations automatically, so a palette you shuffled past is never lost — click any mini strip to restore it, and undo/redo (Ctrl+Z) steps through every individual change.

What makes a good website color scheme?

A buildable palette usually spans a wide lightness range: one deep near-black for text, one near-white for backgrounds, one or two mid-tones for surfaces and borders, and one saturated accent for calls-to-action. Apply the 60-30-10 rule — about 60% dominant neutral, 30% supporting tone, 10% accent. Hue relationships create the mood, but the lightness spread is what makes a palette work as an interface; the Palette Intelligence card grades your spread, temperature and saturation, and the live UI mock shows your colors doing real jobs before you commit. Aim for at least one AA-passing text pair in the contrast matrix.

Is this color palette generator free? Do I need an account?

Completely free, no account, no watermarks, no export limits. The generator runs 100% in your browser — palettes are never uploaded to a server, image extraction happens locally, and saved palettes live in your own device's storage. It works on desktop and mobile (columns stack into rows on small screens), supports keyboard shortcuts (space, S, G, F, Ctrl+Z), and once the page has loaded it keeps working offline. It's a full-featured alternative to Coolors, Adobe Color and Paletton with zero paywall.

Have more questions? Contact us

Loved by Designers & Developers

4.9

Based on 5,120 reviews

“The lock-and-shuffle flow is exactly right, and the contrast matrix is the killer feature — I can see every WCAG pair before I ship instead of checking combinations one by one. The colorblind simulator caught two swatches that merged for deuteranopia. Export to Tailwind config drops straight into our repo.”

Mara Lindqvist

Product designer

July 2, 2026

“Extracted a palette from our hero photo, locked the two keepers, and spaced my way to a full scheme in two minutes. Color names on every swatch, drag to reorder, palette living in the URL for Slack — these details matter. SCSS, tokens JSON, PNG poster: every export I've ever needed is just there.”

Devon Acharya

Front-end engineer

June 21, 2026

“'From color' is how brand work should start — client's mandated HEX goes in slot one and the tool builds real harmonies around it. The gradient studio turned our palette into the site header background on the spot, and the saved-palettes shelf means I stop losing explorations between sessions.”

Priya Nair

Brand designer

May 14, 2026

“Spacebar generation is addictive, and the history strip means shuffling is fearless — anything I blow past is one click back. Palette intelligence told me my spread was too narrow for UI, added a dark, contrast matrix went green. Shipped my landing page colors in an evening, zero signup.”

Tom Fielding

Indie hacker

March 9, 2026

Your rating powers this tool’s public score — new reviews appear right here.

Connected instruments

Related color tools

Similar Calculators

More tools in the same category

Image Color Picker

A pixel-accurate eyedropper with a live magnifier — pick exact colors from any photo, point by point. In-browser, never uploaded.

Color Palettes

Browse a curated library of trending color palettes, filter by mood, search by hex, copy any color or open it in the generator.

Color Contrast Checker

Check text/background pairs against WCAG AA/AAA with a live preview at every size, UI badges and a one-click fix to pass.

Tailwind Color Generator

Turn any hex into a full Tailwind 50–950 shade scale with nearest-default match and v4 @theme, config or CSS export.

Multi-Format Color Converter

HEX, RGB, HSL, CMYK, LAB, LCH and OKLCH at once, live — with WCAG contrast, luminance and a tint/shade ramp.

Accessibility Color Checker

Test text/background pairs against WCAG AA/AAA contrast, with a one-click OKLCH fix and color-blind-aware guidance.

Often Used Together

Complementary tools for complete analysis

Google Fonts Pairing Generator

Website Font Pairing Engine

Academic Research Paper Checker

YouTube Subtitle Optimizer

From the blog

Keep reading, keep winning.

Pinboard · 0 picks

Browse all articles

space to generate · lock · from image · from brand color · contrast matrix · colorblind preview · gradient studio · save · PNG/SVG/Tailwind export · Last reviewed: 2026-07