Color Palettes
-
Spotify 3 colors 21
Spotify's brand identity centers on a single vivid green paired with near-black and white for strong contrast.
#1db954 · #191414 · #ffffff
-
Slack 5 colors 17
Slack's palette uses four distinct hues, historically drawn from its logo, alongside a deep aubergine used acr...
#4a154b · #36c5f0 · #2eb67d · #ecb22e · #e01e5a
-
Airbnb 3 colors 22
Airbnb's identity is anchored by Rausch, a warm coral-red, paired with dark neutral tones for text and UI chro...
#ff5a5f · #00a699 · #484848
Brand palettes are documented for reference and education. All trademarks and brand identities belong to their respective owners; no affiliation or endorsement is implied.
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.