Relative color syntax derives a new color from an origin color by exposing its components for manipulation. It can darken a color, shift its hue, or add transparency while preserving other values. section 11.3.4
The syntax follows a practical sequence:
- Choose a color function such as oklch(), hsl(), or rgb(). section 11.3.4
- Write from followed by the origin color, then reference its components as variables. section 11.3.4
- Use calc() to change selected components while leaving others unchanged. section 11.3.4
Darken or recolor an accent
Use `--accent-blue: oklch(from var(--accent-green) l c calc(h + 100deg));` to preserve lightness and chroma while shifting hue. For transparency, use `oklch(from var(--brand-green) l c h / 0.6)`.
