CSS Relative Colors
CSS Relative Colors allow you to define a new color based on an existing color (the "origin" color). This enables powerful dynamic color manipulation directly in CSS, such as adjusting opacity, lightness, or hue relative to a base theme color.
1. The Syntax
The syntax uses the from keyword inside standard color functions like rgb(), hsl(), lch(), oklch(), etc.
/* General Syntax */
color-function(from <origin-color> channel1 channel2 channel3 / alpha)from <origin-color>: The base color you are starting with (can be a hex, named color, or variable).- Channels: Variables representing the channels of the origin color in the specified color space (e.g.,
r,g,bforrgb;h,s,lforhsl). You can use these variables in calculations or replace them with new values.
2. Changing Opacity
The most common use case is taking an opaque color variable and making it transparent.
:root {
--brand: <a href='/?search=%230000ff' class='obsidian-tag'>#0000ff</a>; /* Blue */
}
.overlay {
/* Take --brand, keep r, g, b the same, set alpha to 50% */
background-color: rgb(from var(--brand) r g b / 50%);
}3. Adjusting Lightness (Darken/Lighten)
You can use calc() on the channel variables to modify the color.
.button {
background-color: var(--brand);
}
.button:hover {
/* Darken by reducing lightness by 20% */
background-color: hsl(from var(--brand) h s calc(l - 20%));
}4. Adjusting Hue (Complementary Colors)
You can rotate the hue to find complementary or analogous colors.
.complementary {
/* Rotate hue by 180 degrees */
color: hsl(from var(--brand) calc(h + 180) s l);
}5. Converting Color Spaces
Relative colors also act as a converter. If you use rgb(from red ...), the red keyword is converted to the RGB space, and you get access to its r, g, and b values.
/* Convert a hex color to HSL and change saturation */
color: hsl(from <a href='/?search=%23ff0000' class='obsidian-tag'>#ff0000</a> h 50% l);programming/css/css programming/css/colors-and-backgrounds programming/css/css-functions programming/css/color-mix