# Relative color syntax (from)

Estado: Baseline 2024 (Chrome 119, Safari 16.4, Firefox 128).  
Fuente: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors  
Página: https://designforai.dev/es/css/relative-color-syntax

Toma un color existente y reescribe sus canales: `oklch(from var(--brand) calc(l + .2) c h)` crea un tinte más claro, `rgb(from currentColor r g b / .3)` una versión translúcida. Los temas pueden derivarse de un solo color de entrada en tiempo de ejecución.

## HTML

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

## CSS

```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; }
```

Fallback: Pon primero un valor plano de respaldo; los navegadores sin soporte ignoran la línea de color relativo. Protégelo con `@supports (color: rgb(from red r g b))` cuando el layout dependa de ello.

## Prompt

Usa la sintaxis de color relativo para derivar variantes de un solo token: `oklch(from var(--brand) calc(l + 0.2) c h)` para tintes, `calc(l - 0.2)` para sombras, alfa `/ 0.15` para rellenos sutiles. Trabaja en oklch (no en rgb) para que los ajustes se mantengan perceptualmente uniformes, y acota la luminosidad con `clamp(0, calc(l + .2), 1)` donde haga falta.