Brand & Design
What is a color palette?
The defined set of colors a brand or design system uses, typically organized into primary, secondary, neutral, and semantic groups.
Also known as: color scheme, brand colors
A modern color palette is more than a swatch list. It is a token tree: primary brand colors, an extended scale of tints and shades for each (usually 50-900 in 100-step increments), neutrals for surfaces and text, and semantic tokens (success, warning, danger) that map to specific values. Tailwind, Material, and Radix all popularized this structure.
Each color carries multiple representations: hex for designers, RGB for digital, HSL or OKLCH for programmatic manipulation, CMYK for print, Pantone for spot-color manufacturing. A robust system stores one source of truth and derives the rest, so a brand-color update in CSS variables flows through every consuming surface.
Brand.dev's color extraction recovers a deployed palette from a domain: parses the CSS, identifies repeating hex/rgb values, classifies them by role (primary, accent, neutral), and returns a structured palette. That output is the "what we actually ship" view of the brand, which often differs from the "what the styleguide says we ship" view in instructive ways.
In the wild
- →A design system declaring
primary-500as the brand's main blue andprimary-50throughprimary-900as a generated scale - →A Tailwind config exporting brand color tokens used by both the marketing site and the React app
- →Brand.dev extracting that
stripe.comships#635bffas its primary purple, plus the surface and accent supporting colors
How Brand.dev uses color palette
Endpoints in the Brand.dev API where this concept comes up directly.
FAQ
How many colors should a palette have?
Functionally: 1-2 primary brand colors, 1-2 accents, a neutral scale, and semantic colors for status. Visually inspired palettes can be richer; design-system palettes are usually leaner than brand mood-boards.
How do I derive shades from a single brand color?
OKLCH-based interpolation produces perceptually even scales (Radix Colors, Tailwind v4). HSL-based interpolation is simpler but uneven (light shades look washed out, dark shades muddy).
Can I extract a brand's palette from its website?
Yes. Read the deployed CSS for variables and repeating hex values, weight by usage area, and you have a high-fidelity palette. Brand.dev's color API does exactly this.
Related terms
A six-digit (or three-digit) hexadecimal representation of a color's red, green, and blue components, the most common way to write colors in CSS and design tools.
A color model that represents colors as additive combinations of red, green, and blue light, used by every digital screen.
A subtractive color model used in print that mixes cyan, magenta, yellow, and black inks to produce colors on paper.
A standardized spot-color system used in print, where each color is a pre-mixed ink with a globally consistent reference number (e.g., Pantone 286 C).
The complete set of visual and verbal elements (logo, colors, typography, voice, imagery) that a company uses to express itself consistently across every touchpoint.