Creating a terminal color scheme (part 1: design)

I'm a big fan of Solarized Dark color scheme and have been rigorously applying it to every application that allows changing colors. After using the color scheme for many years, these colors feel very calming to me.

Solarized

That's not to say I find it perfect. Things I don't quite like:

• Background is too blue and not dark enough.
• I'd prefer just a bit more contrast overall.
• Yellow, green, and orange are a little hard to tell apart. I have a mild color blindness (deficiency of red cones) so it's probably just me.

I've decided to create my own color scheme that will address all of these issues.

I recognize that it will likely feel unbalanced for anyone who doesn't have the same color perception peculiarities that I have. That's okay! It's not my goal to make it good for anyone except me.

Overall shape

I'm targeting terminal and the overall shape will be similar to Solarized:

• 16 total colors.
• 8 "atonal" colors: 4 dark for backgrounds and 4 light for text.
• 8 "tonal" accent colors.

Following the ANSI standard, 16 terminal colors have predefined meaning: black, red, green, yellow, blue, purple, cyan, white, and the "bright" versions of the same 8 colors. This makes for 4 "atonal" (2 versions of black and white) and the rest 12 "tonal" colors. It's unfortunate that we'll stray away from the standard, but it's a good guidance for what tones to choose in the color scheme.

Here is a brief introduction to ANSI colors and guide how to not stray from the standard.

Color picking

I found some free app that allows creating 8-color palettes and allows manipulating colors in HSB space. That's good enough! I think Coolors would work fine too:

Coolors website

The palette must strive to be "balanced":

• All "tonal" colors should feel equally bright/dim, but the tones should be distinct from one another.
• "Atonal" colors should have a good range of contrast, but not too much (ever tried to look at those unstyled black-on-white webpages for a long period?).

Solarized palette uses L* values from CIELAB color representation to ensure contrast between "atonal" and equality between "tonal" colors. I've balanced by eye. CIELAB attempts to objectively measure colors while my retinas lack in perception of red shades (and probably many more smaller disproportions).

CIELAB color space

It's always a work in progress

I did few iterations after the initial colors were all chosen. First the background was still too blue. Then I've noticed that cyan is almost indistinguishable from the whites. I've made it a bit more emmm "turquoise"?.

I'm pretty sure there is more to refine after I'll use it daily for some time.

Next I'm going to apply these colors to all the applications I use.

Part 2

2022-01-02 | #colorscheme #design

Agent Parsley

All posts