Instantly share code, notes, and snippets.

# mjackson/color-conversion-algorithms.js

Last active July 9, 2024 09:47
Show Gist options
• Save mjackson/5311256 to your computer and use it in GitHub Desktop.
RGB, HSV, and HSL color conversion algorithms in JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
 /** * Converts an RGB color value to HSL. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSL_color_space. * Assumes r, g, and b are contained in the set [0, 255] and * returns h, s, and l in the set [0, 1]. * * @param Number r The red color value * @param Number g The green color value * @param Number b The blue color value * @return Array The HSL representation */ function rgbToHsl(r, g, b) { r /= 255, g /= 255, b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if (max == min) { h = s = 0; // achromatic } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [ h, s, l ]; } /** * Converts an HSL color value to RGB. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSL_color_space. * Assumes h, s, and l are contained in the set [0, 1] and * returns r, g, and b in the set [0, 255]. * * @param Number h The hue * @param Number s The saturation * @param Number l The lightness * @return Array The RGB representation */ function hslToRgb(h, s, l) { var r, g, b; if (s == 0) { r = g = b = l; // achromatic } else { function hue2rgb(p, q, t) { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1/6) return p + (q - p) * 6 * t; if (t < 1/2) return q; if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; } var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return [ r * 255, g * 255, b * 255 ]; } /** * Converts an RGB color value to HSV. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSV_color_space. * Assumes r, g, and b are contained in the set [0, 255] and * returns h, s, and v in the set [0, 1]. * * @param Number r The red color value * @param Number g The green color value * @param Number b The blue color value * @return Array The HSV representation */ function rgbToHsv(r, g, b) { r /= 255, g /= 255, b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, v = max; var d = max - min; s = max == 0 ? 0 : d / max; if (max == min) { h = 0; // achromatic } else { switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [ h, s, v ]; } /** * Converts an HSV color value to RGB. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSV_color_space. * Assumes h, s, and v are contained in the set [0, 1] and * returns r, g, and b in the set [0, 255]. * * @param Number h The hue * @param Number s The saturation * @param Number v The value * @return Array The RGB representation */ function hsvToRgb(h, s, v) { var r, g, b; var i = Math.floor(h * 6); var f = h * 6 - i; var p = v * (1 - s); var q = v * (1 - f * s); var t = v * (1 - (1 - f) * s); switch (i % 6) { case 0: r = v, g = t, b = p; break; case 1: r = q, g = v, b = p; break; case 2: r = p, g = v, b = t; break; case 3: r = p, g = q, b = v; break; case 4: r = t, g = p, b = v; break; case 5: r = v, g = p, b = q; break; } return [ r * 255, g * 255, b * 255 ]; }

### verdy-p commented Jan 30, 2018 • edited Loading

Finally note that the first algorithm is perfectly correct : it is written in Javascript using the "number" type for each component whose precision is a 64-bit IEEE double-precision floatting point: this keeps all the precision needed (its 56-bit mantissa is 7 times the precision of the 8-bit input), so it does not need ANY use of Math.round() or Math.floor(). It is made externally when needed, so it does not have to "denormalize" the output to another limited range than [0, 1].

The comment saying "to be more accurate, multiply by 256 then floor" is then completely false: it would actually make the accuracy WORSE than what it gives now (dropping 48 bits of precision in each component to keep only 8 with some arbitrary rounding limit asssuming a symetric use of all integer values oin 0-255, while in fact msot videos and photo use "rounding", not flooring, to range 16-240, where clamping is not even necessary to suppress the values 1-15 and 241-254, and where 0 and 255 values are also NOT used in 24-bit sRGB input).

### andersborgabiro commented Feb 20, 2018

Would you guys consider HSL or HSV better for conversion to humanly sensible text via conditions (a la pale dark blue etc) rather than choosing specific color names via proximity comparisons? I currently do both, but most exact color names are incomprehensible to the intended audience, so I need something simpler ("what the heck is mauve?" etc). In the first case currently via HSL, with ranges for each attribute + some special conditions for black, white, gray etc, currently lacking distinction of brown, pink etc common color names.

### lsbyerley commented Apr 19, 2018

Someone correct me if I'm wrong, but I believe `hsvToRgb()` is incorrect. Example:

`hsvToRgb( .074, 1, 1 )` = `r:255, g:113, b:0` when it should be `r:195, g:255, b:0`

### PhoneixS commented May 11, 2018

About license, the docs tell that comes from an adaption of algorithms in Wikipedia. The texts under Wikipedia are covered by Creative Commons Attribution-ShareAlike 3.0 which give you the right to distribute adaptations only under the same license so this code must be under it too.

But, yes, better if the author adds it clearly.

### vahidk commented Sep 19, 2018

This doesn't really work. I just implemented the wikipedia algorithm as is and it works:
https://gist.github.com/vahidk/05184faf3d92a0aa1b46aeaa93b07786

### stephencweiss commented Dec 18, 2018 • edited Loading

@isbyerley, came here to say the same thing. I think there's a mistake in the hsvToRgb. Here's my version:

``````function rgbFromHSV(h,s,v) {
/**
* I: An array of three elements hue (h) ∈ [0, 360], and saturation (s) and value (v) which are ∈ [0, 1]
* O: An array of red (r), green (g), blue (b), all ∈ [0, 255]
* Derived from https://en.wikipedia.org/wiki/HSL_and_HSV
* This stackexchange was the clearest derivation I found to reimplement https://cs.stackexchange.com/questions/64549/convert-hsv-to-rgb-colors
*/

hprime = h / 60;
const c = v * s;
const x = c * (1 - Math.abs(hprime % 2 - 1));
const m = v - c;
let r, g, b;
if (!hprime) {r = 0; g = 0; b = 0; }
if (hprime >= 0 && hprime < 1) { r = c; g = x; b = 0}
if (hprime >= 1 && hprime < 2) { r = x; g = c; b = 0}
if (hprime >= 2 && hprime < 3) { r = 0; g = c; b = x}
if (hprime >= 3 && hprime < 4) { r = 0; g = x; b = c}
if (hprime >= 4 && hprime < 5) { r = x; g = 0; b = c}
if (hprime >= 5 && hprime < 6) { r = c; g = 0; b = x}

r = Math.round( (r + m)* 255);
g = Math.round( (g + m)* 255);
b = Math.round( (b + m)* 255);

return [r, g, b]
}
``````

### david-tabor commented Mar 15, 2019

+1, used this for a coding bootcamp assignment, with attribution

### ashleedawg commented Mar 22, 2020

This minified variation takes integer `r`,`g`,`b` values (`0` to `255`) and returns an object of integers (`°`,`%`,`%`) like `{h:360, s:100, l:50}` :

`function rgbToHsl(a,r,e){a/=255,r/=255,e/=255;var t,h,n=Math.max(a,r,e),s=Math.min(a,r,e),c=(n+s)/2;if(n==s)t=h=0;else{var o=n-s;switch(h=.5<c?o/(2-n-s):o/(n+s),n){case a:t=(r-e)/o+(r<e?6:0);break;case r:t=(e-a)/o+2;break;case e:t=(a-r)/o+4}t/=6}return{h:Math.round(360*t),s:Math.round(100*h),l:Math.round(100*c)}}`

### gntlechaos commented Apr 23, 2020

If you have been looking for a variation that converts RGB to HSV with the hue ranging from `0` to `360` instead of `0` to `1`, and the saturation and value ranging from `0` to `100`, I have adapted this function, with this range re-mapping algorithm.

``````function mapMinMax(value,oldMin,oldMax,newMin, newMax) {
return  (newMax-newMin)*(value-oldMin)/(oldMax-oldMin)+newMin;
}

function rgbToHsv(r, g, b) {
r /= 255, g /= 255, b /= 255;

var max = Math.max(r, g, b),
min = Math.min(r, g, b);
var h, s, v = max;

var d = max - min;
s = max == 0 ? 0 : d / max;
if (max == min) {
h = 0; // achromatic
} else {
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}

h /= 6;
}

h = mapMinMax(h,0,1,0,360);
return [h, s * 100, v * 100];
}
``````

### kigiri commented Jun 18, 2020 • edited Loading

working with css string here did:

```const _rgbToHsl = rgbStr => {
const [r, g, b] = rgbStr.slice(4, -1).split(',').map(Number)
const max = Math.max(r, g, b)
const min = Math.min(r, g, b)
const l = Math.floor((max + min) / ((0xff * 2) / 100))

if (max === min) return [0, 0, l]
const d = max - min
const s = Math.floor((d / (l > 50 ? 0xff * 2 - max - min : max + min)) * 100)

if (max === r) return [Math.floor(((g - b) / d + (g < b && 6)) * 60), s, l]
return max === g
? [Math.floor(((b - r) / d + 2) * 60), s, l]
: [Math.floor(((r - g) / d + 4) * 60), s, l]
}```

It takes a css rgb string and returns parts in a css ready scale.

I got results similar to chrome conversion.

### avisek commented May 21, 2022

RGB, HSL, XYZ, LAB, LCH color conversion algorithms (ES6 Modules)

### RAFC-01 commented Mar 23, 2023

@isbyerley, came here to say the same thing. I think there's a mistake in the hsvToRgb. Here's my version:

``````function rgbFromHSV(h,s,v) {
/**
* I: An array of three elements hue (h) ∈ [0, 360], and saturation (s) and value (v) which are ∈ [0, 1]
* O: An array of red (r), green (g), blue (b), all ∈ [0, 255]
* Derived from https://en.wikipedia.org/wiki/HSL_and_HSV
* This stackexchange was the clearest derivation I found to reimplement https://cs.stackexchange.com/questions/64549/convert-hsv-to-rgb-colors
*/

hprime = h / 60;
const c = v * s;
const x = c * (1 - Math.abs(hprime % 2 - 1));
const m = v - c;
let r, g, b;
if (!hprime) {r = 0; g = 0; b = 0; }
if (hprime >= 0 && hprime < 1) { r = c; g = x; b = 0}
if (hprime >= 1 && hprime < 2) { r = x; g = c; b = 0}
if (hprime >= 2 && hprime < 3) { r = 0; g = c; b = x}
if (hprime >= 3 && hprime < 4) { r = 0; g = x; b = c}
if (hprime >= 4 && hprime < 5) { r = x; g = 0; b = c}
if (hprime >= 5 && hprime < 6) { r = c; g = 0; b = x}

r = Math.round( (r + m)* 255);
g = Math.round( (g + m)* 255);
b = Math.round( (b + m)* 255);

return [r, g, b]
}
``````

if h is equal to 360 this code shows NaN because you are not checking hprime for value 6 (360/60 = 6)
if (hprime >= 5 && hprime <= 6) { r = c; g = 0; b = x} "hprime <= 6" instead of "hprime < 6" fixes it

### SAKryukov commented Nov 6, 2023 • edited Loading

It does work, but it is not good to do the comparison of floating point Number values as you do in your `switch`. If it works in your case, this is only a potentially unreliable special case. You could figure out the three cases of your `switch` before your `/=` expressions. With minimal modifications of your code, it would look like

``````const rgbToHsl = (r, g, b, a) => {
let [r, g, b, a] = rgba;
let max = Math.max(r, g, b), min = Math.min(r, g, b);
const componentCase = max == r ? 0 : (max == g ? 1 : 2); // is max r g or b?
r /= 255, g /= 255, b /= 255, min /= 255, max /= 255;
let h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
let d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (componentCase) {
case 0: h = (g - b) / d + (g < b ? 6 : 0); break;
case 1: h = (b - r) / d + 2; break;
case 2: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l, a];
};
``````

Also, note that you should use `const` or `let`, but not `var`, to avoid the known risks related to the obsolete `var`.
Then, it is not nice that you accept separate `r`, `g`, and `b` on input but the function returns an array. Why RGB should be different from HSL? Note the line `let [r, g, b, a] = rgba`.

Finally, it is good to have the alpha channel as well. This work is done for the use in CSS, where the alpha channel is generally used everywhere.

### PEZ commented Nov 30, 2023

Here's a version of hslToRgb for Clojure (and ClojureScript and whatever Clojure implementation):

```(defn hsl->rgb [h s l]
(let [hue->rgb (fn hue->rgb
[p q t]
(let [t (if (< t 0) (inc t) t)
t (if (> t 1) (dec t) t)]
(cond
(< t (/ 1 6)) (+ p (* (* (- q p) 6) t))
(< t (/ 1 2)) q
(< t (/ 2 3)) (+ p (* (* (- q p) (- (/ 2 3) t)) 6))
:else p)))
[r g b] (if (= s 0)
[l l l]
(let [q (if (< l 0.5) (* l (+ 1 s)) (- (+ l s) (* l s)))
p (- (* 2 l) q)]
[(hue->rgb p q (+ h (/ 1 3))) (hue->rgb p q h) (hue->rgb p q (- h (/ 1 3)))]))]
[(* r 255) (* g 255) (* b 255)]))

(comment
(hsl->rgb (/ 120 256) 1.0 0.5)
;; => [0 255 207.18750000000003]
:rcf)```

It's a straight port. There may be dragons such as boxed math and things? I haven't considered.

### SAKryukov commented Nov 30, 2023

Thank you, Peter!

Here's a version of hslToRgb for Clojure (and ClojureScript and whatever Clojure implementation):

to join this conversation on GitHub. Already have an account? Sign in to comment