# 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.

```css
/* 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`, `b` for `rgb`; `h`, `s`, `l` for `hsl`). 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.

```css
:root {
  --brand: #0000ff; /* 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.

```css
.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.

```css
.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.

```css
/* Convert a hex color to HSL and change saturation */
color: hsl(from #ff0000 h 50% l);
```

[[programming/css/css]]
[[programming/css/colors-and-backgrounds]]
[[programming/css/css-functions]]
[[programming/css/color-mix]]