Project Beige: Darken ColorBrewer colors for more contrast

package.json

@@ -80,6 +80,7 @@
         "classnames": "^2.5.1",
         "codemirror": "5",
         "colorbrewer": "^1.3.0",
+        "colorjs.io": "^0.5.2",
         "cookie-parser": "^1.4.4",
         "d3": "^6.1.1",
         "dayjs": "^1.11.11",

packages/@ourworldindata/grapher/src/color/ColorBrewerSchemes.ts

@@ -4,6 +4,8 @@
     ColorSchemeInterface,
     ColorSchemeName,
 } from "@ourworldindata/types"
+import ColorJS from "colorjs.io"
+import { memoize } from "@ourworldindata/utils"
 
 type ColorSchemeProps = { displayName: string; singleColorScale: boolean }
 
@@ -59,6 +61,14 @@
     PuBu: { displayName: "Purple-Blue shades", singleColorScale: true },
 } as const
 
+const _darkenColorForContrast = (color: string) => {
+    const col = new ColorJS(color)
+    col.oklab.l *= 0.95
+    return col.toString({ format: "hex" })
+}
+
+const darkenColorForContrast = memoize(_darkenColorForContrast)
+
 export const getColorBrewerScheme: (
     name: string
 ) => ColorSchemeInterface | undefined = (name: string) => {
@@ -69,7 +79,10 @@
 
     const colorSetsArray: Color[][] = []
     Object.keys(colorSets).forEach(
-        (numColors) => (colorSetsArray[+numColors] = colorSets[numColors])
+        (numColors) =>
+            (colorSetsArray[+numColors] = colorSets[numColors].map(
+                darkenColorForContrast
+            ))
     )
     return {
         name,

yarn.lock

@@ -8412,6 +8412,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"colorjs.io@npm:^0.5.2":
+  version: 0.5.2
+  resolution: "colorjs.io@npm:0.5.2"
+  checksum: 10/a6f6345865b177d19481008cb299c46ec9ff1fd206f472cd9ef69ddbca65832c81237b19fdcd24f3f9540c3e6343a22eb486cd800f5eab9815ce7c98c16a0f0e
+  languageName: node
+  linkType: hard
+
 "columnify@npm:1.6.0":
   version: 1.6.0
   resolution: "columnify@npm:1.6.0"
@@ -11881,6 +11888,7 @@ __metadata:
     classnames: "npm:^2.5.1"
     codemirror: "npm:5"
     colorbrewer: "npm:^1.3.0"
+    colorjs.io: "npm:^0.5.2"
     cookie-parser: "npm:^1.4.4"
     cypress: "npm:9.3.1"
     d3: "npm:^6.1.1"