Color Palettes: search, generate, and export
Find a ready palette by keyword, build your own from seed colours or extract them from an image, then fine-tune six semantic roles and copy the result as CSS, SCSS, JSON, or Tailwind.
Search palettes
Type an English keyword — a mood, an object, a season — and browse ready palettes.
English keywords only.
Starter presets
Professional palettes to start from — click one, then fine-tune below.
Palette generator
Pick one or two seed colours, or drop in an image, to generate balanced semantic palettes.
Fine-tune the palette
Adjust each semantic role, then see it applied to a live interface preview.
Primary
Main brand colour for primary buttons, links, and key interface states.
Secondary
Supporting brand colour for alternate actions and secondary accents.
Accent
High-energy colour for highlights, badges, and small emphasis moments.
Neutral
Readable text and quiet UI colour for headings, borders, and controls.
Background
Default page background colour.
Surface
Card, panel, and elevated surface colour.
New
Ship a delightful product
A calm, readable interface built entirely from your six semantic colours.
Accent
A sample link
Export
Copy the palette in the format you need, or download it as a file.
Color Palettes: an online tool to build and export colour schemes
This tool helps you quickly assemble a harmonious colour palette for a website, an app, or a brand kit. Start by searching ready palettes with an English keyword, pick one of the professional presets, generate variants from a seed colour, or extract colours straight from an image — then perfect six semantic roles and get the code right away.
What the tool can do
- search ready palettes by English keywords (a mood, an object, a season);
- ten professional starter presets for any taste;
- generate balanced palettes from one or two seed colours;
- extract a palette from any image, right in the browser;
- fine-tune six semantic roles: primary, secondary, accent, neutral, background, surface;
- a live interface preview and export to CSS variables, SCSS, JSON, Tailwind, or a plain HEX list.
Why semantic roles matter
Instead of a handful of random colours, the palette is built around roles — what each colour does in the interface. Primary drives key actions and links, secondary supports alternate accents, accent highlights what matters, neutral carries text and quiet elements, while background and surface create depth. This maps cleanly onto CSS custom properties and design systems.
How palette search works
Type an English keyword — say ocean, sunset, or forest — and the tool pulls ready palettes from the ColorMagic community. Apply any result in one click: the six colours are mapped onto the semantic roles automatically, and you see them on the live preview at once.
Questions about colour palettes
Why is search English-only?
Palette keywords and tags in the database are English, so search accepts Latin letters only. That gives the most accurate results for queries like coastal or vintage.
Where are my colours stored?
Nowhere. Everything happens in your browser: generating, extracting from an image, and building the code never send data to a server. You export the finished palette yourself, by copying it or downloading a file.
Which export formats are available?
CSS variables (with RGB parts), SCSS variables, JSON, a Tailwind colour config, and a plain HEX list. Pick a format, then copy or download.
This is one more tool in the section — all utilities are gathered on the online tools page.
Let’s discuss your project?
Free consultation + cost calculation