I spent this afternoon reviewing the subset of the Modus themes’ colour palette that is used in the org-habit graph. In this post I present the technicalities of the endeavour. The gist of this publication is that picking colour values is hard.

Before I delve into the technicalities, I should inform you that I also took this opportunity to make all the variants of the org-habit graph work with the modus-themes-deuteranopia toggle, whereas before it only worked with the traffic-light style (check the doc string of modus-themes-org-agenda on what those styles are). In short: more power for users with red-green colour deficiency. Play around with these:

(setq modus-themes-deuteranopia t) ; try with nil too

(setq modus-themes-org-agenda
      '(;; ...
        ;; Other key . value pairs
        ;; ...
        (habit . nil)))

;; OR

(setq modus-themes-org-agenda
      '(;; ...
        ;; Other key . value pairs
        ;; ...
        (habit . simplified)))

;; OR

(setq modus-themes-org-agenda
      '(;; ...
        ;; Other key . value pairs
        ;; ...
        (habit . traffic-light)))

Now on to the minutia of picking colour values. Since I have started clocking my time with Org, I am informed that the edits in modus-themes.el took me 3 hours and 16 minutes. (This does not include the time required to compile the data and write this entry.) All those hours to produce this diff:

diff --git a/modus-themes.el b/modus-themes.el
index 7767acf..17f3362 100644
--- a/modus-themes.el
+++ b/modus-themes.el
@@ -495,18 +495,18 @@ (defconst modus-themes-operandi-colors
     ;; those background values should only be used for graphs or similar
     ;; applications where colored blocks are expected to be positioned
     ;; next to each other
-    (red-graph-0-bg . "#ef6f79")
-    (red-graph-1-bg . "#ff9f9f")
-    (green-graph-0-bg . "#49d239")
-    (green-graph-1-bg . "#6dec6d")
-    (yellow-graph-0-bg . "#efec08")
-    (yellow-graph-1-bg . "#dbff4e")
-    (blue-graph-0-bg . "#55a2f0")
-    (blue-graph-1-bg . "#7fcfff")
-    (magenta-graph-0-bg . "#ba86ef")
-    (magenta-graph-1-bg . "#e7afff")
-    (cyan-graph-0-bg . "#30d3f0")
-    (cyan-graph-1-bg . "#6fefff")
+    (red-graph-0-bg . "#ef7969")
+    (red-graph-1-bg . "#ffafa0")
+    (green-graph-0-bg . "#49c029")
+    (green-graph-1-bg . "#8fef00")
+    (yellow-graph-0-bg . "#ffcf00")
+    (yellow-graph-1-bg . "#f9ff00")
+    (blue-graph-0-bg . "#7090ff")
+    (blue-graph-1-bg . "#8fbfff")
+    (magenta-graph-0-bg . "#e07fff")
+    (magenta-graph-1-bg . "#fad0ff")
+    (cyan-graph-0-bg . "#70d3f0")
+    (cyan-graph-1-bg . "#afefff")
     ;; the following are for cases where both the foreground and the
     ;; background need to have a similar hue and so must be combined
     ;; with themselves, even though the foregrounds can be paired with
@@ -736,18 +736,18 @@ (defconst modus-themes-vivendi-colors
     ;; those background values should only be used for graphs or similar
     ;; applications where colored blocks are expected to be positioned
     ;; next to each other
-    (red-graph-0-bg . "#af0404")
-    (red-graph-1-bg . "#801f2f")
-    (green-graph-0-bg . "#24ba2f")
-    (green-graph-1-bg . "#0f8f07")
-    (yellow-graph-0-bg . "#ffd03e")
-    (yellow-graph-1-bg . "#d7d800")
-    (blue-graph-1-bg . "#2f50c8")
-    (blue-graph-0-bg . "#5f8fff")
-    (magenta-graph-0-bg . "#af7bee")
-    (magenta-graph-1-bg . "#7f59cf")
-    (cyan-graph-0-bg . "#47dcfa")
-    (cyan-graph-1-bg . "#0bc0df")
+    (red-graph-0-bg . "#bb0404")
+    (red-graph-1-bg . "#6f1f1f")
+    (green-graph-0-bg . "#24ba0f")
+    (green-graph-1-bg . "#1f6f00")
+    (yellow-graph-0-bg . "#f7ef00")
+    (yellow-graph-1-bg . "#b08600")
+    (blue-graph-0-bg . "#2fafef")
+    (blue-graph-1-bg . "#1f2f8f")
+    (magenta-graph-0-bg . "#bf94fe")
+    (magenta-graph-1-bg . "#5f509f")
+    (cyan-graph-0-bg . "#47dfea")
+    (cyan-graph-1-bg . "#00808f")
     ;; the following are for cases where both the foreground and the
     ;; background need to have a similar hue and so must be combined
     ;; with themselves, even though the foregrounds can be paired with

To be clear, these are very subtle differences in some cases. Consider, for instance a visualisation of one of the tables presented below with rainbow-mode enabled (check my dotemacs for relevant configs):

Technical considerations on the usage of those colours

What we are dealing with here are pairs of colour values with a subtle and an intense variant. Here are screenshots of how the org-habit graph looks by default (though do check modus-themes-org-agenda).

Modus Operandi (the light theme):

Modus Vivendi (the dark theme):

Unlike most colour combinations where we have a foreground value that is intended to be used by text and we compare it to a background value to arrive at a minimum contrast in relative luminance of 7:1 (per the modus-themes-contrast function), the org-habit colours are all backgrounds. This means that the 7:1 contrast ratio is not pertinent to our consideration as we are not testing the legibility of text. Instead, we have to measure the proximity in colour space of background values in comparison to each other or, more precisely, in relation to colours that appear adjacent to them in their particular context (i.e. we are not particularly interested in all possible combinations).

Furthermore, because of differences in colour perception between light and dark themes, we must treat modus-operandi and modus-vivendi in their own right. This is not some simplistic exercise in colour inversion. To clarify: it is easier to discern colour differences between bright colours than subdued ones regardless of actual distance in colour space. The brighter background colours are used with modus-operandi so you will notice that the distance between them for some of the pairs of red, green, yellow, blue, magenta, cyan is smaller than in modus-vivendi (note that we use “magenta” for naming consistency, though sometimes the actual colour is violet or purple for the purposes of context-dependent variation).

Unfiltered data of the changes

In the following tables, we show the overall effect of those changes. The built-in colour-distance function is written as Δ thanks to (defalias #'Δ #'color-distance). There is no need to focus on the exact distance value, but mostly on the relative effect. In the next section we elaborate on the particularities.

[ The formula for those tables which were written in Org notation is #+TBLFM: $2='(Δ $1 @1$2) :: $3='(Δ $1 @1$3) :: $4='(Δ $1 @1$4) :: $5='(Δ $1 @1$5) :: $6='(Δ $1 @1$6) :: $7='(Δ $1 @1$7) :: $8='(Δ $1 @1$8) :: $9='(Δ $1 @1$9) :: $10='(Δ $1 @1$10) :: $11='(Δ $1 @1$11) :: $12='(Δ $1 @1$12) :: $13='(Δ $1 @1$13). ]

OLD Modus Operandi graph (org-habit) colour distance in hueness:

NEW Modus Operandi graph (org-habit) colour distance in hueness:

OLD Modus Vivendi graph (org-habit) colour distance in hueness:

NEW Modus Vivendi graph (org-habit) colour distance in hueness:

Particular requirements for each theme

For modus-operandi the intent was two-fold: (i) to reduce the overall intensity of most values without undermining their utility and (ii) to fine-tune specific colour combinations. Here is a comparison of old and new value pairs.

Modus Operandi graph (org-habit) colour pair distance in hueness:

Notice that yellow and blue pairs have been brought closer, despite the general trend to amplify the distinction between the values in each pair (well “amplify” may give the wrong impression as these are subtle tweaks—check again the first screenshot). This reduction may seem like an error, though it is part of the design (and why we must look at things holistically without following every rule to the letter while remaining oblivious to its spirit). Consider that the old subtle yellow (#dbff4e) was too close to the subtle red (#ff9f9f), while the old subtle green (#6dec6d) was far closer to its corresponding blue (#7fcfff) than what it should have been. Those combinations appear next to each other and thus need to be accounted for. The following table illustrates this point:

Modus Operandi select graph (org-habit) colour pairs distance in hueness:

The new colours work better in general, but let us not belabour the point.

For modus-vivendi the task was somewhat more straightforward as all we had to do was to tone down the colours while paying attention to inter-pair relations. This is paradoxically more tricky to convey with raw data as one has to compare the visuals of the before and after states (it is easier to discern colours on a dark backdrop because “colour” is an expression of light). Suffice to say that we have eliminated any exaggerations without making compromises on the relevant functionality. Still, we managed to amplify the colour distance almost across the board while avoiding any overshoot in intensity. This table compares each pair of intense and subtle hues:

Modus Vivendi graph (org-habit) colour pair distance in hueness:

Now here comes the counter-intuitive part. For modus-operandi the yellow+red as well as green+blue combinations had to be rendered more clear. Whereas for modus-vivendi we had to bring those colours closer to each other to avoid exaggerations in intensity. Remember that modus-vivendi has a black background, so any extra intensity is immediately noticeable.

Modus Vivendi select graph (org-habit) colour pairs distance in hueness:

Tricky though perhaps dull

I understand this is not an interesting topic and it probably is too difficult to relate to the various data points without visualising them and comparing the before and after states. Furthermore, data can be deceptive and I have always maintained that theme development stands at the intersection of science and art (at least for the purposes of conforming with the rigorous accessibility standards of the Modus themes).

That granted, I wanted to shed light on the “behind the scenes” work that is not immediately obvious when one checks a diff that introduces some seemingly trivial tweaks like #49d239 -> #49c029 or #7fcfff -> #8fbfff.