How to Create Color Shades Using CSS Variables Similar to Darken() of Sass

How to create color shades using CSS variables similar to darken() of Sass?

The new Specification introduces "relative color syntax" where you can do the following

:root {
    --color-primary: #f00; /* any format you want here */
    --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5%)); 
    --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10%)); 
}

The idea is to convert the main color to hsl format and using calc() you adjust the lightness.

There is still no support for this to date so consider the below solution.

You can consider hsl() colors and simply control the lightness:

:root {
    --color:0, 100%; /*the base color*/
    --l:50%; /*the initial lightness*/
    
    --color-primary: hsl(var(--color),var(--l));
    --color-primary-darker: hsl(var(--color),calc(var(--l) - 5%));
    --color-primary-darkest: hsl(var(--color),calc(var(--l) - 10%)); 
}

.button {
    background: var(--color-primary);
    display:inline-block;
    padding:10px 20px;
    color:#fff;
    cursor:pointer;
}

.button:hover,
.button:focus {
    background: var(--color-primary-darker);
}

.button:active {
    background: var(--color-primary-darkest);
}

<span class="button">some text</span>

Use CSS variables and Sass mixing together without Sass vars

I'd say it does not make much sense to use CSS custom property (variable) in Sass function. CSS custom properties could be changed deeper in your CSS structure or even during the runtime, while Sass is available only during compile time. It could not react to such change.

Have a look at hsla() CSS function, which can be used to change lightness of colors during runtime. See article https://sparanoid.com/note/css-variables-guide/.

use css variable with scss darken and ligthen filter

This can't really work because SASS is a preprocessor, and CSS custom properties can be dynamically changed at run-time. For SASS to be able to preprocess this with darken, it would have to replace the custom property with a static value, in which case the usefulness of the custom property is lost.

Lighten RGB with pure CSS

This isn't possible.

However

Lightening colors is very easy with hsl so if you store the hsl color along with the RGB like this:

:root {
  --redColor: 142,  49,  42;
  --redColor_h: 4;
  --redColor_s: 54%;
  --redColor_l: 36%;
}

Then you can lighten the color with this SASS mixin:

@function lighten($shadeCode, $amount) {
  @return hsl(var(--#{$shadeCode}_h), var(--#{$shadeCode}_s), calc(#{var(--#{$shadeCode}_l)} + #{$amount}));
}

And use it like this:

background-color: lighten('redColor', 25%);

And boom you got lighter colors.

Why does SASS darken/lighten seem to calculate the wrong grayscale?

I don't know the configuration you are using with Photoshop but the values returned by darken() are correct.

Below I made a gradient from white to black and it's not the same as the one you are showing and if you pick colors from it you will get the value returned by darken()

img {  max-width:100%;  margin-bottom:200px;}
body {  margin:0;  background:linear-gradient(to right,white,black);}

<img src="https://i.stack.imgur.com/2gljG.png">

Sass darken function not compiling the output hex color

Interpolate the whole value like #{darken(...)} because otherwise the SCSS transpiler will think it is a CSS value, thus ignoring it.

At the same time, remove interpolation inside the darken function because it is not needed.

Also, remove the calc() too because SCSS will automatically calculate the value. Use calc only when you need CSS to calculate the value.

$colors: (
  primary: #e32249,
  secondary: #0969a2
);

:root,
#root {
  @each $name, $color in $colors {
    --color-#{$name}: #{$color};

    @for $i from 1 through 10 {
      --color-#{$name}-dark-#{$i}: #{darken($color, $i * 10%)};
      --color-#{$name}-light-#{$i}: #{lighten($color, $i * 10%)};
    }
  }
}

How to Create Color Shades Using CSS Variables Similar to Darken() of Sass