Picking colors for my website


I’m currently in the process of designing this website, so I thought it would be fun to document the process.

Something that came up most recently is choosing the right colors for the website. I knew from the beginning, I wanted to support system-wide dark mode—and the easiest way to do that is with CSS variables.

There’s a smarter way to approach this if you’re already familiar with CSS variables.

The problem with this method is that even though the opacity value we’re using (0.6 or 60%) is the same for both themes, the real contrast to the human eyes is different.

Before — unbalanced color contrast between the two themes.

Before — unbalanced color contrast between the two themes.

When you look at the link in the preview, it appears to have less contrast against the surrounding text in the light theme. Another example of how our eyes fool us is how the same value of brightness and saturation of yellow will feel brighter than violet.

In order to fix this, the opacity value for the link in the dark theme needs to be raised optically to match the one in the light theme, or vice versa.

After — balanced color contrast between the two themes.

After — balanced color contrast between the two themes.

That’s why for white and black colors, I have to use two separate palettes so that the contrast looks uniform in both themes. Unfortunately, there’s no programmable way for this process I’ve found to be useful, so I just ended up eyeballing my way through all of them.

Thankfully, Figma’s Selection Colors made this process extremely simple.

Figma selection tool being used to select colors.

Aside from the black and white colors, I also had a brand/primary color scheme to accent my design. It’s a mixture of blue and purple, or as some people prefer to call it “blurple.”

Blurple selection process.

It went through a similar process as the black and white color scheme, except the saturation, has to be dropped way down for the dark theme.

At last, it was time to migrate to the improved color system. I made all the old values red, so I know where to start switching to the new colors.

Places where the old color styles used to be is red

It might seem like I am nitpicking, but it’s a gripe I have always had with websites and apps that didn’t take colors seriously enough—who changed the background to black and called it a day.

Oh, and if you’re curious about the colors used in the code blocks, it’s from the VSCode Github theme. I also didn’t forget to use CSS variables, so it should work in both light and dark mode.

Update (Apr 23 2022): Since this blog post, I’ve moved my blog over to NextJS and opted to use mdx-bundler. This means I can no longer use gatsby-remark-vscode and had to opt for Rehype Pretty Code instead.