Color Palette Collection
More than 200 ready-to-use palettes — from hand-tuned five-color schemes to complete design-system scales. Click a color to copy it, or export the whole set.
- 200+ palettes
- Search and filter
- Favorites
- Export
No palette matches your search.
Export
How to use the collection
Find, copy, export.
- 1
Browse or search
Filter by collection and mood, or type a name, a mood or the start of a HEX code.
- 2
Copy a color
Click any swatch to copy it in the format you chose — HEX, RGB, HSL or OKLCH.
- 3
Export the palette
Send a palette to the export box for CSS variables, Tailwind config, JSON, SVG or PNG — or open it in the generator.
Palettes for real projects
Not just pretty stripes.
Curated schemes
Over a hundred five-color palettes built in OKLCH with deliberate lightness steps, tagged by mood: warm, pastel, dark, vintage, corporate and more.
Design-system scales
The full 50–950 scales of Tailwind CSS, the Material Design palette and Open Color, one card per hue.
For charts and maps
ColorBrewer, Viridis, Okabe–Ito and other sets made for data — categorical, sequential and diverging — with color-blind-safe options marked.
Editor themes
The exact colors of Nord, Dracula, Solarized, Gruvbox, One Dark, Monokai, Tokyo Night and Catppuccin.
Favorites
Star the palettes you like; they are kept in your browser and shown under “My favorites”.
Export anywhere
CSS custom properties, SCSS variables, Tailwind config, JSON, CSV, GIMP palette, SVG or a PNG sheet.
Works on any device
A layout that adapts to small screens, with large buttons and fields.
Free, no sign-up
No account, no limits, no watermark — on a phone, tablet or computer.
Choosing a palette that works
A usable palette is more than colors that look nice side by side. An interface needs roles: a background, a surface, text, one primary accent and perhaps a secondary one. A proven starting point is the 60-30-10 rule — about 60 % dominant neutral, 30 % secondary, 10 % accent. Five-color palettes map onto that naturally: the lightest and darkest for background and text, the middle ones for surfaces and accents.
For anything larger than a landing page you will want scales instead of single colors: ten or eleven lightness steps of each hue, as in Tailwind (50–950) or Material Design. Scales give you hover states, borders, disabled styles and a dark mode without inventing new colors each time. Whatever you choose, test the text and background combinations — a palette is only as good as its contrast.
Charts have their own rules. Categorical data needs clearly distinct hues, sequential data a single ramp from light to dark, and diverging data two ramps meeting at a neutral midpoint. Around 8 % of men cannot tell certain reds and greens apart, so prefer sets designed for that — Okabe–Ito, Viridis or the ColorBrewer palettes marked as color-blind safe.
What is in the collection
| Collection | Contents | Use it for |
|---|---|---|
| Curated palettes | 108 five-color schemes by mood | Brands, websites, slides, illustrations |
| Design systems | Tailwind CSS, Material Design, Open Color | UI work with full lightness scales |
| Editor themes | Nord, Dracula, Solarized, Gruvbox and others | Code blocks, terminals, dark interfaces |
| Charts and maps | ColorBrewer, Viridis, Okabe–Ito, Tableau 10 | Data visualization |
| CSS color names | All named colors, grouped by hue | Quick prototypes and teaching |
Tips
- Open any palette in the Palette Generator to tweak, extend or rebalance it.
- Check text and background pairs with the Contrast Checker before you commit.
- Build your own palette from a photo with the Palette Extractor.
- Turn two or three palette colors into a background with the Gradient Generator.
Frequently asked questions
Can’t find your answer? Contact us — we reply quickly.
Can I use these palettes in commercial projects?
Yes. Color combinations are free to use. The design-system and theme colors come from open-source projects (MIT, Apache 2.0 and similar licenses), and the curated palettes were created for this collection.
How do I copy a color code?
Click the color. It is copied in the format selected at the top — HEX by default; RGB, HSL and OKLCH are available.
How do I export a palette to CSS or Tailwind?
Press the export button on the palette card. In the export box choose CSS variables, SCSS, Tailwind CSS, JSON, CSV, GIMP palette, SVG or PNG, then copy or download.
Which palettes are color-blind safe?
In “Charts and maps”, filter by “Color-blind safe”: Okabe–Ito, the IBM and Paul Tol sets and the Viridis family were designed to stay distinguishable with the common color-vision deficiencies.
Where are my favorites stored?
In your browser’s local storage on this device. They are not sent to a server and stay until you clear the site data.
Is this tool free?
Yes. It is free to use without an account or a limit, and the results carry no watermark.
More free developer tools
Encode, format, test, convert and generate — small tools that run in your browser and keep your data on your device.