Brand colors vs functional UI colors
Brand colors
Logo, marketing, identity
- Logo and wordmark
- Marketing site and hero sections
- Key illustrations and campaigns
- Few in number — often 1–3 main hues
- Chosen for emotional and strategic reasons
Functional UI colors
Interface, states, data
- Text, backgrounds, borders
- Primary and secondary actions
- Success, warning, error, info
- Focus rings, hover and selection states
- More numerous — chosen for contrast and clarity
A key design skill is to let brand colors influence UI colors without letting them dictate every decision.
How brand colors feed into your UI palette
A practical approach:
- 1
Pick 1–2 key brand hues. For example, a blue and a yellow from your logo.
- 2
Decide how they appear in the interface. One becomes your primary hue (buttons, links, active states). The other can be an accent — badges, highlights — or kept more for marketing than product UI.
- 3
Build scales around those hues. A structured sequence like primary-50…900 for the main brand color, with lighter and darker steps that work on both light and dark backgrounds.
- 4
Surround them with neutral and semantic colors. A gray/neutral scale for text and surfaces, plus green/yellow/red/blue for statuses.
The goal is a palette where the brand hue is clearly visible but the overall interface is calm and readable — not a wall of brand color.
Keeping brand and functional colors in balance
Use brand colors heavily in
- Entry points — login, marketing site, hero sections
- Primary actions — main buttons, key navigation highlights
- Occasional illustrations and empty states
Use functional colors for
- Most backgrounds and text (neutrals)
- Semantic messages — success, warning, error
- Long‑form reading and dense UIs — tables, forms, dashboards
Avoid
- Large areas of saturated brand color behind body text
- Using the brand color for every state (success, warning, error all in one hue)
- Mixing too many unrelated brand hues into product UI
Collections like Tailwind, Material, Chakra and Radix on Colorr give you ready‑made functional scales that you can re‑tint or combine with your brand hues.
Colors for data visualization: different rules
When you move into charts, dashboards, and maps, colors represent data — not brand. Here you care about distinguishing series, showing order or magnitude, and being readable at a glance even in small or crowded charts.
It is often better to borrow a well‑designed data palette than to force your brand colors onto charts.
There are three main palette types:
Categorical palettes
Categorical palettes need clearly distinct hues that are still balanced together.
Good categorical palettes
- Use 6–10 hues that differ in both hue and lightness
- Avoid pairs that are easy to confuse — very similar blues, etc.
- Avoid relying solely on red/green differences (color vision deficiencies)
Tips
- Use high‑quality sources like ColorBrewer, d3‑scale‑chromatic (Category10, Set2) or Tableau defaults as inspiration.
- To brand them: anchor one or two series in your brand hue, derive the rest from nearby but distinct hues tuned for clarity.
In dense dashboards
- Supplement color with different line styles and marker shapes
- Use direct labels rather than relying only on legend entries
Sequential palettes
Sequential palettes show low → high. They usually start from a light, low‑saturation color and ramp up to a darker, more saturated color of the same or similar hue.
Good sequential palettes
- Are monotonic in lightness — each step is clearly lighter or darker than the previous one
- Work in grayscale for users who can't distinguish hue well
- Avoid overly saturated mid‑tones that become visually "sticky"
You can build these by locking hue and varying lightness and chroma in HSL or OKLCH, or by using established palettes like Blues, Greens or Viridis as reference.
In Colorr terms, a sequential series often maps naturally to a collection scale:
Example mapping
Diverging palettes
Diverging palettes are for data with a neutral center — zero vs positive/negative, target vs above/below, baseline vs deviation.
Design tips
- Choose two hues that are clearly different but balanced — blue–orange, purple–green, red–teal.
- Keep the mid tone near a neutral gray or very low saturation.
- Ensure both extremes are equally salient — don't make "good" values faint and "bad" values screaming.
- Symmetric: the lightness ramp from center outward should mirror on both sides.
You can build these by mirroring two sequential scales around a shared light, low‑saturation center color.
Integrating brand, UI and data colors
- 1
Define separate palettes. Brand palette (1–3 hues with a few shades for marketing), UI palette (neutrals, primary/secondary, semantic colors), data palettes (categorical and sequential series).
- 2
Let brand colors influence, not dominate, data palettes. Use brand hues as anchors in categorical palettes for one or two main series. Choose related or analogous hues for the rest, tuned for clarity rather than pure brand match.
- 3
Maintain consistency in roles. The color that means "error" in UI should mean "negative" in charts. The color that means "success" should mean "positive" or "above target".
- 4
Document and tokenise. color.brand.primary, color.ui.success, color.data.categorical[0…n], color.data.sequential.cool[0…n], etc.
Collections on Colorr — Tailwind, Material, Radix, Chakra, and even Crayola or Munsell — give you a broad set of named, reusable hues. From those you can compose a small recognizable brand palette, a robust functional UI palette, and clear legible series for charts and dashboards, all linked by shared structure rather than by forcing the exact same color everywhere.