# Relative color

Builds a new color from an existing one, like a lighter brand color.

## What is **relative color** syntax?

**Relative color** builds a new color from an existing one, like "the brand color, but lighter" or "the same, half see-through".

```css
:root { --brand: #0a7c86; }
.button:hover { background: oklch(from var(--brand) calc(l + 0.1) c h); }   /* a bit lighter */
```

Level: Freelancer · [More CSS terms at this level](https://www.ask-codey.com/glossary/subjects/css/freelancer)

Updated: September 27, 2026

Source: https://www.ask-codey.com/glossary/relative-color