← all demos

Colour

A colour signal holds whatever the sketch wants — a hex string, the 0..1 triplet a shader takes, bytes, or a shape of your own — and addColor converts. mixColors joins two of them through OKLab, so the path between them keeps its light.

What each signal holds

The panel

panel.js
gui.addColor("Tint", tint);                         // "#ff6500"
gui.addColor("Glow", glow, { format: "rgb" });      // [1, 0.4, 0]
gui.addColor("Fill", fill, { format: "rgb255" });   // [255, 101, 0]

// anything else is two functions
gui.addColor("Sky", sky, {
  format: {
    toHex: ([h, s, l]) => hslToHex(h, s, l),
    fromHex: (hex, previous) => {
      const [h, s, l] = hexToHsl(hex);
      return [s === 0 ? previous[0] : h, s, l];     // a grey keeps its hue
    },
  },
});

mixColors("#ff6500", "#0066ff", 0.5);               // through OKLab
Try: pick a colour in each of the first four swatches and watch the readout — the same control writes a string, a 0..1 triplet, bytes and an [h, s, l]. Then press Pick grey in the hsl swatch: saturation drops to 0 and the hue stays where it was, because the codec is handed the value it replaces. Under Mixing, set From and To to opposites and compare the two strips — the lower one dims and greys in the middle, the upper one does not.