palette

that, as well as the ui buttons, are handwritten-ish svg, because i have something wrong with me.

anyway, if you include an svg in a document as an <object>, rather than a regular image, then its structure is available in javascript as an XMLDocument. so i can just update the palette the same way as the main image, like

const paletteObj = document.getElementById('palette') as HTMLObjectElement;
const palette = paletteObj.contentDocument as XMLDocument | null;
if (palette) {
  palette.documentElement.style.setProperty('--hue', `${oklch.outer.h}`);

  for (const layer of Color.allLayers) {
    const col = rgb[layer].css();
    const item = palette.getElementById(`i-${layer}`);
    if (item) { item.style.setProperty('--col', col); }
    // etc
  }
}

permalinks

the “names” are used as a seed to the random number generator. since the colours are picked in the same order each time, that’s all you need.

however. javascript’s Math.random isn’t seedable. so i used this generator off stack overflow, which seems to work pretty well. unlike the first one i tried.

editable name field

the name on the page is editable, so you can type into there instead of the url. i think that is more pleasant.

instead of being an <input> or <textarea>, it’s a regular ol’ <span> with contenteditable set. the reason for this is that text inputs are only a single line, and textareas don’t seem to support dynamic resizing.

one slight downside to this is that at the time of writing firefox doesn’t support the contenteditable=plaintext property. which means you can paste anything at all into that box. like images.

the current fix is to just strip all the formatting, which is easy to do by setting the innerText to itself.

const seed = elem.innerText = elem.innerText;

the innerText property already has everything but text nodes stripped, and modifying it causes the element’s previous contents to be replaced. magic!

being able to set the name to an image is pretty funny, though. i want to re-add that in some way in future.

history

the page remembers your last hundred colour schemes. since they’re fully determined by the seed (that is the point of it, after all), it just shoves a list of those into localStorage. when reloading it cleans them up a bit by removing duplicates, but that’s pretty much it.