possible rounding error when converting hsl to hex

[matovas]

Sass automaticaly converted hsl to #hex colors.
Some times this process has small bug.

// styles.scss
$pink_5l: hsl(340, 80%, 95%);
body { background-color: $pink_5l; }

// styles.css
body { background-color: #fce8ef; }

All good, but hsl(340, 80%, 95%) ≠ #fce8ef,
because #fce8ef = hsl(339, 77%, 95%)

I testing this, my result
hsl(340, 80%, 95%) — bad converting
hsl(340, 80%, 90%) — good converting
hsl(340, 80%, 80%) — good converting
hsl(340, 80%, 70%) — good converting
hsl(340, 80%, 60%) — good converting
hsl(340, 80%, 50%) — good converting
hsl(340, 80%, 40%) — good converting
hsl(340, 80%, 30%) — good converting
hsl(340, 80%, 20%) — good converting
hsl(340, 80%, 10%) — good converting
hsl(340, 80%, 5%) — bad converting

Thanks!

[cimmanon]

If you write in hsl(340, 80%, 95%) using Chrome's inspector, you can see how it is interpreted in other formats. It thinks that color is equal to #fce8ef. But if you fill out the hex value instead, you get hsl(339, 77%, 95%). Sass is not wrong here. Two different sets of HSL values can be equal to the same RGB value.

What values are you expecting for those other colors?

[chriseppstein]

It's true that both of these colors map to the same value in RGB, but if you look here at this example, you will see that there is a visual distinction (albeit very minor) between the two when specified in hsl. As such, I think we need to consider this a bug.

http://codepen.io/chriseppstein/full/PNWQRg/

It's not a simple fix. There are browser support concerns. We may need to add a work around via the upcoming to-css() function in the near term.

[cimmanon]

I don't know if this is worth mentioning or not, but Chrome's inspector says that hsl(30, 100%, 50%) is equivalent to rgb(255, 127, 0). Meanwhile writing in rgb(255, 128, 0) results in hsl(30, 100%, 50%). I've been over the formula provided by the W3C hundreds of times and the G channel in this case comes back as 127.5. I don't know how this value is rounding down to 127 unless it is supposed to be floored (but wouldn't that make all of the other colors off as well?).

Sass reports hsl(30, 100%, 50%) as being equivalent to rgb(255, 128, 0).

[chriseppstein]

@tabatkins are there colors expressible in hsl() that the browser will display that cannot be expressed in rgb? Trying to decide if this is a fundamental flaw in Sass's treatment of hsl or just a small bug in our hsl -> rgb algorithm.

[tabatkins]

No, HSL and RGB are equivalent color-spaces. This is just a matter of different rounding/floating-point error accumulation between implementations.

(And at extreme light/dark values, the color-space is very small - those are the corners of the RGB cube, so not much left to discriminate. There's a lot of quantization going on there, so in general values won't round-trip exactly. A good implementation will at least make sure that converting back and forth matches what you get if you convert back and forth twice, but it's easy to write something that doesn't quite do that, and introduces a little bit of drift into the extreme values. Similarly, at very low saturation a round-trip will often drift your hue.)

[chriseppstein]

Hmmm. I wonder if this rounding is the culprit: https://github.com/sass/sass/blob/stable/lib/sass/script/value/color.rb#L651

[nex3]

I'm closing this out. I don't think it's feasible to guarantee that this translation round-trips identically, given that multiple HSL colors translate to the same RGB color.