Free Color Palette Generator
HEX / RGB / HSL Converter
Spacebar-powered palette generation, WCAG contrast checking, in-browser image colour extraction, and one-click Tailwind / CSS export. No sign-up. No paywall. No ads. Just instant, beautiful colour.
WCAG Contrast Checker
Test any text-on-background combination against real WCAG 2.1 accessibility thresholds.
Image Palette Extractor
Drop any image — a photo, UI screenshot, or brand asset — and we'll extract its dominant colours instantly, right in your browser.
Everything Coolors charges for. Free. Forever.
We rebuilt the palette workflow from scratch for speed-obsessed product teams — no accounts, no banners, no artificial limits.
Instant keyboard engine
Tap Space anywhere on the page for a fresh harmonious palette. Lock the swatches you love with 1–5 and shuffle the rest.
WCAG accessibility built in
Live AA / AAA contrast scoring on every pairing. Ship interfaces that are readable for everyone — not just on your calibrated monitor.
Zero login walls
No account, no email capture, no "sign up to save" modal after three palettes. Everything runs client-side and your work never leaves the tab.
Developer-grade export
One click to CSS variables, Tailwind config, SCSS maps, JSON tokens, or a share-ready PNG. Plus a permalink that restores the exact palette.
How to build a palette in 4 steps
From blank canvas to production-ready design tokens in under thirty seconds.
Generate
Hit the Space bar or click Generate. We cycle through analogous, complementary, triad, split-complementary, tetradic and monochrome algorithms.
Lock what works
Found the perfect brand blue? Press 1–5 or click the padlock to freeze that swatch while the rest keep shuffling.
Check contrast
Feed your text and background colours into the WCAG checker. Aim for 4.5:1 for body copy and 3:1 for large headings.
Export & ship
Open the Export drawer for CSS variables, Tailwind config, SCSS or JSON. Or copy the permalink to share the exact palette with your team.
ToolGuest vs. Coolors
Same core idea. Radically less friction. Here's the honest breakdown.
| Capability | ◆ ToolGuest | Coolors |
|---|---|---|
| Palette generation | ✓ Unlimited, instant | • Rate-limited before prompting |
| Saving palettes | ✓ Permalinks + local storage, free | ✕ Paywalled / account required |
| Login wall | ✓ None, ever | ✕ Interruptive sign-up modals |
| Advertising | ✓ Zero ads | ✕ Banner & display ads |
| Image colour extraction | ✓ Free, drag & drop | • Limited on free tier |
| WCAG contrast checker | ✓ Live AA / AAA scoring | • Partial, buried in UI |
| Tailwind export | ✓ Native, one click | ✕ Not offered |
| Page weight / speed | ✓ ~0 network calls, <50ms | ✕ Heavy JS + ad scripts |
Frequently asked questions
Colour theory, conversion math, and accessibility thresholds — explained.
Harmony comes from predictable relationships on the colour wheel. Analogous palettes use hues within 30–60° of each other for calm, cohesive moods. Complementary palettes pair hues 180° apart for maximum tension and contrast. Triadic and tetradic schemes space hues evenly (120° / 90°) for vibrant, balanced variety. Our generator combines one of these hue relationships with a controlled lightness ladder, so palettes stay usable across UI surfaces — not just pretty swatches.
A HEX code is just three base-16 byte values: #3B82F6 becomes R=0x3B (59), G=0x82 (130), B=0xF6 (246). RGB is that same triplet in decimal. To reach HSL, normalize each channel to 0–1, compute the max and min, then derive lightness as the midpoint, saturation from the delta, and hue from which channel dominated. Every conversion in this tool runs that math locally in under a millisecond — no server round trip, no rounding drift.
WCAG 2.1 sets four thresholds. For normal body text you need 4.5:1 for AA and 7:1 for AAA. For large text — 18pt regular or 14pt bold and above — the bar drops to 3:1 for AA and 4.5:1 for AAA. The ratio is calculated from relative luminance, which linearizes each sRGB channel before weighting it (0.2126 R + 0.7152 G + 0.0722 B). Our checker updates all four grades in real time as you adjust either colour.
Never. This entire tool is a single static page executing in your browser. Image extraction works by drawing your file onto an offscreen HTML canvas and reading pixels with getImageData — the file never leaves your device and never touches a network socket. Palettes are stored in your browser's local storage and shareable links encode colours directly into the URL hash, so there's no backend database at all.
Yes, without restriction. Colours themselves aren't copyrightable, and everything generated here is produced by a mathematical algorithm on your machine — not copied from a licensed library. Use them in client work, commercial products, brand systems, or printed collateral. No attribution required, though a link back is always appreciated.
Colour palette generator with HEX, RGB and WCAG contrast checks
A colour palette is the backbone of a brand. Get it right and every screen, poster and slide feels like it belongs together. Get it wrong and the same assets look like they came from five different companies. A colour palette generator removes the guesswork by producing harmonious sets of colours from a single press, and by checking that the text on top of them is actually readable.
This free generator creates balanced palettes with the spacebar, extracts a colour scheme from an uploaded image, and checks every pairing against WCAG contrast rules. Each colour is shown in HEX and RGB, ready to copy, and the whole palette can be exported as CSS custom properties, a Tailwind config or a JSON file.
Everything runs in your browser. Images you upload for extraction are read locally and never transmitted, so client brand assets and unreleased designs stay private.
A colour palette generator creates harmonious colour schemes and checks WCAG contrast. ToolGuest generates palettes with the spacebar, extracts colours from images, shows HEX and RGB values, and exports CSS, Tailwind or JSON, running entirely in the browser, free and private.
Why harmony and contrast are the two jobs that matter
Harmony is what makes a set of colours feel intentional. Colours chosen at random clash, while colours drawn from a consistent relationship on the colour wheel sit together comfortably. Generating from a scheme such as analogous, complementary or triadic gives you combinations that look designed rather than accidental.
Contrast is what makes a palette usable. A beautiful pairing that fails the WCAG contrast ratio is inaccessible to readers with low vision and uncomfortable for everyone else. Checking contrast as you build, rather than after launch, prevents a redesign later and widens your audience immediately.
Export format saves the handoff. A palette locked inside a screenshot must be retyped into code. Exporting the same colours as CSS variables, a Tailwind theme or JSON means the design and the code stay in sync from the first commit.
Spacebar generation
Press the spacebar to generate a fresh harmonious palette instantly, with locked colours kept in place.
Extract from images
Drop in a photo or logo and pull a matching palette straight from its colours, read locally.
WCAG contrast checking
Every pairing is scored against accessibility contrast rules so your text stays readable.
HEX and RGB values
Each swatch shows its HEX and RGB values, ready to copy with a single click.
CSS, Tailwind and JSON export
Export the palette as CSS custom properties, a Tailwind config or JSON for your build.
100% client-side
Generation and image extraction happen in your browser. Nothing is uploaded or stored.
ToolGuest vs. legacy palette tools
Harmony, accessibility and export in one place, without the ads.
| Capability | Legacy online tools | ToolGuest |
|---|---|---|
| Contrast checking built in | Rarely | Every pairing |
| Extract from images | Often paid | Free |
| CSS and Tailwind export | Screenshot only | Included |
| Spacebar regeneration | Sometimes | Instant |
| Lock colours | Limited | Supported |
| Advertising | Banners and interstitials | Zero, ever |
| Server data uploads | Images sent to servers | 100% local |
| Signup or cookies | Third-party trackers | None |
Used by designers in the USA, UK, Germany, Canada, Australia and Spain
One English page serves every Tier-1 market, so a brand designer in Copenhagen and one in San Francisco build palettes the same way.
Product designers build accessible palettes before shipping a redesign.
Brand studios extract palettes from client logos and export them as CSS.
Front-end teams check WCAG contrast before committing a theme.
Marketing teams generate seasonal palettes for campaigns.
Freelance designers build a consistent scheme for each new project.
Illustrators extract colour sets from their own artwork.
Colour palette questions, answered
How does the generator create harmonious palettes?
It applies colour theory relationships such as analogous, complementary, triadic and split-complementary schemes, so the colours relate to each other on the colour wheel rather than being chosen at random.
Can I extract colours from an image?
Yes. Drop in a photo or logo and the tool reads it locally to pull out a matching palette. The image is never uploaded.
What is WCAG contrast and why does it matter?
WCAG contrast is a ratio that measures how readable text is against its background. Meeting the recommended ratios makes your interface usable for people with low vision and more comfortable for everyone.
What formats can I export?
You can export the palette as CSS custom properties, a Tailwind configuration or a JSON file, so the colours move straight into your code.
Can I lock colours I like?
Yes. Lock the swatches you want to keep and regenerate the rest, so you can refine a palette without losing the parts that already work.
Is my data uploaded?
No. Generation and image extraction run entirely in your browser. Your images and palettes are never transmitted or stored.
Do I need an account?
No. There is no signup, no ads and no limit on how many palettes you create.
Is the tool free?
Yes. It is completely free and carries no ads or tracking.