CSS Relative Color

v1.0.0

Relative color syntax helper — derive variants (lighter / saturated / mixed) from one base.

Base color

Color space

Relative Color CSS

:root { --base: #1a73e8; }

.element {
  /* Lighter variant */
  color: oklch(from var(--base) calc(l + 0.15) c h);
  /* Darker variant */
  background: oklch(from var(--base) calc(l - 0.1) c h);
  /* Less saturated */
  border-color: oklch(from var(--base) l calc(c * 0.5) h);
  /* Complementary hue */
  outline-color: oklch(from var(--base) l c calc(h + 180));
  /* Alpha tint */
  box-shadow: 0 0 0 3px oklch(from var(--base) l c h / 0.3);
}

/* Browser support: Chrome 119+, Safari 16.4+, Firefox 128+ */