Dynamic Color Manipulation with CSS Relative Colors


In Michelle’s recent Guide To Modern CSS Colors, I only found one thing missing: CSS Relative Colors. Plugging that hole is this post by Jim Nielsen.

CSS relative colors enable the dynamic color manipulation I’ve always wanted in vanilla CSS since Sass’ color functions first came on the scene (darken(), lighten(), etc.).

Allow me to explain a bit more about why I’m so excited.

:root {
  --color: #ff0000;
}

.selector {
  /* syntax: hsl(from var() h s l / alpha) */
  
  /* change the transparency */
  color: hsl(from var(--color) h s l / .5);
  
  /* change the hue */
  color: hsl(from var(--color) calc(h + 180deg) s l);
  
  /* change the saturation */
  color: hsl(from var(--color) h calc(s + 5%) l);
  
  /* change all of them */
  color: hsl(
    from var(--color)
    calc(h + 10deg)
    calc(s + 5%)
    calc(l - 10%)
    /
    calc(alpha - 15%)
  );
}

The CSS Relative Color Syntax is available in Safari ever since TP 122. Other vendors are still working on it.

Dynamic Color Manipulation with CSS Relative Colors →

Source: Bram Van Damme

November 26, 2021
Category : News
Tags: Color | css | Elsewhere | Link

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.