by Zack Voase on
Improving on Solarized using the OKLab perceptual colorspace
tl;dr: This is a long post about what is basically a tweak to an already
great color scheme. I went down the rabbithole of color theory because I was
bored, and this is what I produced. If you just want the final result…you’re
looking at it (this site uses the OKSolar color scheme). You can also skip
to the end, or get a JSON file with the hex and OKLCh values for
it here.
I was a long-time user of Ethan Schoonover’s Solarized, an
aesthetically-pleasing and very usable color scheme for the terminal and code
editors. However, I found the contrast lacking, and I usually ended up tweaking
the background and foreground colors to stand out a bit more.
Solarized was developed using “precise CIELAB lightness relationships”,
which I thought would have prevented this issue. The problem is that CIELAB
isn’t perceptually uniform. Practically speaking, this means different colors
appear to have uneven lightness differences to a human observer, even though
their L* values (the shorthand for CIELAB’s lightness component) are the
same. CIELAB was developed in 1976, and the color difference metric it
was based on has long since been obsoleted.
To demonstrate, here’s some Solarized-highlighted code in both light and dark
modes, and how it appears under a monochrome filter (simulating
monochromacy):
For me, the contrast between text and the background is just a little too low
(especially if I’m working in a bright space), and you can see that it also
varies between different token types. I know that the goal of syntax
highlighting is to add visual structure to code, but I’d prefer that were done
through color than through brightness.
OKLab
OKLab is a relatively new colorspace (that is, a way of describing colors)
defined by Björn Ottosson in December 2020. It was derived numerically using
the state-of-the-art color difference metric, and achieves a much
stronger guarantee of perceptual uniformity than CIELAB. That means that two
colors with equal OKLab lightness values will appear equally bright to a human
observer. Despite its newness, it’s caught on enough to be part of the CSS
Color Module Level 4 Draft, and Safari already supports
specifying colors in it natively.
Here’s a constant-lightness rainbow in OKLab, with lightness of 74.6% and chroma (a measure similar to ‘saturation’) of 0.124:
Armed with OKLab, I reapproached Solarized from first principles, using the
same style of composing base and accent colors, but fix
