Technologies:

javascript

Tolerim

12 days ago

### What is the ratio between the HSL-based darken function in Sass and the RGB-based darken function?

`darken`

function that decreases all color channels by a given percentage `amount`

. The function calculates a new color by subtracting the percentage of the original color value from each color channel's value using the RGB model. However, it's worth noting that this function's output will differ from the Sass `darken`

function, which is based on lightness in the HSL model. The function accepts two arguments: a color object with the keys `r`

, `g`

, and `b`

representing the RGB value and a number `amount`

that is between 0 and 100. Here's the code:
```
/**
* Darkens the given RGB color by the specified amount.
*
*
```**NOTE:** The algorithm used to darken the given color is based on RGB,
* so it will not return the exact same value as the Sass `darken` function, which is based on HSL lightness.
* @param {{ r: number, g: number, b: number }} color - RGBFormat object representation of the color to darken.
* @param {number} amount - (Must be 0-100) The percentage amount to decrease equally to each of the RGB color channels.
*/
export function darken(color, amount) {
if (amount > 100) amount = 100;
else if (amount < 0) amount = 0;
const rgb = Object.assign({}, color); // copy so the object passed by reference is not mutated.
for (const [key, value] of Object.entries(rgb)) {
rgb[key] = Math.round(value * (1 - (amount / 100)));
}
return rgb;
}

`#3498db`

, we can use Sass `darken(#3498db, 10%)`

to get the color that's 10% darker in HSL lightness, which is `#217dbb`

. On the other hand, if we use our `darken`

function with the RGB equivalent of `#3498db`

(`darken({r: 52, g: 152, b: 219}, 10)`

), we'll get the value `{r: 47, g: 137, b: 197}`

, which corresponds to the color `#2f89c5`

. Since our function operates on RGB values, there will be some deviation from the Sass `darken`

function's output when using the same `amount`

. At this point, I'm approximating an amount for `darken`

for JS until I find a ratio that comes closest to the Sass `darken`

output.Answers(2)

Vogi

11 days ago

Verified Answer

It looks like you have an RGB-based

`darken`

function that decreases all color channels by a given percentage `amount`

. The function calculates a new color by subtracting the percentage of the original color value from each color channel's value using the RGB model. However, it's worth noting that this function's output will differ from the Sass `darken`

function, which is based on lightness in the HSL model. The function accepts two arguments: a color object with the keys `r`

, `g`

, and `b`

representing the RGB value and a number `amount`

that is between 0 and 100. Here's the code:
```
/**
* Darkens the given RGB color by the specified amount.
*
*
```**NOTE:** The algorithm used to darken the given color is based on RGB,
* so it will not return the exact same value as the Sass **darken** function, which is based on HSL lightness.
* @param {{ r: number, g: number, b: number }} color - RGBFormat object representation of the color to darken.
* @param {number} amount - (Must be 0-100) The percentage amount to decrease equally to each of the RGB color channels.
*/
export function darken(color, amount) {
if (amount > 100) amount = 100;
else if (amount < 0) amount = 0;
const rgb = Object.assign({}, color); // copy so the object passed by reference is not mutated.
for (const [key, value] of Object.entries(rgb)) {
rgb[key] = Math.round(value * (1 - (amount / 100)));
}
return rgb;
}

If you have any more questions or need further clarification, please let me know.

Tolerim

12 days ago

The reason for the difference in result between the Sass

**darken**function and the given**darken**function in the code is because the Sass**darken**function is based on HSL lightness while the given**darken**function is based on RGB. One way to get a similar result to Sass**darken**in JavaScript is to convert the RGB value to HSL, decrease the lightness value by the specified percentage, and then convert back to RGB. There are also other JavaScript libraries such as TinyColor and Color.js that provide methods for manipulating colors in both RGB and HSL formats.