Color Palettes
No palettes match this filter yet.
View all palettes →A palette is a system, not a mood board
Assign roles before falling in love
A usable palette has jobs, not just colors: a dominant tone that covers most of the surface, a neutral that carries text and backgrounds, and one accent that earns attention by being rare. The classic 60-30-10 split is a starting ratio, not a law — but if your "accent" is covering 40% of the screen, it has stopped being an accent. Notice how Midnight UI names its colors by role, not by hue.
Contrast is part of the palette
A palette that only works as decorative stripes isn't finished — every real design needs at least one text-on-background pairing that passes WCAG AA. Each palette page here shows every color's contrast against black and white so you can spot the text-capable colors at a glance, and the blindness simulator catches pairings that collapse for the roughly 1-in-12 men with a color vision deficiency.
Steal the structure, not the colors
The most useful thing about a brand palette is rarely its exact hexes — it's the pattern: usually one saturated signature color doing all the talking while disciplined neutrals do the work. Copy that structure with your own hue. Start from the color wheel to pick the signature, then let the generator derive the supporting cast from real harmony math.
Frequently asked questions
Open any palette and hit 'Export colors' — you get the set as CSS variables, SCSS variables, a Tailwind config block, or a plain list, in HEX, RGB, HSL, or OKLCH. Every individual swatch also links to that color's full page with all conversions.
They document publicly known brand color values for reference and education. The trademarks and brand identities belong to their respective owners — nothing here implies affiliation or endorsement, and using another company's brand identity in your own commercial work may need their permission.
Three roles cover most real interfaces: a dominant color, a neutral for text and backgrounds, and an accent. Five values is a comfortable ceiling for most projects — beyond that, you're usually maintaining shades of the same few hues, which the palette generator can derive on demand instead.
Curated palettes are hand-assembled here, each with use-case notes, from verified color values. Generated palettes come out of the palette generator tool — every generator result has its own shareable URL, so a palette you build from your brand color is one link away from being saved anywhere.
Accessibility belongs to pairings, not palettes — the same five colors can be used accessibly or terribly. Each palette page shows every color's contrast ratio against black and white as a starting map; test your actual text-on-background combinations in the contrast checker before shipping.
Ready to find your perfect palette?
Start from any color and let real color theory do the rest — or warm up with today's puzzle.