Dynamic Color Manipulation with CSS Relative Colors

Written by / Original link on Nov. 26, 2021


In Michelle’s excellent 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. Relevant issues to follow:

Dynamic Color Manipulation with CSS Relative Colors →

Related: This was also covered in Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast(), a highly recommended read.

bram tutorialzine link bram bram

« New in Symfony 5.4: Notifier integrations - Fetch a List of Tweets From the Backend »