Ask the Expert: Everything you need to know about colour scales

In this edition, Yuliya Fedorovych RGD, Communication Designer at Island Health (Vancouver Island Health Authority), discusses colour scales in design systems and how perceptual models are reshaping the way designers approach accessibility and consistency.

Can you tell us a bit about your experience working with colour in design systems—and what inspired your interest?

My experience with colour in design systems grew from solving real-world accessibility and usability challenges, most notably in my role as a communication designer at Vancouver Island Health Authority. When I began working there, I realized their existing palette lacked flexibility, could not accommodate accessibility and was generally difficult to use. Leading the redesign, I applied a perceptually uniform model to create scalable, functional ramps that complied with WCAG and other standards while working well across media. The process deepened my interest in colour, particularly in balancing brand identity, human perception and practical simplicity for designers.

What do designers mean by a colour scale, and why is it important?

A colour scale is a structured progression of tints and shades for a base hue. In the past, visual communication designers relied on brand guidelines that were essentially rigid lists of dos and don’ts. Colour in those documents was often reduced to a few fixed swatches with prescriptive instructions on how to apply them. Modern design demands much more: colour must communicate function, support accessibility and adapt across platforms while remaining coherent and expressive. This is why we are moving toward design systems, where scalable colour scales provide the consistency, flexibility and contrast that static swatches cannot.

What challenges do designers face in creating consistent, accessible colour palettes?

One of the main challenges is perceptual uniformity. The models most familiar to designers, like HSL or HSV, are not perceptually uniform, so steps in a colour scale often feel uneven. Models that do provide perceptual accuracy usually involve complex math, which makes them hard to use in practice. As a result, designers often hand-tune colour scales. While this produces ramps that look better to the eye, it breaks any underlying structure. Without that structure, colours end up with arbitrary names and once published, the scales are almost impossible to edit without disrupting the system.

You've written about a newer approach to working with colour that's more aligned with human perception. Can you walk us through what that looks like and how it works?

Yes, in my most recent blog post, I wrote about the introduction of perceptual colour models like OKLab and the shift they’ve created in how we work with colour. These models are designed to reflect how humans actually see colour, so the steps in a scale appear visually consistent, unlike older models, where some changes felt too abrupt or too subtle. That consistency allows designers to build ramps where each step makes sense and new values can be added without breaking the system. For example, in redesigning the Vancouver Island Health Authority palette, I used OKHSL from OKLab to create accessible, functional scales that still preserved the organization’s visual identity.

For someone interested in experimenting with this approach, where do you recommend they begin?

A good place to start is simply getting a feel for how perceptual models work. I often point people to resources like Hueplot, which shows visually how OKLab structures colour compared to other models. You can also explore OKLab’s extensive documentation and try out its visual colour picker, which makes it easy to experiment because it converts OKLab values directly into hex codes. From there, try rebuilding a single ramp and compare it to the one you would normally create. You’ll likely notice it feels smoother and more consistent.

What’s the best way to structure and name colour ramps, and how should designers test for accessibility?

When I build colour ramps, I usually base the naming on the L value in OKHSL, which keeps the system straightforward and logically tied to the colour essence. I select colour variations for scales with WCAG contrast in mind, avoiding mid-range, overly bright colours that fail against both black and white. This lets me introduce a simple usage rule, such as “pair colours below 35 with those above 75,” so the palette stays intuitive without being overcomplicated. One challenge is that WCAG does not yet rely on perceptually uniform models, which makes lightness values numerically inconsistent across hues.

What’s one small shift you’d encourage designers to adopt when approaching colour today?

I think we need to stop treating colour as something fixed and prescriptive, and instead approach it as part of a flexible system. In the past, palettes were just a handful of swatches in a brand PDF, but today it’s more effective to think in terms of scales and systems rather than static choices. That way, colour remains a practical tool that supports clarity and accessibility, while still having the flexibility to grow and adapt to the changing needs of design.