CSS Function
from (keyword)
Relative color syntax creates new colors by modifying individual channels of an existing color using the from keyword.
Syntax
color-function(from origin-color channel1 channel2 channel3 / alpha)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| from | keyword | Yes | Keyword indicating the origin color follows |
| origin-color | color | Yes | The base color to derive from |
| channels | calc expressions | Yes | New channel values, may reference origin channels by name (r, g, b, h, s, l, etc.) |
Examples
Lighten a color
Increases lightness by 0.2 while keeping chroma and hue.
css
background: oklch(from var(--brand) calc(l + 0.2) c h);Desaturate in HSL
Reduces saturation of blue-500 by 30%.
css
color: hsl(from #3b82f6 h calc(s - 30%) l);Change hue only
Keeps lightness and chroma, sets hue to 180 (teal).
css
border-color: oklch(from var(--accent) l c 180);Browser Support
✓
Chrome
v119++
✓
Firefox
v128++
✓
Safari
v16.4++
✓
Edge
v119++
✓
Opera
v105++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
No direct utility. Use arbitrary values with relative color syntax in Tailwind v4+Frequently Asked Questions
Can I use calc() with relative color channels?▼
Yes. Channel references (l, c, h, r, g, b, etc.) can be used in calc() expressions to create computed channel values.
Which color space is best for relative colors?▼
OKLCH is recommended because modifying one channel (e.g., lightness) has predictable, uniform visual results.
Explore CSS Color Tools
Try our free tools to work with from (keyword) and other CSS color functions.
Open Tools