Bitwise Legacy: Hexadecimal notation

Hexadecimal notation (or "Hex") is the ubiquitous standard for specifying color on the web. It represents colors as a six-digit code (e.g., #317CFF) mapping to the intensity of Red, Green, and Blue channels. While Hex is the lingua franca of design-to-development handoff, it is a hardware-centric model that represents significant technical debt when building accessible, wide-gamut interfaces.

The Technical Anatomy: 24-bit and 32-bit Logic

Hex codes are formed by concatenating three (or four) bytes in base-16 notation:

  • Byte 1: Red value (00 to FF)
  • Byte 2: Green value (00 to FF)
  • Byte 3: Blue value (00 to FF)
  • Byte 4 (Optional): Alpha transparency (00 to FF), introduced in CSS Color Level 4.

While the 8-bit-per-channel model allows for over 16.7 million combinations, it is strictly bound to the sRGB color space—a coordinate system designed for 1990s CRT monitors.

The Strategic Critique: Bits vs. Biology

From a Startup Strategist’s perspective, Hexadecimal is a "black box" that obscures the functional properties of color.

  1. Mathematical Linearization!= Perceptual Uniformity: Hex values are linear in terms of hardware intensity but non-uniform to human eyes. Increasing a Hex value by 10 units in blue looks significantly different than doing the same in yellow.
  2. Gamut Bottleneck: Because Hex is anchored to sRGB, it cannot address the vibrant, high-chroma colors available in Display P3 or Rec. 2020 gamuts found on modern displays.
  3. The "Manual Tweak" Trap: Deriving a hover state from a Hex code (e.g., #317CFF) requires manual calculation or external tools. This "trial-and-error" workflow is the antithesis of a robust engineering philosophy.

Hex as an "Origin Seed" in Espalier

In the Espalier framework, we treat Hexadecimal as a legacy entry point. We use it as a "seed" to be destructured via Relative Color Syntax. By using the from keyword, the CSS engine converts the machine-centric Hex into the perceptually uniform OKLCH space for runtime manipulation:

/* Defensible Architecture: Using Hex as a Seed */
.button {
  --seed-hex: #317CFF;
  background: oklch(from var(--seed-hex) l c h);
}

.button:hover {
  /* Predictably lightened by 5% regardless of the seed hue */
  background: oklch(from var(--seed-hex) calc(l + 0.05) c h);
}

This strategy allows Taproot IO to maintain compatibility with legacy brand assets while building a modern, reactive "Color API."

Challenge the Assumption: "Exact Match"

A common assumption is that Hex ensures a "perfect match" across screens. We challenge this. Because Hex lacks a built-in luminance model, it does not account for differences in display technology or viewing conditions. To achieve a truly consistent brand experience, we must prioritize Perceptual Parity over Numerical Parity.

Technical Reference: 8-Bit Swatches

The following visualization displays common Hexadecimal pairings. Note how the perceived "weight" of these colors fluctuates despite having similar bitwise increments—a direct result of the sRGB model's non-linearity.

<ul id="hex-swatches"></ul>
<script>
  const theUl = findByTagName("ul");
  // Reference values for visualization
  const examples =;

  for(const item of examples) {
    const li = htmlToNode(`<li style="background: ${item.hex}; color: ${getContrastingFromHex(item.hex)}">${item.name}<br />${item.hex}</li>`);
    theUl.appendChild(li);
  }
</script>

Where does this show?