#CSS #Relative #Colors: Build UI #Palettes Without a Color Picker
▻https://theosoti.com/blog/css-relative-colors
Relative colors shine when a component needs multiple accents. Here is a compact pattern for a callout card:
Keep derived tokens in one space so the relationships stay coherent. Mixing spaces is valid, but remember the source is converted to the output space for every calculation, which can subtly change the result.
The component only needs one input (—tone). Everything else follows.
.callout {
--tone: #4b6bff;
--tone-strong: hsl(from var(--tone) h s calc(l - 12));
--tone-soft: hsl(from var(--tone) h calc(s - 20) calc(l + 28));
--tone-border: rgb(from var(--tone) r g b / 0.2);
--tone-shadow: rgb(from var(--tone) r g b / 0.25);
border: 1px solid var(--tone-border);
background-color: var(--tone-soft);
box-shadow: 0 12px 24px var(--tone-shadow);
}
.callout strong {
color: var(--tone-strong);
}
