Relative color syntax (from)

Baseline 2024 (Chrome 119, Safari 16.4, Firefox 128).

Chrome 119Edge 119Safari 16.4Firefox 128

Pega uma cor existente e reescreve seus canais: `oklch(from var(--brand) calc(l + .2) c h)` cria um tom mais claro, `rgb(from currentColor r g b / .3)` uma versão translúcida. Temas podem ser derivados de uma cor de entrada em tempo de execução.

CSS

.fx-008 button{
  --bg:var(--brand);
  background:var(--bg);color:oklch(from var(--bg) calc(l + .55) .02 h);
  border:1px solid oklch(from var(--bg) calc(l - .15) c h);
  padding:10px 16px;border-radius:8px;font:600 15px system-ui;margin-right:8px;
}
.fx-008 .ghost{background:oklch(from var(--brand) l c h / .12);color:oklch(from var(--brand) calc(l - .1) c h)}
.fx-008 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<div class="fx-008" style="--brand:#7c3aed">
  <button>Primary</button><button class="ghost">Ghost</button>
</div>

Fallback: Defina um valor de fallback simples primeiro; navegadores sem suporte ignoram a linha de cor relativa. Proteja com `@supports (color: rgb(from red r g b))` quando o layout depender disso.

Fonte: developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors

Prompt

Use a sintaxe de cor relativa para derivar variantes de um token: `oklch(from var(--brand) calc(l + 0.2) c h)` para tons claros, `calc(l - 0.2)` para sombras, alpha `/ 0.15` para preenchimentos sutis. Trabalhe em oklch (não rgb) para os ajustes ficarem perceptualmente uniformes, e limite a luminosidade com `clamp(0, calc(l + .2), 1)` onde for preciso.