Turn off light
← Back

Colorsss: The Neutral Colors

May 26, 2021



One thing to make a set of colors (read: palette) complete and comprehensive, especially for UI's color palette is the usage of neutral colors. Most of the time, defining neutral colors can be a little bit tricky. On one side it must be, as the name suggest, neutral. But on the other hand, it need to have some 'clue' to brand color to make the whole thing looks harmonized.

So recently I've been researching into some of the big tech companies' design system and open source project, especially to its color system. I took 3 different case for this: Tailwind, Github's Primer and Shopify's Polaris. Tailwind have a wide range color options because the framework need to be able to accomodate general purposes, but Primer and Polaris is purposefully designed for specific brand and specific product. In general the one thing I've noticed in most of them are, I didn't see any formula to define neutral color in design system, the neutral color seems to be manually picked and set. However there are a bit of common pattern to the saturations and lightness for each color step.

In term of Colorsss case, I need to make up some sort of formula to define neutral color for every main color that being picked by user. First to make my life easier, and second to accomodate all possibilities of color. There will be some of restrictions on the rule once the color reach 'gray area' (See what I did there? 🆒), which will return to whatever default I set.

The Blog of Rizal Renaldi

2021 © rizalrenaldi.com — Made with hand obviously.