I don't think this is a Sass bug. In order to produce an RGB hex value, Sass must round each of the RGB components to the nearest integer. This can mean that the HSL values get somewhat corrupted, since not every HSL triple can be represented exactly as an RGB triple. For example, hsl(201, 15%, 80%) and hsl(201, 16%, 80%) are both translated to #c4ced4 in RGB.
To compensate for this somewhat, Sass tries to remember the exact HSL value for a color and use that where possible, only forcing it into RGB when necessary. This is why Chris's example shows two different saturations: in the first case, Sass remembers the HSL values of $c, so it can give the correct saturation. However, in the second case, all it knows is the inexact RGB color, so it can only give the saturation of that color. As a side note, Blade, I think your HSL values are a little wrong. #ADC1CC isn't hsl(201, 15%, 80%); it's actually closer to hsl(201, 23%, 74%). Similarly, #2F414B = hsl(201, 23%, 24%), and #576166 = hsl(200, 8%, 37%). These values come from Sass, but they seem to agree with http://web.forret.com/tools/color.asp, and I'm pretty confident in Sass's color model calculations, since they're run through the entire suite of W3C tests. As you can see with these HSL values, darken(#ADC1CC, 50%) =~ #2F414B, since 74% - 50% = 24%. On Wed, Aug 25, 2010 at 12:51 PM, Chris Eppstein <[email protected]>wrote: > This looks like a sass bug: > > $ sass -i > >> $c : #ADC1CC > #adc1cc > >> saturation($c) > 23.308% > >> saturation(darken($c, 50%)) > 23.308% > >> darken($c, 50%) > #2f414b > >> saturation(#2f414b) > 22.951% > > Can you file a bug? We'll get it fixed soon: > http://github.com/nex3/haml/issues > > -chris > > On Wed, Aug 25, 2010 at 12:08 PM, BladeBronson <[email protected]>wrote: > >> Hi all, >> >> I've just joined the group, but have been working with SASS for the >> new version of Wikia.com. We provide wikis for tons of communities >> (Wookieepedia, Lostpedia, Muppet Wiki, etc) and we're building a theme >> designer that will make it super easy to customize the colors of the >> wiki - based on SASS. >> >> I've been having trouble understanding some of the color manipulation >> functions. For example, I'm using this light blue color: >> Hex: ADC1CC >> H: 201 >> S: 15 >> B: 80 >> >> I want to darken the color by 50%: darken($light-blue, 50%). This is >> the resulting color: >> Hex: 2F414B >> H: 201 >> S: 37 >> B: 29 >> >> It seems like it should have been: >> Hex: 576166 >> H: 201 >> S: 15 >> B: 40 >> >> If this is working as expected, is there a way that I could achieve >> the color that I was expecting? Thanks a bunch. >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Haml" group. >> To post to this group, send email to [email protected]. >> To unsubscribe from this group, send email to >> [email protected] <haml%[email protected]>. >> For more options, visit this group at >> http://groups.google.com/group/haml?hl=en. >> >> > -- > You received this message because you are subscribed to the Google Groups > "Haml" group. > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected] <haml%[email protected]>. > For more options, visit this group at > http://groups.google.com/group/haml?hl=en. > -- You received this message because you are subscribed to the Google Groups "Haml" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/haml?hl=en.
