Right at the end of 2022, we have achieved something we wanted since 2016. A custom color palette which we can use extensively for product design, marketing, and branding.

It all started when we planned a throwback to our old design system after hearing the news that The Verge, ZDNet, even Hacktoberfest (2022) are starting to use the similar color scheme to our old logo designed back in 2015:

So the six main colors: Blue, Magenta, Orange, Violet, and those two shades of green were first chosen to re-represent our brand, originally for our 21th birthday logo:

At the middle of the journey, we realized that we have to create two kinds of palettes to support various use cases. Named after couples from Indonesia’s best-selling romance novels, we decided to give these two color series as Galih-Ratna and Dilan-Milea, respectively.

In summary, Galih-Ratna color sets are more muted than Dilan-Milea, which makes it perfect for use in pastel-colored designs as well as mobile user applications. Dilan-Milea, on the other hand, take a more vibrant approach to make the colors feel more active and contrast, useful in designing dark user interfaces as well as branding.

You can think Dilan-Milea as an equivalent of the “A” (A200, A400, A600, etc.) variants of the original Material Design color palette made in 2014. You can see how these two color sets can be used altogether, like the Dilan-Milea green for the website’s hero background (pictured below) and Galih-Ratna for headings and other user interface elements.

Moving to OkLCH.

Our color palette suffers one single thing: color contrast across different hues. It’s all because we depended ourselves to the old, bad HSL color scheme. But fortunately, some people have solved this problem by inventing OkLCH. There’s a good post from Evil Martians which explains these problems as well as OkLCH’s limitations. But so far, we’re convinced to rebuild the entire color palette, this time systematically, as shown in the Codepen demo below: