Stupid linear color space tricks – demo

Author

Carlos Scheidegger

Published

February 8, 2025

So I posted some experiments on Bluesky, and some folks asked me to explain it. That will take a bit of time. In the meantime though (I’m literally 30k feet up in the air right now…), I wanted to upload a demo so you can do it yourself.

This is not the blog post explaining it!

It’s just a basic demo. If you want to jump to the important bits of javascript, those are:

(And you can always hit View Source for the full story.)

Controls

The controls start with a simple “dark mode” autobranding. To activate it, click the toggle below.

function hexToRgb(hex) {
    // Remove '#' if present
    hex = hex.replace(/^#/, '');
    
    // Parse the hex values to integers and normalize to 0-1
    const r = parseInt(hex.slice(0, 2), 16) / 255;
    const g = parseInt(hex.slice(2, 4), 16) / 255;
    const b = parseInt(hex.slice(4, 6), 16) / 255;
    
    return [r, g, b];
}

viewof fg = Inputs.color({label: "foreground", value: "#ffffff"});
viewof bg = Inputs.color({label: "background", value: "#000000"});
viewof activated = Inputs.toggle({label: "active", value: false});

import { autoBrand, filterEntry } from "./autobrand.ts";

fgVec = hexToRgb(fg)
bgVec = hexToRgb(bg)
{
    const svgFilter = document.querySelector("#filter-autobrand");
    svgFilter.innerHTML = filterEntry(
      autoBrand(
        [[0,0,0], [1,1,1]], 
        [fgVec, bgVec]
      )
    );
}

{
  if (activated) {
    document.querySelector("html").classList.add("autobrand");
  } else {
    document.querySelector("html").classList.remove("autobrand");
  }
}

Static Graphics

Interactive Graphics

GT

num	char	fctr	date	time	datetime	currency	row	group
1.111e-01	apricot	one	2015-01-15	13:35	2018-01-01 02:22	49.950	row_1	grp_a
2.222e+00	banana	two	2015-02-15	14:40	2018-02-02 14:33	17.950	row_2	grp_a
3.333e+01	coconut	three	2015-03-15	15:45	2018-03-03 03:44	1.390	row_3	grp_a
4.444e+02	durian	four	2015-04-15	16:50	2018-04-04 15:55	65100.000	row_4	grp_a
5.550e+03	NA	five	2015-05-15	17:55	2018-05-05 04:00	1325.810	row_5	grp_b
NA	fig	six	2015-06-15	NA	2018-06-06 16:11	13.255	row_6	grp_b
7.770e+05	grapefruit	seven	NA	19:10	2018-07-07 05:22	NA	row_7	grp_b
8.880e+06	honeydew	eight	2015-08-15	20:20	NA	0.440	row_8	grp_b

Notes, caveats

The luminance of the colors is a bit wonky. For example, you need to select a very dark background for the effect to work. I think I know the reason, but I’m not confident enough to write it down here.

The color picker controls will look very weird when the effect is active. This is the transformation stepping on its own toes. I believe can be fixed with a bit more love and care.

--- format: html title: Stupid linear color space tricks -- demo author: Carlos Scheidegger date: 2025-02-08 echo: false warning: false code-tools: true --- So I posted [some experiments](https://bsky.app/profile/did:plc:ls5433sf4bxpw53d47y7f2of/post/3lholdvtvjc2i) on Bluesky, and some folks asked me to explain it. That will take a bit of time. In the meantime though (I'm literally 30k feet up in the air right now...), I wanted to upload a demo so you can do it yourself. ## This is not the blog post explaining it! It's just a basic demo. If you want to jump to the important bits of javascript, those are: - [color.js](./color.js) - [autobrand.js](./autobrand.js) (And you can always hit View Source for the full story.) ## Controls The controls start with a simple "dark mode" autobranding. To activate it, click the toggle below. ```{=html} <style> .autobrand { filter: url("#filter-autobrand") } </style> <div style="display: hidden"> <svg class="defs-only" id="filterDefs" width=0 height=0> <filter id="filter-autobrand"/> </svg> </div> ``` ```{ojs} function hexToRgb(hex) { // Remove '#' if present hex = hex.replace(/^#/, ''); // Parse the hex values to integers and normalize to 0-1 const r = parseInt(hex.slice(0, 2), 16) / 255; const g = parseInt(hex.slice(2, 4), 16) / 255; const b = parseInt(hex.slice(4, 6), 16) / 255; return [r, g, b]; } viewof fg = Inputs.color({label: "foreground", value: "#ffffff"}); viewof bg = Inputs.color({label: "background", value: "#000000"}); viewof activated = Inputs.toggle({label: "active", value: false}); ``` ```{ojs} //| output: false import { autoBrand, filterEntry } from "./autobrand.ts"; fgVec = hexToRgb(fg) bgVec = hexToRgb(bg) { const svgFilter = document.querySelector("#filter-autobrand"); svgFilter.innerHTML = filterEntry( autoBrand( [[0,0,0], [1,1,1]], [fgVec, bgVec] ) ); } { if (activated) { document.querySelector("html").classList.add("autobrand"); } else { document.querySelector("html").classList.remove("autobrand"); } } ``` ## Static Graphics ```{r} #| warning: false library(ggplot2) library(palmerpenguins) ggplot(penguins, aes(x=bill_depth_mm, y=bill_length_mm, colour=species)) + geom_point() ``` ## Interactive Graphics ```{r} library(leaflet) orstationc <- read.csv("orstationc.csv", as.is=T) pal <- colorQuantile("YlOrRd", NULL, n = 8) leaflet(orstationc) %>% addTiles() %>% addCircleMarkers(color = ~pal(tann)) ``` ## GT ```{r} library(gt) exibble |> gt() |> data_color( method = "numeric", palette = c("red", "green") ) ``` ## Notes, caveats The luminance of the colors is a bit wonky. For example, you need to select a _very_ dark background for the effect to work. I think I know the reason, but I'm not confident enough to write it down here. The color picker controls will look very weird when the effect is active. This is the transformation stepping on its own toes. I believe can be fixed with a bit more love and care.