Color Palette Importer

Pull palettes out of brand decks, Figma experiments, Adobe exports, and Coolors links, then put them in one consistent shape. Paste a Coolors URL, drop an ASE file, or feed HEX/JSON below—review, dedupe, and map before you export.

Import palette

Paste HEX list, Coolors link, or JSON

Tolerance (HSL distance)

Parsed colors

Why normalization matters

A palette is a contract between design and code. When colors stay trapped in proprietary files, they are hard to audit or version. Normalizing to a shared structure lets you check contrast, build tint ladders, map semantic tokens, and export to Tailwind or CSS variables without reinventing the pipeline each time.

Supported sources

Adobe ASE — swatches converted to HEX with names when present
Coolors — palette URLs parsed into HEX values
Plain text — comma- or newline-separated HEX codes
JSON — objects or arrays with configurable field mappings

Invalid codes are flagged before you commit them to the working set.

Mapping to semantic tokens

Prefer intent over opaque labels: brand, accent, muted, warning, danger, success, surface, border. Preview light and dark contexts, and plan hover/active/focus/disabled deltas early so states are not an afterthought.

Quality checks during import

Relative luminance and contrast against common surfaces help catch unreadable pairs early. For deeper review, continue in the Contrast Checker, Text Over Image Contrast Checker, and UI Element Color Auditor.

Merging near-duplicates

Brand blue often arrives as three almost-identical HEX codes from different decks. Tolerance-based HSL clustering shows candidates to merge while keeping source metadata for the audit trail.

After import

Send the cleaned set to the Palette Exporter, Export to Tailwind Config, or pressure-test it in the Real-Time Theme Preview Sandbox. For charts, check the Accessible Chart Color Palette Generator.

Common pitfalls

Treating brand decks as final UI values — always verify contrast on real surfaces
Keeping every near-duplicate — merge with review so the token set stays small
Opaque names — if a token does not say what it does, it will not scale
Skipping dark mode — preview both schemes before you lock exports

Frequently asked questions

Which formats can I import?

Adobe ASE swatches, Coolors palette URLs, comma- or newline-separated HEX lists, and JSON objects or arrays. Everything is normalized to name, HEX, RGB, and HSL for the same review flow.

Why normalize before exporting to Tailwind or CSS?

Scattered sources use different naming and precision. A shared shape lets you run contrast checks, merge near-duplicates, and map semantic roles once instead of fixing each export by hand.

How does deduplication work?

Near-matching colors are clustered with an HSL distance tolerance. You review clusters before collapsing them so intentional close variants are not deleted by accident.

Should I map to semantic token names?

Yes when the palette will live in a product. Names like brand, accent, danger, and surface travel better across frameworks than color-1 or brandBlueCopy2.

Does import guarantee accessible contrast?

No. The importer can surface luminance and contrast hints, but you should still verify critical pairs in a dedicated contrast checker before shipping text or icons.