From 9714e8d96dbb120c6077f24fd7f8e64fc29fbc70 Mon Sep 17 00:00:00 2001 From: Soham Pal Date: Fri, 2 Oct 2020 01:45:49 +0530 Subject: [PATCH 1/4] Create HSLToRGB.md --- snippets/HSLToRGB.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 snippets/HSLToRGB.md diff --git a/snippets/HSLToRGB.md b/snippets/HSLToRGB.md new file mode 100644 index 000000000..b4cf7ff13 --- /dev/null +++ b/snippets/HSLToRGB.md @@ -0,0 +1,25 @@ +--- +title: HSLToRGB +tags: math,intermediate +--- + +Converts a HSL color tuple to RGB format. + +- Use the [HSL to RGB conversion formula](https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB) to convert to the appropriate format. +- The range of the input parameters is H: [0, 360], S: [0, 100], L: [0, 100]. +- The range of all output values is [0, 255]. + +```js +const HSLToRGB = (h, s, l) => { + s /= 100; + l /= 100; + const k = (n) => (n + h / 30) % 12; + const a = s*Math.min(l, 1-l); + const f = (n) => l - a*Math.max(-1, Math.min(k(n)-3, Math.min(9-k(n), 1))); + return [255 * f(0), 255 * f(8), 255 * f(4)]; +}; +``` + +```js +HSLToRGB(13, 100, 11); // [56.1, 12.155000000000006, 0] +``` From 70fc77a65d2bf46a900d40bad57d1d27634663a3 Mon Sep 17 00:00:00 2001 From: Soham Pal Date: Fri, 2 Oct 2020 01:46:30 +0530 Subject: [PATCH 2/4] Create RGBToHSL.md --- snippets/RGBToHSL.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 snippets/RGBToHSL.md diff --git a/snippets/RGBToHSL.md b/snippets/RGBToHSL.md new file mode 100644 index 000000000..220842284 --- /dev/null +++ b/snippets/RGBToHSL.md @@ -0,0 +1,27 @@ +--- +title: RGBToHSL +tags: math,intermediate +--- + +Converts a RGB color tuple to HSL format. + +- Use the [RGB to HSL conversion formula](https://www.niwa.nu/2013/05/math-behind-colorspace-conversions-rgb-hsl/) to convert to the appropriate format. +- The range of all input parameters is [0, 255]. +- The range of the resulting values is H: [0, 360], S: [0, 100], L: [0, 100]. + +```js +const RGBToHSL = ((r, g, b) => { + r /= 255; + g /= 255; + b /= 255; + const l = Math.max(r, g, b); + const s = l - Math.min(r, g, b); + const h = + (s) ? (l === r) ? (g-b)/s : (l === g) ? 2 + (b-r)/s : 4 + (r-g)/s : 0; + return [ (60*h<0)?(60*h+360):(60*h) , 100*((s) ? (l<=0.5) ? s/((2*l-s)) : s/(2 - (2*l-s)) : 0), 100*(2*l-s)/2]; +}; +``` + +```js +RGBToHSL(45, 23, 11); // [21.17647058823529, 60.71428571428573, 10.980392156862745] +``` From 06ca9747156592d48351d34cceeb19d2338a80a9 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sun, 4 Oct 2020 11:24:27 +0300 Subject: [PATCH 3/4] Update HSLToRGB.md --- snippets/HSLToRGB.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/snippets/HSLToRGB.md b/snippets/HSLToRGB.md index b4cf7ff13..2c764128e 100644 --- a/snippets/HSLToRGB.md +++ b/snippets/HSLToRGB.md @@ -13,13 +13,14 @@ Converts a HSL color tuple to RGB format. const HSLToRGB = (h, s, l) => { s /= 100; l /= 100; - const k = (n) => (n + h / 30) % 12; - const a = s*Math.min(l, 1-l); - const f = (n) => l - a*Math.max(-1, Math.min(k(n)-3, Math.min(9-k(n), 1))); + const k = n => (n + h / 30) % 12; + const a = s * Math.min(l, 1 - l); + const f = n => + l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); return [255 * f(0), 255 * f(8), 255 * f(4)]; }; ``` ```js -HSLToRGB(13, 100, 11); // [56.1, 12.155000000000006, 0] +HSLToRGB(13, 100, 11); // [56.1, 12.155, 0] ``` From 405a7b1c036fef5eac00cc042c4a93f46b7dcfea Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sun, 4 Oct 2020 11:25:12 +0300 Subject: [PATCH 4/4] Update RGBToHSL.md --- snippets/RGBToHSL.md | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/snippets/RGBToHSL.md b/snippets/RGBToHSL.md index 220842284..1d7ddb2a1 100644 --- a/snippets/RGBToHSL.md +++ b/snippets/RGBToHSL.md @@ -10,18 +10,27 @@ Converts a RGB color tuple to HSL format. - The range of the resulting values is H: [0, 360], S: [0, 100], L: [0, 100]. ```js -const RGBToHSL = ((r, g, b) => { +const RGBToHSL = (r, g, b) => { r /= 255; g /= 255; b /= 255; const l = Math.max(r, g, b); const s = l - Math.min(r, g, b); - const h = - (s) ? (l === r) ? (g-b)/s : (l === g) ? 2 + (b-r)/s : 4 + (r-g)/s : 0; - return [ (60*h<0)?(60*h+360):(60*h) , 100*((s) ? (l<=0.5) ? s/((2*l-s)) : s/(2 - (2*l-s)) : 0), 100*(2*l-s)/2]; + const h = s + ? l === r + ? (g - b) / s + : l === g + ? 2 + (b - r) / s + : 4 + (r - g) / s + : 0; + return [ + 60 * h < 0 ? 60 * h + 360 : 60 * h, + 100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0), + (100 * (2 * l - s)) / 2, + ]; }; ``` ```js -RGBToHSL(45, 23, 11); // [21.17647058823529, 60.71428571428573, 10.980392156862745] +RGBToHSL(45, 23, 11); // [21.17647, 60.71428, 10.98039] ```