RGB and RGBA

RGB describes a color through its red, green, and blue channels. CSS rgb() values use the sRGB color space. RGBA adds an alpha value for transparency.

RGB values do not provide a separate perceived-lightness channel. Changing one channel can affect hue and brightness together, so channel arithmetic is a poor way to derive consistent hover states or text contrast.

Use RGB as an input

Espalier accepts rgb() seed colors and converts them to its internal OKLCH model. You can keep a brand color supplied in RGB when configuring a theme.

In application CSS, relative color syntax lets the browser convert an RGB value before adjusting its lightness:

.surface {
  --seed-rgb: rgb(42, 115, 182);
  background: oklch(from var(--seed-rgb) l c h);
}

.surface--active {
  background: oklch(from var(--seed-rgb) calc(l + 0.08) c h);
}

For themed components, prefer semantic tokens so colors follow the active scheme. Check contrast when deriving custom foreground and background pairs.