Hardware Intensity: RGB and RGBA Notation

RGB (Red, Green, Blue) is an additive color model that corresponds directly to the physical subpixels of a digital display. By specifying the intensity of light for each channel—typically on a scale of 0 to 255 —engineers can produce over 16.7 million colors within the sRGB gamut. RGBA extends this model with an Alpha channel ( 0 to 1 ) for transparency.

While foundational to computer graphics, RGB is a hardware-centric "instruction set" that fails to account for how the human visual system actually perceives light and contrast.

The Strategic Critique: Non-Perceptual Logic

From a technical leadership perspective, relying on raw RGB values for UI logic introduces several architectural risks:

  1. Channel Correlation: In RGB, a color's "brightness" is distributed across all three channels. This makes it impossible to adjust a color's lightness (e.g., for a hover state) by changing a single number. To lighten rgb(42, 115, 182), you must recalculate all three values, a process that is mathematically tedious and prone to error.
  2. Numerical vs. Visual Change: The RGB space is non-uniform. A +20 unit increase in the Blue channel creates a negligible visual change, whereas a +20 unit increase in the Green channel creates a massive leap in perceived brightness.
  3. Gamut Invisibility: Standard RGB notations are locked to the sRGB color space. Modern high-end displays (like OLED and P3 panels) can display significantly more saturated colors that the traditional rgb() function simply cannot address.

RGB as an "Origin Seed" in Espalier

In the Espalier framework, we deprecate RGB for production styling logic but retain it as a legacy "Origin Seed." Because legacy assets and third-party libraries often output RGB strings, we utilize Relative Color Syntax to convert these values into the authoritative OKLCH engine at runtime.

/* Espalier Implementation Pattern */
.surface {
  --seed-rgb: rgb(42, 115, 182);
  /* The browser converts hardware bits into perceptual coordinates */
  background: oklch(from var(--seed-rgb) l c h);
}

.surface--active {
  /* Predictably lightened regardless of the incoming RGB seed */
  background: oklch(from var(--seed-rgb) calc(l + 0.08) c h);
}

This strategy ensures that your component library remains reactive and accessible, even when consuming legacy hardware-level data.

Challenge the Assumption: "Intuitive Math"

Many developers believe that rgb(255, 255, 255) is "logical" because it matches hardware subpixels. We challenge this assumption. In a design system, logic should follow the user's perception, not the monitor's wiring. Building a system on RGB is like building a house by counting individual atoms rather than measuring rooms.

For a defensible architecture, move your logic into OKLCH.

Where does this show?