A story about getting seriously sidetracked and solving problems I have created myself.

As an interaction developer, I often help clients implement design (token) systems, particularly when it comes to color. In this article, I'd like to share some of the tools and experiences that have helped me work with color more effectively.

My Background with Color

I've always had an appreciation for color, but it wasn't until my teenage years that I began to use it more practically through pixel art and spray painting. Growing up in the 1980s and 1990s, I was captivated by the vibrant and bold color schemes in video games. These color choices were often carefully considered and balanced, creating a harmonious and pleasing visual experience. It's interesting to consider that we face similar challenges when working on design systems today, not due to technological limitations, but for the sake of simplicity and long-term maintainability.

Untitled

Untitled

Untitled

Untitled

Untitled

Working with Color

As I began to explore different color models in graphical editors like Photoshop, I discovered that selecting a different color model could significantly affect the way colors were presented in the color picker.

Untitled

Screenshot 2022-12-23 at 01.10.36.png

One example of this occurred while I was working at Ginetta, where my boss Simon wanted to come up with a color logic for a rebranding project. I thought it would be a straightforward task to generate a few hues with the same saturation and lightness settings. However, when I presented my choices to Simon, I realized that some hues appeared more intense than others. Dark blue, pink, red, and green seemed particularly strong, while other hues appeared more muted.

Screenshot 2022-12-30 at 16.48.45.png

After some investigation, I learned about the concept of perceptual uniformity through a library called HSLuv (then known as HUSL).

Screenshot 2022-12-30 at 16.47.27.png