Picking colors for my website

I’m currently designing and developing this website, so I thought it would be fun to write about my process.

Something that came up most recently in my to-do list 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.

// Color to be used in default mode (or light mode).
:root {
  --color-text-60: #636363;
}

// Color to be used in dark mode.
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-60: #cccccc;
  }
}

If you’re already familiar with CSS variables, you know there’s a smarter way to do this.

// Light: --color-text-60: rgba(0, 0, 0, 0.6)
:root {
  --color-base-rgb: 0, 0, 0;
  --color-text-60: rgba(var(--color-base-rgb), 0.6);
}

// Dark: --color-text-60: rgba(255, 255, 255, 0.6)
@media (prefers-color-scheme: dark) {
  :root {
    --color-base-rgb: 255, 255, 255;
  }
}

The problem with this approach 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 isn’t.

Before — unbalanced color contrast between the two themes.

When you look at the link in the image, 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 manually raised to match the one in the light theme, or vice versa.

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.

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.”

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.

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.