Rizal Renaldi

← Back

Colorsss: The gray Colors

devlog

One thing to make a set of colors (read: palette) complete and comprehensive, especially for UI's color palette is the usage of gray colors. Most of the time, defining gray colors can be a little bit tricky. On one side it must be, as the name suggest, gray. 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 gray color in design system, the gray 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 gray 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

2024 © rizalrenaldi.com — Made with 🖖