Comments on: RGB to HSL and RGB to HSV color model conversion algorithms in JavaScript http://mjijackson.com/blog/2008/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/ Just another WordPress weblog Thu, 04 Dec 2008 19:02:26 +0000 http://wordpress.org/?v=2.6 By: TopC http://mjijackson.com/blog/2008/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-511 TopC Thu, 19 Jun 2008 21:20:01 +0000 http://mjijackson.com/2008/02/10/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-511 <p>While trawling for an RGB to HSV solution I stumbled across your code. I've written colour modelling code before so knew what I was aiming for, I just wanted a head start. Having put some code together I noticed one issue you might be interested in. The hsvToRgb() method needs to use <code>switch(i%6)</code> otherwise it'll go wrong when <code>h</code> is 1. This modules is in wikipidia's formula but has gone astray in your code.</p> <p>I came up with a Colour class to supply the behaviour. I was going to include my code but it wouldn't fit so here's an extract. Adding 360 (6 in you case) prevents the hue from going negative...</p> <pre><code>Colour.prototype._rgbToHsv = function() { var r = this._red, g = this._green, b = this._blue; var max = this._value = Math.max(r, g, b); var min = Math.min(r, g, b); var d = max - min; this._saturation = (max == 0) ? 0 : d / max; switch(max){ case min: this._hue = 0; break; // achromatic case r: this._hue = (60 * ((g - b) / d) + 360) % 360; break; case g: this._hue = 60 * ((b - r) / d) + 120; break; case b: this._hue = 60 * ((r - g) / d) + 240; break; } } </code></pre> <p>Cheers</p> While trawling for an RGB to HSV solution I stumbled across your code. I’ve written colour modelling code before so knew what I was aiming for, I just wanted a head start. Having put some code together I noticed one issue you might be interested in. The hsvToRgb() method needs to use switch(i%6) otherwise it’ll go wrong when h is 1. This modules is in wikipidia’s formula but has gone astray in your code.

I came up with a Colour class to supply the behaviour. I was going to include my code but it wouldn’t fit so here’s an extract. Adding 360 (6 in you case) prevents the hue from going negative…

Colour.prototype._rgbToHsv = function() {
    var r = this._red, g = this._green, b = this._blue;
    var max = this._value = Math.max(r, g, b);
    var min = Math.min(r, g, b);
    var d = max - min;
    this._saturation = (max == 0) ? 0 : d / max;
    switch(max){
        case min: this._hue = 0; break; // achromatic
        case r: this._hue = (60 * ((g - b) / d) + 360) % 360; break;
        case g: this._hue = 60 * ((b - r) / d) + 120; break;
        case b: this._hue = 60 * ((r - g) / d) + 240; break;
    }
}

Cheers

]]> By: unabacus http://mjijackson.com/blog/2008/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-499 unabacus Fri, 13 Jun 2008 22:41:42 +0000 http://mjijackson.com/2008/02/10/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-499 <p>Hi, nice work...! i've spent ages searching for good straight-forward calculations that would help me produce my own "colour" code. Mainly because, as you've said, any code i have found has been hideous in either stature (huge), cleverness (complexity) or unexpected features (bugs).. up until now i had failed entirely to get hold of anything that suited my needs.. </p> <p>Thanks <em>a lot</em>.. really appreciated.. if you have any stipulations for usage please let me know. I do however always mention sources with-in my creations if i have utilised anyone elses code.</p> Hi, nice work…! i’ve spent ages searching for good straight-forward calculations that would help me produce my own “colour” code. Mainly because, as you’ve said, any code i have found has been hideous in either stature (huge), cleverness (complexity) or unexpected features (bugs).. up until now i had failed entirely to get hold of anything that suited my needs..

Thanks a lot.. really appreciated.. if you have any stipulations for usage please let me know. I do however always mention sources with-in my creations if i have utilised anyone elses code.

]]> By: mjijackson http://mjijackson.com/blog/2008/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-498 mjijackson Fri, 13 Jun 2008 22:28:30 +0000 http://mjijackson.com/2008/02/10/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-498 <p>@Gyrobo: The color conversion algorithms are taken directly from the Wikipedia. In that source, the correct signs are</p> <p><code>2 - (max + min)</code></p> <p>This of course translates to</p> <p><code>2 - max - min</code></p> <p>As far as your second comment is concerned, the function comment clearly states that the HSL values are returned on [0,1]. This makes sense because the inverse function (hslToRgb) likewise expects those values on the same interval.</p> @Gyrobo: The color conversion algorithms are taken directly from the Wikipedia. In that source, the correct signs are

2 - (max + min)

This of course translates to

2 - max - min

As far as your second comment is concerned, the function comment clearly states that the HSL values are returned on [0,1]. This makes sense because the inverse function (hslToRgb) likewise expects those values on the same interval.

]]> By: Gyrobo http://mjijackson.com/blog/2008/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-497 Gyrobo Fri, 13 Jun 2008 20:47:15 +0000 http://mjijackson.com/2008/02/10/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-497 <p>Also, for rgbToHsl, shouldn't you include</p> <p><code>h*=360;</code> <code>s*=100;</code> <code>l*=100;</code> </p> <p>before the return statement? Personally, I would also Math.round() each of those.</p> Also, for rgbToHsl, shouldn’t you include

h*=360; s*=100; l*=100;

before the return statement? Personally, I would also Math.round() each of those.

]]> By: Gyrobo http://mjijackson.com/blog/2008/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-496 Gyrobo Fri, 13 Jun 2008 20:22:07 +0000 http://mjijackson.com/2008/02/10/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-496 <p>In the rgbToHsl line</p> <p><code>s = l > 0.5 ? d / (2 - max - min) : d / (max (PLUS) min);</code></p> <p>The <code>(2 - max - min)</code> should be <code>(2 - max (PLUS) min)</code>.</p> <p>(The preview isn't showing plus signs, so I just wrote them in.)</p> In the rgbToHsl line

s = l > 0.5 ? d / (2 - max - min) : d / (max (PLUS) min);

The (2 - max - min) should be (2 - max (PLUS) min).

(The preview isn’t showing plus signs, so I just wrote them in.)

]]> By: Francesco http://mjijackson.com/blog/2008/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-475 Francesco Tue, 03 Jun 2008 17:27:37 +0000 http://mjijackson.com/2008/02/10/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-475 <p>I really do appreciate your work, thank you very much for sharing.</p> I really do appreciate your work, thank you very much for sharing.

]]> By: mjijackson http://mjijackson.com/blog/2008/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-280 mjijackson Thu, 13 Mar 2008 00:55:29 +0000 http://mjijackson.com/2008/02/10/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-280 <p>@emre: I'll have to check that out. Mostly, I just wanted to be able to manipulate colors for the web. Since [CSS3][1] will accept RGB, hex, and HSL, I figured I would stick with those for the present time.</p> <p>[1]: http://www.w3.org/TR/css3-color/ "CSS3 color module"</p> @emre: I’ll have to check that out. Mostly, I just wanted to be able to manipulate colors for the web. Since [CSS3][1] will accept RGB, hex, and HSL, I figured I would stick with those for the present time.

[1]: http://www.w3.org/TR/css3-color/ “CSS3 color module”

]]> By: emre http://mjijackson.com/blog/2008/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-144 emre Wed, 13 Feb 2008 05:55:43 +0000 http://mjijackson.com/2008/02/10/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript/#comment-144 <p>If you want to get serious, use the <a href="http://en.wikipedia.org/wiki/Colorfulness" rel="nofollow">LCh color space</a> instead. The HSL/HSB model does not have much physiological basis. Not important for casual use.</p> If you want to get serious, use the LCh color space instead. The HSL/HSB model does not have much physiological basis. Not important for casual use.

]]>