Cohesive colour: Developing a scalable colour system for Chase

Revamp our colour scheme to improve accessibility, strengthen brand recognition, and ensure a consistent and visually distinctive experience across all touchpoints.

Team Chase UK

Year 2022

Role Visual Design Lead

Existing master brand colour palette

As Chase is a well-established brand in the US, we used their existing palette as a foundation. However, when applied in practice, several challenges emerged. Highlighting the palette issues with grayscale To better highlight some of the issues, you can view the palette in grayscale

1. Hue collisions in mid-tones Colours like Blue 50, Cyan 50, Teal 50, and Purple 50 are nearly indistinguishable. They virtually collapse into the same tone. This will mean users with sight impairments will struggle to distinguish between them.

2. Inconsistent brightness ramps Some colour families (e.g. Green, Plum) jump unevenly in tone between steps. Red has a sharp drop between 50 and 40, for example.

3. No semantic mapping for colours The entire colour wheel is produced here. With the whole palette being on offer, this will lead to a diluted brand - especially as there is little guidance on how to apply the colours.

Token-driven accessibility Because components were built on tokens, accessibility could be enforced consistently:

Colour tokens locked in minimum contrast ratios.
Spacing and typography tokens ensured legibility and touch targets.
Motion tokens supported reduced-motion preferences.

Why couldn't we just tweak the existing palette?

1 Structural problems can't be patched

The issues aren’t just with specific colours — the underlying framework is flawed:

Uneven lightness progression
Unpredictable perceptual relationships

A tweak might fix a few hues, but not the systemic weaknesses across the palette.

2 Not designed for accessibility

The old palette was limited in regards to compatibility with WCAG contrast requirements, or dark mode.

There’s no built-in validation against accessibility standards.
You’d need to audit and replace half the palette anyway — a patch would become a rework.

A new palette gives us Chase UK an opportunity to bake in accessibility from the start.

3 Visual Character Was Lacking

While Chase’s brand is rooted in a deep, confident blue, that story was lost in the old palette. Warm greys, rather than cooler ones, broke visual continuity and missed a key opportunity to anchor the system in Chase’s core identity.

It felt like an “off-the-shelf” default from Material or Bootstrap.
It lacked distinctiveness, warmth, or brand personality.

Redesigning the palette gave us the opportunity to craft a visual identity that speaks to Chase UK’s audience — not just replicate what’s worked in the US.

Utilising a Primary Key

While we’re rethinking the broader palette, Chase Blue will remain unchanged. It serves as our “Primary Key” — a foundational colour that anchors the system and reinforces brand continuity.

100

Deciding on grading

In the Master Brand set, colours are graded numerically from 100 to 4. This approach is used instead of descriptive names (like “Sky Blue”) to improve clarity and consistency. Numeric grades are easier to interpret and apply, as they create a clear relationship between shade and tone — for example, “Blue 10” is lighter than “Blue 70”, making the system more intuitive to use.

Most large-scale colour systems include around 10 steps per hue to provide enough range for different use cases. The current Master Brand set includes 12 steps, which gives us flexibility — but this could be reduced without losing tonal depth, while still leaving room to expand if needed in the future.

9 grades were identified as an ideal ramp to build from

(Technically, the new palette includes 10 grades — but only 9 are active colour steps) The system uses light as its guiding metaphor: 0 represents the absence of light (Black), while 100 represents full light (White). Everything in between consists of colour tones illuminated by RGB. (More on that later.)

Placing the Primary Key

In the Masterbrand colour set, our Primary Key is set at Grade 60, giving us two darker steps below and six lighter steps above. A balanced distribution of light and dark tones is essential to support a wide range of use cases — from backgrounds and borders to text and interactive states. The ideal balance ultimately depends on the product’s visual direction. For example, if the product heavily features dark mode or high-contrast themes, having more shades darker than the Primary Key is beneficial. Conversely, if the interface leans toward lighter themes, a smoother ramp above the Primary Key offers greater subtlety and visual harmony.

Using curves to produce a smooth colour ramp It may originally seem logical to create colour ranges by making the colour appear lighter or darker - perhaps even by adjusting transparency. But what this isn’t doing, is actually adjusting the colour across its entire visible range. In fact, selecting colour in this way, is mostly limited to how well the monitor displays the colours. The other problem with selecting colour by eye is that a gradual ramp of colour can’t easily be achieved. Especially when sitting hues next to each other. Curves help make the colour uniform across hues. They also keep the individual hue ramp smooth.

Creating the curve We start by plotting the Primary Key (Blue 30), which serves as the anchor point for constructing a smooth curve. From there, we use an iterative, trial-and-error approach to shape the ramp — balancing values across the two axes of brightness and saturation.

Once the curve was finalised, the initial blue hue range became the control, guiding the development of additional hues across the palette.

Full hue range

Deep-dive into the Grey Hue range

The grey hue range was an area I wanted to place particular emphasis on in the new palette. In reviewing the Chase US Masterbrand palette, I noticed the greys leaned warm — with subtle red undertones that often conflicted with the cooler direction of the broader Chase identity.

Getting the grey ramp right felt essential to creating a more cohesive visual experience. In this updated palette, we’ve introduced a cooler, blue-based grey that flows consistently across the hue range. This not only aligns better with the overall aesthetic, but also ties back to the Primary Key of the brand: Chase Blue.

Full range for Chase UK

Fully accessible, this is full range, developed in-house and live in the Chase UK app today.

Linking into before where grading was described, the system uses light as its guiding metaphor: 0 represents the absence of light (Black), while 100 represents full light (White). Everything in between consists of colour tones illuminated by RGB. Grades 10-40 are 4.5:1 accessible against White.

While this project has provided Chase UK with a more consistent and coherent colour palette, one key element is still missing: guidance on how to apply colour effectively. Addressing this was one of the original pain points — and remains essential to ensuring the palette is used with clarity and purpose across products.

Guidance

60/30/10 guidelines

To help teams apply the new palette effectively, I introduced practical usage guidance based on the 60/30/10 rule — a simple approach to achieving visual balance. I recommended using 60% neutral or background tones, 30% supporting or secondary colours, and 10% accent or interactive colours. This helped designers make confident, consistent colour choices while staying within the brand system.

Contrast-aware combinations

Highlighting which colour pairings meet accessibility standards (e.g. 4.5:1 for text).

Semantic roles

This work forms part of a larger collaboration with the Design System team — defining colours not just by hue, but by purpose, such as “interactive”, “disabled”, “surface”, and “alert”. As these common roles are defined, they will be mapped to token values for consistent implementation across platforms.

Danny Skinner