0

I'm using SASS HSL color functions to get individual values from HEX color. At the same time I'm entering the same HEX value into Mac color picker. But the resulting saturation value from SASS color function and Mac color picker are different. Why is that?

Here's the SASS code with the results: enter image description here

$color: #3e8fcb;
@debug $color;
@debug 'Hue' round( hue($color) );
@debug "Sat" round( saturation($color) );
@debug "Lht" round( lightness($color) );

And here's the Mac color picker:
enter image description here

As you can see the's the difference in saturation:

  • SASS: 58%
  • Mac color picker: 69%

Why?

Oleg
  • 289
  • 2
  • 10

1 Answers1

1

That's because SASS color functions use HSL color model, while Mac color picker uses HSB (same as HSV) color model. In HSB and HSL the Hue is the same, but Saturation takes a different value.

Explained in this answer: HSB vs HSL vs HSV

And in Wikipedia: https://en.wikipedia.org/wiki/HSL_and_HSV

Oleg
  • 289
  • 2
  • 10