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

Question

This is a simple grayscale I made in Photoshop:

As you can see; the mid point (50%) between white and black is found to be #808080. This also correspond to what SASS would calculate given the following code:

$gray: darken(white, 50%); // #808080

However, in Photoshop the 25% mark is found to be #CCCCCB, while this happens in SASS:

$light-gray: darken(white, 25%); // #BFBFBF

The same difference also happens on 75%, which in Photoshop is found to be #333333, while in SASS becomes:

$dark-gray: darken(white, 75%); // #404040

Why this discrepancy?

https://sass-lang.com/documentation/modules/color#darken the "heads up" section maybe will give you the answer — Temani Afif, May 30 '20 at 19:59
@TemaniAfif It seems the same happens regardless whether I use `lighten`/`darken` or `scale-color` like the docs suggest. `$dark-gray: scale-color(white, $lightness: -75%);` is still calculated to be `#404040` :( — o01, May 30 '20 at 20:02

Temani Afif · Accepted Answer · 2020-06-19T08:43:02.243

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">

And if we make the calculation we can also find the same:

darken(white, 25%) == hsl(0,0%,(100% - 25%)) == hsl(0,0%,75%) == #bfbfbf
darken(white, 75%) == hsl(0,0%,(100% - 75%)) == hsl(0,0%,25%) == #404040

Related: How to create color shades using CSS variables similar to darken() of SASS?

After few tests I found that your grayscale isn't linear but follow a non linear function that can explain the issue.

To illustrate this here is a basic animation of two elements not having the same ease function that animate from white to black. Notice how both will start at the same position, end at the same position and meet in the middle but will have different position on the road. So the 25% and the 75% of each animation won't be the same but the 50% will be.

img {
  max-width:100%;
  margin-bottom:200px;
}
body {
  margin:0;
}

body::before,
body::after{
  content:"";
  position:fixed;
  left:0;
  top:150px;
  width:10px;
  height:20px;
  border:2px solid green;
  background:#fff;
  animation:move 10s infinite alternate ease-in-out;
}
body::after {
  top:170px;
  animation:move 10s infinite alternate linear;
}
@keyframes move{
  from {
    left:0;
    background:#fff;
  }
  to {
    left:100%;
    background:#000;
  }
}

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

I don't have access to photoshop but I am pretty sure this is the issue. If you check the configuration you will probably find how you can define the function and if you make it linear you will have the same result.

You're right, seems Photoshop indeed does not produce linear gradients: http://www.photoshopforums.com/linear-gradient-not-linear-vt26354.html — o01, Jun 19 '20 at 08:13

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

1 Answers1