Unicode

Details

Moving the Selector slider changes four values:

• The index number for the UTF-8 character to display. (There are 297,334 characters. Technically they're different from Unicode, but we're gonna ignore that.)
• An oklch() lightness value between 50-90%.
• An oklch() chroma value between 0.08-0.18.
• An oklch() hue value between 0-360.

Collectively it assigns a unique color to each character that change as you move the selector.

Here's the code (which, of course, uses bitty)

The HTML

<bitty-2-0 data-connect="UniColor">
  <p>
    What colors are unicode characters? Let's find out:
  </p>
  <div data-receive="unicolor"></div>
  <label>Selector
    <input type="range" value="0" 
      min="0" max="297334" step="1"
      data-send="unicolor"
    />
  </label>
</bitty-2-0>

The CSS

input {
  width: 100%;
}

[data-receive=unicolor]{
  display: flex;
  justify-content: center;
  color: oklch(var(--lightness) var(--chroma) var(--hue));
  height: 50vh;
  font-size: 30vh;
}

The JavaScript

function mapRange(x, y) {
  return (
    (x[1] - x[2]) * y[0] +
    (x[2] - x[0]) * y[1]
  ) /
    (x[1] - x[0]);
}

window.UniColor = class {
  unicolor(event, el) {
    const inValue = parseInt(
      event.target.value,
    );
    const lightness = mapRange(
      [0, 297334, inValue],
      [50, 90],
    );
    const chroma = mapRange(
      [0, 297334, inValue],
      [0.08, 0.18],
    );
    const hue = mapRange(
      [0, 297334, inValue],
      [0, 360],
    );
    this.api.setProp("--lightness", `${lightness}%`);
    this.api.setProp("--chroma", chroma);
    this.api.setProp("--hue", hue);
    el.innerHTML = String.fromCharCode(event.target.value);
  }
};