Creating Perfect Grayscale-Gradient Colormaps

Creating Perfect Grayscale-Gradient Colormaps

When reviewing the submission instruction for a conference, I was reminded that the figures in my paper need to be “accessible” when printed in grayscale.

Usually, this would be done by adding patterns like triangles and circles in the plot. However, we were plotting stacked areas like the left one below, which contains dense and tiny vertical bars, so a grayscale gradient seems to be our only option.

I found nice grayscale-gradient “sequential” Matplotlib colormaps like the right one above, but they make it impossible to hand-pick a distinct and pretty color for each category.

“This is not a big deal,” I thought, “I’ll just use HSL (hue-saturation-lightness), set $s$ to $1$ , $l$ to a gradient, and hand-pick the $h$ .” Except I was so wrong—lightness is not grayscale, and figuring everything out took me the whole morning.

Result: hand-picked hues and perfect grayscale gradient

After wasting an hour failing to find any implementation on the Internet, I rolled my own scripts to calculate RGB color values from hue and grayscale, which allowed hand-picking hues while still having perfect grayscale gradient:

Grayscale-gradient stacked area plot in grayscale

Below is the definition of these six colors. I hand-picked the hue values so each color looks natural, but the grayscale values are sampled linearly.

COLORS6: Final = tuple(
    hue_grayscale_to_srgb(hue, grayscale)
    for hue, grayscale in zip(
        [60, 180, 120, 240, 0, 300],
        np.linspace(0.96, 0.2, 6),
    )
)

As a trade-off, I spent some time doing math on a whiteboard.

Math: calculating linear RGB from hue and grayscale

Math for hue-grayscale to RGB conversion on a whiteboard

After some Wikipedia’ing, I extracted the formula for RGB-HSL and RGB-grayscale conversions, and did the math on the whiteboard above. For a color with linear red, green, blue values $r, g, b \in [0, 1]$ , hue $h \in [0, 360)$ , saturation $s \in [0, 1]$ , lightness $l \in [0, 1]$ , and grayscale $p \in [0, 1]$ :

$x y z c h h^{'} l s R p := max {r, g, b} := mid {r, g, b} := min {r, g, b} := x - z =: h^{'} \cdot 60° = ⎩ ⎨ ⎧ \frac{g - b}{c} mod 6 \frac{b - r}{c} + 2 \frac{r - g}{c} + 4 if x = r if x = g if x = b = \frac{x + z}{2} = \frac{c}{1 - ∣2 l - 1∣} := 0.2126, G := 0.7152, B := 0.0722 b = R r + G g + B b maximum RGB value middle RGB value minimum RGB value chroma \frac{1}{60} hue if l \neq = 0, 1$

Recall that we know $h$ and $p$ , and want to solve for $r$ , $g$ , and $b$ . The easiest bit is exploiting saturation $s = 1$ and the formula for it:

$1 = \frac{x - z}{1 - ∣2 \frac{x + z}{2} - 1∣} \Rightarrow {x = 1 z = 0 if x + z \geq 1 if x + z < 1$

The many conditions of the hue is a source of nightmare for simplification. Fortunately, I observed the formula for $h^{'}$ and found out only the order of the three RGB values matters if I introduce a new variable $k$ :

$k \Rightarrow k := ⎩ ⎨ ⎧ 6 - h^{'}, h^{'}, 2 - h^{'}, h^{'} - 2, 4 - h^{'}, h^{'} - 4, if h^{'} \in [5, 6) if h^{'} \in [0, 1) if h^{'} \in [1, 2) if h^{'} \in [2, 3) if h^{'} \in [3, 4) if h^{'} \in [4, 5) (i.e. r > b > g) (i.e. r > g > b) (i.e. g > r > b) (i.e. g > b > r) (i.e. b > g > r) (i.e. b > r > g) = \frac{y - z}{x - z}$

Since we can get the order of $r, g, b$ from $h$ , we can also know the grayscale coefficient $k_{i}$ for $i = x, y, z$ . For example, if $r > g > b$ , then we have:

$x = r, y = g, z = b k_{x} = R, k_{y} = G, k_{z} = B \Rightarrow p = k_{x} x + k_{y} y + k_{z} z$

That is, we need to solve this linear system:

$\Rightarrow {x = 1 z = 0 if x + z \geq 1 if x + z < 1 k = \frac{y - z}{x - z} p = k_{x} x + k_{y} y + k_{z} z {x = \frac{p}{k _{x} + k _{y} k}, x = 1, y = k x, y = (1 - k) z + k, z = 0 z = \frac{p = k _{x} - k _{y} k}{k _{y} ( 1 - k ) + k _{z}} if x + z < 1 if x + z \geq 1$

This is then trivial to program. In the code, I first compute a potential answer using the first case, then fall through to the second case if the resulting $x + z \geq 1$ , and then, boom! We have the RGB values from hue and grayscale.

…except we don’t.

Linear RGB vs standard RGB

RGB values computed from a linear grayscale gradient using the code above does not produce a grayscale gradient. In fact, I found some colors to have very similar grayscale.

This is because the RGB values we computed are linear RGB values, and monitors use standard RGB (sRGB) instead, with the conversion:

$C_{sRGB} = {12.92 C_{linear} 1.055 C_{linear}^{1/2.4} - 0.055 if C_{linear} \leq 0.0031308 if C_{linear} > 0.0031308$

Why apply a weakly concave curve to RGB values? It turns out that human eyes are less sensitive to changes in bright colors, and so the curved sRGB values better reflect the perceived brightness.

Applying this knowledge to creating a grayscale gradient colormap, we need to first generate the gradient in sRGB, then convert each grayscale to linear RGB and apply the hue-grayscale to linear RGB conversion, and finally convert them back to sRGB. And, that is it! A perfect grayscale-gradient colormap with hand-picked hues.

Exercise for the reader

We fixed $s \equiv 1$ above, but what if we want to be able to change the saturation? Can you solve the system for $r, g, b$ given $h, s, p$ ?

2024-05-25

Steven Hé (Sīchàng)’s Blogs