Hi, I'm Courtney! I'm a North American wife, mom and UX engineer.

I love video games where you farm stuff.*

All opinions are my own, and do not reflect the attitudes of the company I work for. They know better.

* No, not Farming Simulator, sorry.

© 2009 – 2022 Courtney Cloudman

Accessible Palette: stop using HSL for color systems


Especially in the new world of component-based web development, color palettes help front-end and UX engineers keep things looking consistent, even compared to parts of the design they've never seen. The best way to create them should be to compute them from a few chosen source colors.

And yet, creating a useful, consistent, well-contrasted palette is deceptively difficult, because adjusting traditional RGB or even HSL values have little relation to the color's luminosity, or its contrast against another color. You end up doing a lot of hacks to tweak the colors to something more consistent or accessible, and eventually it turns into complex spaghetti code that makes you punch the keyboard when you find another issue. Despite attempts to do it the "right" way, I lived this reality twice at my last job, once again at my current one, and again with my blog. It's aggravating.

Next time, I'm taking a hard look at the guidance and new tooling offered in Eugene Fedorenko's post. It's much more than an admonition to stop using HSL, with great explanations of the problem and some solutions available for you to use. I'm sure it could save me a few headaches in the future.