Most colour systems start with a brand palette and work outward. Pick the primary, add some neutrals, generate a few tints and shades, done. It works until it doesn’t — and it usually doesn’t at scale.
At ABB, the brand palette is analogous. That means the colours sit close together on the colour wheel — greens, teals, blues. Beautiful for brand work. A nightmare for UI, because building neutral palettes that feel genuinely neutral against an analogous scheme is harder than it looks. Standard HSL neutrals tend to clash perceptually with the brand colours in ways that are hard to articulate but immediately visible.
Here’s how I solved it, and what I’d do the same way again.
The problem with HSL
Most designers work in HSL. It’s intuitive — hue, saturation, lightness — and it maps reasonably well to how we think about colour. The problem is that HSL isn’t perceptually uniform. Two colours with the same lightness value in HSL don’t look equally light to the human eye. Yellow at 50% lightness looks much brighter than blue at 50% lightness. This matters a lot when you’re trying to build a neutral scale that behaves consistently next to a range of brand colours.
The solution was HSLuv — a perceptually uniform colour space that adjusts for how humans actually perceive lightness. In HSLuv, two colours at the same lightness value genuinely look the same brightness. That meant I could engineer the neutral palette to sit harmoniously against the brand palette rather than fighting it.
The tool that made this practical was Prism, GitHub’s colour palette generator. It works in perceptual colour spaces and makes it straightforward to generate scales that behave the way you expect them to. Highly recommended.
The hue shift technique
One thing that makes a colour palette feel cohesive rather than flat is subtle hue rotation across the scale. Instead of just adjusting lightness from dark to light, you shift the hue slightly as you go — warmer at the dark end, cooler at the light end, or vice versa. The result is a palette with depth that feels intentional.
I learned this from watching pixel artists. It’s a well-known technique in that world for creating richness with a limited palette. Applied to a UI token system, it’s the difference between neutrals that feel alive and neutrals that feel like grey out of a box.
For ABB’s palette, the hue shift allowed me to pull the neutrals subtly toward the brand colours without making them obviously tinted — close enough to feel cohesive, restrained enough to still function as neutrals.
Three themes, six modes
The full system covers three themes across light and dark:
Base — neutral palette and primary green. Used everywhere by default. Generic pages, functional product UI, account management.
Home — residential brand colours. Activates on product pages, advertising, and sales funnels for the residential market.
Business — same structure as Home, for the B2B product line.
The separation matters. Functional tasks don’t need brand energy — they need clarity. The themed palettes activate where conversion is the goal. It keeps the UI calm where calm is useful and expressive where expression serves the business.
In Figma, this is handled through a cascading variable system. The Base set handles light and dark. The Home and Business sets layer on top, overriding only the tokens that need to change. Everything else resolves from Base. You’re not duplicating the entire token set for each theme — just the delta.
Accessibility
Every colour in the system meets WCAG 2.x contrast requirements. I also validated everything against APCA — the newer contrast algorithm that the W3C is moving toward. It isn’t a formal requirement yet, but the direction is clear and building for it now means no retrofitting later.
The entire branded palette maps to Pantone values. This was a deliberate decision to make the system work across digital, print, and merchandise without requiring reconciliation work every time someone needs to produce something physical. One source of truth for colour, regardless of medium.
What I’d tell someone starting this
Use a perceptually uniform colour space from the start. HSL is fine for quick work but it will create problems at scale. HSLuv or OKLCH are both good choices — OKLCH is gaining traction in CSS natively which is worth paying attention to.
Validate against APCA even if WCAG is your current requirement. The two systems can produce different results on mid-range contrast values and it’s better to know now.
And spend time on the hue shift. It’s the detail that separates a palette that feels crafted from one that feels generated.