{"id":3192,"date":"2014-10-07T00:03:24","date_gmt":"2014-10-07T06:03:24","guid":{"rendered":"http:\/\/iohelix.net\/blog\/?p=3192"},"modified":"2020-01-22T07:45:30","modified_gmt":"2020-01-22T14:45:30","slug":"sass-color-function-comparison","status":"publish","type":"post","link":"http:\/\/iohelix.net\/blog\/2014\/10\/sass-color-function-comparison\/","title":{"rendered":"SASS Color function comparison"},"content":{"rendered":"

So I’ve been working with SASS<\/acronym> a lot lately, and was looking into replacing all the instances of scale-color($color, $lightness: 20%)<\/span> with lighten($color, 20%)<\/span>, as it’s a more compact syntax and seems like it should do the same thing. But as I was doing that, I noticed that the colors that were being generated were not quite the same, and in some cases, wildly different. So I’m going to explain the differences between lighten<\/span> and darken<\/span> vs scale-color<\/span> .<\/p>\n\n\n\n

To start off, every color has a lightness value, which is the L part of the HSL values for a color. With the lightness value for white being 100%, and black being 0%. For a middle gray (#808080)<\/span>, that value is very nearly 50% (50.19608% to be precise). And for a darker color, like rebeccapurple (#663399)<\/span>, that value is 40%.<\/p>\n\n\n\n\n\n\n\n

When testing these functions to figure out why their outputs were different, I used them to generate new colors using the same settings, and then grabbed the lightness value of those new colors. So for white, I did the following:<\/p>\n\n\n\n

.white {\n        base: white;\n        -lb: lightness(white);\n        darken20: darken(white, 20%);\n        -ld20: lightness(darken(white, 20%));\n        \/* -20% to replicate darkening *\/\n        scale20: scale-color(white, $lightness: -20%); \n        -ls20: lightness(scale-color(white, $lightness: -20%)); \n}<\/pre>\n\n\n\n
and for black:<\/p>\n\n\n\n
.black {\n        base: black;\n        -lb: lightness(black);\n        lighten20: lighten(black, 20%);\n        -ll20: lightness(lighten(black, 20%));\n        scale20: scale-color(black, $lightness: 20%);\n        -ls20: lightness(scale-color(black, $lightness: 20%));\n}<\/pre>\n\n\n\n
The output for those:<\/p>\n\n\n\n
\/* line 2, ..\/scss\/test.scss *\/\n.white {\n  base: white;\n  -lb: 100%;\n  darken20: #cccccc;\n  -ld20: 80%;\n  scale20: #cccccc;\n  -ls20: 80%;\n}\n\n\/* line 11, ..\/scss\/test.scss *\/\n.black {\n  base: black;\n  -lb: 0%;\n  lighten20: #333333;\n  -ll20: 20%;\n  scale20: #333333;\n  -ls20: 20%;\n}<\/pre>\n\n\n\n
As you can see, when we darken white by 20%, we end up with a light gray that has a lightness value of 80%. This is as expected. The same goes for black. When we lighten it by 20%, we end up with a dark gray that has a lightness value of 20%. This outcome did nothing to explain why the outputs of those functions were different, because they weren’t. But I didn’t expect them to be. I figured that using white and black would not show any differences. I was simply using those colors to mark a baseline for further experiments.<\/p>\n\n\n\n
The colors that do show the differences are the gray and the rebeccapurple. For those, I created the following code:<\/p>\n\n\n\n
.gray {\n        base: gray;\n        -lb: lightness(gray);\n        lighten20: lighten(gray, 20%);\n        -ll20: lightness(lighten(gray, 20%));\n        scale20: scale-color(gray, $lightness: 20%);\n        -ls20: lightness(scale-color(gray, $lightness: 20%));\n        darken20: darken(gray, 20%);\n        -ld20: lightness(darken(gray, 20%));\n        scale20: scale-color(gray, $lightness: -20%);\n        -ls20: lightness(scale-color(gray, $lightness: -20%));\n        lighten50: lighten(gray, 50%);\n        -ll50: lightness(lighten(gray, 50%));\n        scale50: scale-color(gray, $lightness: 50%);\n        -ls50: lightness(scale-color(gray, $lightness: 50%));\n        darken50: darken(gray, 50%);\n        -ld50: lightness(darken(gray, 50%));\n        scale50: scale-color(gray, $lightness: -50%);\n        -ls50: lightness(scale-color(gray, $lightness: -50%));\n        lighten80: lighten(gray, 80%);\n        -ll80: lightness(lighten(gray, 80%));\n        scale80: scale-color(gray, $lightness: 80%);\n        -ls80: lightness(scale-color(gray, $lightness: 80%));\n        darken80: darken(gray, 80%);\n        -ld80: lightness(darken(gray, 80%));\n        scale80: scale-color(gray, $lightness: -80%);\n        -ls80: lightness(scale-color(gray, $lightness: -80%));\n}\n\n.rebeccapurple {\n        base: rebeccapurple;\n        -lb: lightness(rebeccapurple);\n        lighten20: lighten(rebeccapurple, 20%);\n        -ll20: lightness(lighten(rebeccapurple, 20%));\n        scale20: scale-color(rebeccapurple, $lightness: 20%);\n        -ls20: lightness(scale-color(rebeccapurple, $lightness: 20%));\n        darken20: darken(rebeccapurple, 20%);\n        -ld20: lightness(darken(rebeccapurple, 20%));\n        scale20: scale-color(rebeccapurple, $lightness: -20%);\n        -ls20: lightness(scale-color(rebeccapurple, $lightness: -20%));\n        lighten50: lighten(rebeccapurple, 50%);\n        -ll50: lightness(lighten(rebeccapurple, 50%));\n        scale50: scale-color(rebeccapurple, $lightness: 50%);\n        -ls50: lightness(scale-color(rebeccapurple, $lightness: 50%));\n        darken50: darken(rebeccapurple, 50%);\n        -ld50: lightness(darken(rebeccapurple, 50%));\n        scale50: scale-color(rebeccapurple, $lightness: -50%);\n        -ls50: lightness(scale-color(rebeccapurple, $lightness: -50%));\n        lighten80: lighten(rebeccapurple, 80%);\n        -ll80: lightness(lighten(rebeccapurple, 80%));\n        scale80: scale-color(rebeccapurple, $lightness: 80%);\n        -ls80: lightness(scale-color(rebeccapurple, $lightness: 80%));\n        darken80: darken(rebeccapurple, 80%);\n        -ld80: lightness(darken(rebeccapurple, 80%));\n        scale80: scale-color(rebeccapurple, $lightness: -80%);\n        -ls80: lightness(scale-color(rebeccapurple, $lightness: -80%));\n}<\/pre>\n\n\n\n
With that output being:<\/p>\n\n\n\n
\/* line 20, ..\/scss\/test.scss *\/\n.gray {\n  base: gray;\n  -lb: 50.19608%;\n  lighten20: #b3b3b3;\n  -ll20: 70.19608%;\n  scale20: #999999;\n  -ls20: 60.15686%;\n  darken20: #4d4d4d;\n  -ld20: 30.19608%;\n  scale20: #666666;\n  -ls20: 40.15686%;\n  lighten50: white;\n  -ll50: 100%;\n  scale50: silver;\n  -ls50: 75.09804%;\n  darken50: black;\n  -ld50: 0.19608%;\n  scale50: #404040;\n  -ls50: 25.09804%;\n  lighten80: white;\n  -ll80: 100%;\n  scale80: #e6e6e6;\n  -ls80: 90.03922%;\n  darken80: black;\n  -ld80: 0%;\n  scale80: #1a1a1a;\n  -ls80: 10.03922%;\n}\n\n\/* line 49, ..\/scss\/test.scss *\/\n.rebeccapurple {\n  base: rebeccapurple;\n  -lb: 40%;\n  lighten20: #9966cc;\n  -ll20: 60%;\n  scale20: #8547c2;\n  -ls20: 52%;\n  darken20: #33194d;\n  -ld20: 20%;\n  scale20: #52297a;\n  -ls20: 32%;\n  lighten50: #e6d9f2;\n  -ll50: 90%;\n  scale50: #b28cd9;\n  -ls50: 70%;\n  darken50: black;\n  -ld50: 0%;\n  scale50: #33194d;\n  -ls50: 20%;\n  lighten80: white;\n  -ll80: 100%;\n  scale80: #e0d1f0;\n  -ls80: 88%;\n  darken80: black;\n  -ld80: 0%;\n  scale80: #140a1f;\n  -ls80: 8%;\n}<\/pre>\n\n\n\n
This is where we start to see differences. If you’ll notice, the lightness percentage for gray was ~50%, and the output of lighten<\/span> gave a color with a lightness value of ~70% (20% more). The output of scale-color<\/span> gave a color with a lightness value of ~60% (only 10% more). The same can be said for darken<\/span> as well as the other instances that use higher percentages.<\/p>\n\n\n\n
The difference between the functions comes down to how those percentages are applied. In the lighten<\/span> and darken<\/span> functions, the percentages are added\/subtracted directly to the current value. So when we have a color with a lightness value of 40% and we add 20%, we end up with 60%. In contrast, scale-color<\/span> adds or subtracts the percentage of the difference of the lightness to the color, so when we start with the same 40% lightness value, and scale-color by 20%, it ends up at 52% (12% more), because 20% of the remainder (60%) is 12%.<\/p>\n\n\n\n
You’ll also notice that when we darken<\/span>  rebeccapurple by 50%, it goes to black. This is because it’s lightness is originally only 40%, and when we subtract 50% from it, we get -10%, which SASS<\/acronym> clamps to 0% (black). But when we scale-color<\/span> by -50%, we end up at a color with a lightness of 20% (50% of 40%).<\/p>\n\n\n\n
So that’s why the output of lighten<\/span>, darken<\/span>, and scale-color<\/span> are different. And in my opinion, scale-color<\/span> is the more useful of the three, as it behaves a little more intuitively, scaling the color instead of just raw addition or subtraction.<\/p>","protected":false},"excerpt":{"rendered":"
So I’ve been working with SASS a lot lately, and was looking into replacing all the instances of scale-color($color, $lightness: 20%) with lighten($color, 20%), as it’s a more compact syntax and seems like it should do the same thing. But as I was doing that, I noticed that the colors that were being generated were … <\/p>\n
Continue reading “SASS Color function comparison”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,12,19],"tags":[],"class_list":["post-3192","post","type-post","status-publish","format-standard","hentry","category-geek","category-programming","category-web-development"],"_links":{"self":[{"href":"http:\/\/iohelix.net\/blog\/wp-json\/wp\/v2\/posts\/3192"}],"collection":[{"href":"http:\/\/iohelix.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/iohelix.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/iohelix.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/iohelix.net\/blog\/wp-json\/wp\/v2\/comments?post=3192"}],"version-history":[{"count":10,"href":"http:\/\/iohelix.net\/blog\/wp-json\/wp\/v2\/posts\/3192\/revisions"}],"predecessor-version":[{"id":3235,"href":"http:\/\/iohelix.net\/blog\/wp-json\/wp\/v2\/posts\/3192\/revisions\/3235"}],"wp:attachment":[{"href":"http:\/\/iohelix.net\/blog\/wp-json\/wp\/v2\/media?parent=3192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/iohelix.net\/blog\/wp-json\/wp\/v2\/categories?post=3192"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/iohelix.net\/blog\/wp-json\/wp\/v2\/tags?post=3192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}