Skip to content

Color system suite — free to start

From palette
to production.

Generate palettes, build and validate color systems, check contrast, and export production-ready tokens for CSS, Tailwind, and JSON.

Start creatingExplore palettes

brand

Build, audit, ship

Build

Start from a palette, a photo, or a single brand hex. Lock what works, generate around it, and grow it into a full scale.

Open the generator

Audit

Find what's broken before your users do — failing contrast, duplicate greys, colors that collapse under color-vision deficiency.

Check a palette

Ship

Export semantic tokens your code can consume — CSS variables, Tailwind theme, JSON, or DTCG — with the measured contrast attached.

See the export

Jump into

From first color to shipped tokens

Four steps, 17 tools. Pick a step — everything in it opens free, no account.

Start generating

The whole point

Color systems

Palette → scale → semantic tokens. Three steps, and only the first one is a palette.

Build a scale
  1. 01

    Palette

    Five colors you like. This is where most tools stop.

  2. 02

    Scale

    Each one grown into a 50–950 ramp in OKLCH, so the light and dark ends keep the hue instead of drifting grey.

  3. 03

    Semantic tokens

    Named by the job, not the hue — with the contrast ratio of every pairing measured and attached.

Palette
Scale · #2563EB → 50–950
50
100
200
300
400
500
600
700
800
900
Semantic tokens
--color-background
#EFF6FF—
--color-text
#0F172A16.4:1
--color-primary
#10B9812.3:1
--color-secondary
#2563EB4.7:1
--color-accent
#1D4ED86.2:1
Turn a palette into tokens

Audit

Color debt

Paste your CSS and find out how many of your colors are the same color.

Lint your CSS
Files scanned
3
Distinct colors
10
Removable
4
Color debt
40%

Every finding carries the file and line it came from, and the ΔE you'd be giving up by merging — so a cleanup stays a review, not a leap of faith.

Diagnose a palette instead
  • 211

    3 colors are the same color — keep #2563EB

    ΔE 0.4
  • 21

    2 colors are the same color — keep #64748B

    ΔE 0.4
  • 11

    2 colors are the same color — keep #E2E8F0

    ΔE 0.5

15 color declarations across tokens.css, button.css, card.css

Inspect

Website inspector

Paste a URL to extract its colors, typography, and assets.

Inspect a site
https://example.comExample

Colors

0f172a1e293b2563eb38bdf8f8fafce2e8f0f59e0b

Type scale

h1
48px / 700 / 60px
h2
30px / 600 / 36px
body
16px / 400 / 26px
  1. 01

    URL

    Paste any address. Nothing to install, no extension permissions.

  2. 02

    Colors

    Its palette, gradients, type scale and downloadable assets — read out of the authored CSS, resolved through the real cascade at a 1280px viewport.

  3. 03

    System

    Send what you found straight into the generator or the doctor, and turn someone's stylesheet into a palette you can work with.

  4. Try it on your own site

Accessibility

Contrast, measured

WCAG AA and AAA on every pairing, plus eight color-vision deficiencies — checked while you build.

Open the checker
  • Body text10.35:1AAA
  • Amber accent2.15:1Fail

    One-click fix darkens it to#9D66074.84:1— same hue, passing.

  • Brand blue5.17:1AA

And how it looks to everyone else

A palette that passes contrast can still fall apart for the ~8% of men with a color-vision deficiency, because two colors that differ in hue can be identical once that hue is gone. The simulator shows the palette through each deficiency so you find that before you ship it.

Simulate color vision

Diagnosis stays free, permanently — the score, the thresholds and the arithmetic behind them are published. Pro pays for applying the fix, not for being told there is one.

Ship

Export

The palette leaves as code, not as a screenshot of five squares.

Export your own
:root {
  --color-primary: #10b981;
  --color-secondary: #2563eb;
  --color-accent: #1d4ed8;
  --color-background: #eff6ff;
  --color-text: #0f172a;
  --color-1: #eff6ff;
  --color-2: #2563eb;
  --color-3: #1d4ed8;
  --color-4: #10b981;
  --color-5: #0f172a;
}

Tailwind is two formats

v4 is CSS-first — the export emits an @theme block where the variable name is the utility name. The v3 config object is a separate download, because plenty of projects are still on v3.

DTCG values are objects

The stable Design Tokens spec defines a color $value as { colorSpace, components } — not the "#rrggbb" string most tutorials still show. The export follows the spec.

SCSS, Tailwind v3, plain HEX and a print-ready PDF with CMYK and nearest-Pantone values are all in the export modal too.

Export full 50–950 scales

Start from an image

Photo PickerColors from a photoRecolorRecolor image → new paletteEditorCrop, filter & annotateConverterPNG · JPG · WEBP · ICOCollagePalette collage

Why this exists

More than a palette generator

Picking five colors is the easy part. The work is everything that happens after.

A palette generator gives you

  • Five colors you liked
  • A hex code to copy
  • A pretty gallery
  • Maybe a contrast badge

This gives you

The full scale, in OKLCH

Every color grown to 50–950 without the hue drifting grey at the ends.

Semantic tokens with measured contrast

Named by role, each pairing shipped with the ratio it was measured at, so nobody re-audits it downstream.

A diagnosis in plain English

What's wrong, why it's wrong, and the published arithmetic behind the score — free, permanently.

An audit you can commit

Findings, severities and thresholds as a file that diffs cleanly next to the code it describes.

The colors you already have

Point it at a live site or paste your CSS, and start from the system that exists rather than a blank canvas.

Deterministic, every time

All of it is color math, not a model. The same palette gives the same answer today and next year.

See it on your palette

Pricing

Free to use, free to keep using

Finding what's wrong is free, permanently. Pro adds the one-click fix and the production export.

Full comparison
What the free tier includes and what Pro adds

What you get

Free$0foreverPro$6per month
Included for everyone
Full palette diagnosis — every problem, in plain EnglishIncludedIncluded
The score's full arithmetic and published thresholdsIncludedIncluded
Palette generator — lock, harmony rules, drag & reorderIncludedIncluded
Contrast checker & color-blind simulatorIncludedIncluded
Photo picker, recolor & bulk converterIncludedIncluded
Gradient maker & curated galleryIncludedIncluded
Export to CSS, SCSS, Tailwind, JSON & DTCG design tokensIncludedIncluded
Shareable palette linksIncludedIncluded
Up to 30 saved palettesIncludedIncluded
Pro unlocks
One-click palette repairNot includedIncluded
Semantic design tokensNot includedIncluded
Exportable audit reportNot includedIncluded
Merge duplicate colorsNot includedIncluded
Palette compressionNot includedIncluded

Also in Pro

  • Unlimited saved palettes
  • Print-ready PDF export
  • Ad-free browsing
  • Full export suite
  • Support an independent tool
Start creating — free

No card and no trial clock on the free tier. Cancel Pro any time from your account page.

One hue, graded

Build better with

Generate it, find out what's wrong with it, fix it, and export the tokens. Free, no sign-up.

Open this rampBrowse palettes