reasoning about colors

The one you know and love: [R]ed, [G]reen, [B]lue. Your knobs are amounts of each. As you turn everything up, you approach #ffffff (and down, -> #000000). This isn’t particularly flexible in “ways you can think about colors”.

Here is a gradient from #cc3333 to #33cc33 to #3333cc:

To show the lighting effect, let’s repeat the above gradient, but instead of using 33 for filler, we’ll use 99 – that’s triple(!) the secondary color amounts:

wikipedia: HSL and HSV

Saturation in HSL is a controlled version of chromacity (“distance from gray”). See the wiki section for more details.

Hue has several defined points (at rotating 60° angles), I like to think of it like a color compass:

HSL: Hue rotation 0-360 (step 60°), saturation 50%, lightness 50%

Let’s see the effect saturation has:

HSL: saturation scale 0-100% (step 10%), lightness 50%, hue 240° (blue)

And lightness:

HSL: lightness scale 0-100% (step 10%), saturation 50%, hue 240° (blue)

hsluv is an altered version of HSL that tries to be perceptually uniform with regards to lightness. HSL lightness by comparison is hard to make contrast comparisons in.

What does that mean for us? Well, let’s take our above examples and recreate them in the HSLuv space:

HSLuv: Hue rotation 0-360 (step 60°), saturation 50%, lightness 50%

Saturation:

HSLuv: saturation scale 0-100% (step 10%), lightness 50%, hue 240° (blue)

Lightness:

HSLuv: lightness scale 0-100% (step 10%), saturation 50%, hue 240° (blue)

These scales definitely look more consistent when reasoning about lightness values. HSL’s hue feels all over the place by comparison – though at the same time that might be a more natural color mixing feel.

wikipedia link

The white point is a defined standard illuminate not intrinsic to the value of a color. It is an additional piece of information you provide to functions when converting into and out of the CIELAB colorspace.

The standard white point is defined as d65 – in this section, every conversion will be made with d65. Here is a table of commonly used white points and their meaning (for values, see the bottom of the wikipedia link).

The knobs A and B allow you to play with the 4 primary colors of the LAB space. If you take a look at the values, you might notice that the more negative we go, we get “cooler” colors, while on the positive end, we get “warmer” colors.

Let’s look at some LAB colors. The labels below will have the values of (L A B) – Remember, A is green to red, B is blue to yellow (each with a value -100 to 100)

lab scales: -A -> +A, -B -> +B, {-A,-B} -> {+A,+B}

LCH is a “cylindrical” version of cieLAB. What that means for us is that Hue is different. Instead of 6 defined islands to sail to with our color compass, there are 4:

LCH: Hue rotation 0-360 (step 90°), saturation 50%, luminance 50%

LCH lightness:

LCH: lightness scale 0-100% (step 10%), chromacity 50%, hue 270° (blue)

Chromacity, “distance from gray” - very similar to Saturation (which I’ve seen cited as simply misnamed chromacity):

LCH: chromacity scale 0-100% (step 10%), luminance 70%, hue 270° (blue)

Let’s compare some spaces. We’ll take some the RGB gradient from above, normalize the lightness in HSLuv and then maximize l[C]h, H[S]L, and H[S]Luv:

original

squash lightness to 50 in HSLuv

3 branches off of the above: LCH maximize C, HSL maximize S, HSLuv maximize S

For text, the Web Content Assembly Guidelines (WCAG) recommend at least a 4.5:1 contrast ratio: link. Let’s take a look at some different text contrasts! I will steal the backgrounds used here from the base-16 grayscale sets: #f7f7f7 and #101010. For reference, the contrast ratio between #000000 and #ffffff is 21.0

Dark:

dark contrast ratios, 3.0 - 9.0, step 1.0

Light:

light contrast ratios, 3.0 - 9.0, step 1.0

I think it’s pretty clear from these examples that higher contrast goes a long way in dark color schemes.

Color distance is a measure of how far apart colors are by properties in spaces. For example, let’s take the ’magenta’ color from above, and increase it’s brightness and hue until we’re some minimal distance away. We’ll aim for 33(out of 100) measured in the CIELAB space:

CIELAB distance from the start color is shown

Color distance is useful because it lets us measure a kind of similarity between colors. You can use this to control where you stop transformations (color space property tweaks).

A gradient is where you travel from one color’s initial property values to some other color’s property values, collecting the intermediate steps.

“Pastel Colors” when described in HSL have high lightness and low saturation. This means we can invent a function to “pastelize” a color, bit by bit (increasing lightness and lowering saturation). Let’s take a rather dark defined color #2d249f, and run it through with the same effect we have at the top of this page, making it more pastel until it’s brighter:

Color wheel rotations are all about hue. The circle that hue forms is the color wheel for that color space. Colors that are opposed here (180° away from each other) are complementary colors. One way to attempt to generate color palettes is to do “color wheel rotations” where you take colors around equidistant points around the color wheel. The hue values we’ve been showing are examples of a color wheel rotation (6 points around 60°)

Let’s say we we’ve played around in the LAB space to find a warm looking light background LAB(90,90,10), and then we darken it until we hit some minimal contrast (say, 3.9) for a starting color #816557, which has a hue of 19.6°. Let’s see what doing hue rotations on this color look like:

HSL: 120° rotation (hue value shown)

HSL: 90° rotation (hue value shown)

HSL: 72° rotation (hue value shown)

HSL: 60° rotation (hue value shown)

HSL: 45° rotation (take 6) (hue value shown)

Rotations around hue in different color spaces will yield different results. This can be a way to derive accent colors for use in a color-scheme.

CIELAB has a white point component used when entering and leaving the space. You can adjust the white point value that you use going into and then coming out of the space, allowing you to “adjust colors by white point”. This is kind of a weird concept. Let’s take the gradient at the top of this page and pass it into LAB with d65 (the standard assumption, sRGB) but pull it out using d50 (“Horizon Light, ICC profile PCS”). (This effect is mostly visible on grayscale colors, and esp on the lighter end):

original

transformed

Mapping color palettes through this transform could presumably get you better results in different lighting conditions. I’ve not played with it too much.

Now that I’d derived types of things I wanted, it was time to try out the techniques above to create colors fitting the slots:

• color wheel rotations
• complementary colors
• contrast levels through iteration
• “pastelize” until a minimum distance is reached
• using L[C]H for emphasis

At the time of this writing, I’m using a color rotation of 45° in the LCH space (starting from my foreground_, which is a darkened version of background) focusing on the bluish side of things for the accent colors. I get my background+ by graying out my accent2 (lowering C in LCH), and then lightening it until there’s a very low contrast between it and my background. For posterity, I will share this theme here:

Which in action looks like (click to see full size):

I store these in a hash table in emacs, so that I can always query the current theme from anywhere (eg elisp -r '(ht-get ns/theme :accent1)), allowing me to use my intended color preferences across many contexts.

I like free things. There are many base16 builders, including one for emacs – if I can map my palette to it, I can get free support for a wide array of emacs plugins and builtin packages!

Much playing around with the base16 emacs theme builder led me to this mapping:

This might look fairly comprehensive, but there’s SO much room for ambiguity in editor specific situations – base16 builders are forced to make stylistic decisions that you might not agree with. At least with the emacs base16 builder I found myself making some tweaks after the fact.

Now that the mapping has been created, with some glue I can use any of the base16 builders, giving me access to a wide array of templates and outputs for use with my color palette! Having room to “echo” your color decisions across many different applications is very satisfying.

• colorizer, an interactive color tool
• Peter Occil’s “Color Topics for Programmers”
• color-tools.el, my color utilities for emacs
• tarps, my base16 bootstrapping emacs themes
• WCAG: Luminance
• color theory and contrast ratios
• wiki: CIELAB
• wiki: sRGB

Chris Kempson for the base16 project

Shoutout to belak for work on the the base16 emacs theme builder

Thanks to the Axis of Eval, camille, and xero for all their feedback when I was posting way too many pictures of colors.