Skip to content

Instantly share code, notes, and snippets.

@tdbe

tdbe/proper-js-color-conversion-algorithms.html

Forked from mjackson/color-conversion-algorithms.js
Last active May 11, 2021 00:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tdbe/0f30d588bed2d4b54bd8001e03acef06 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tdbe/0f30d588bed2d4b54bd8001e03acef06 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tdbe revised this gist Oct 6, 2020. No changes.
  2. tdbe revised this gist Oct 6, 2020. No changes.
  3. tdbe revised this gist Oct 6, 2020. No changes.
  4. tdbe revised this gist Oct 6, 2020. No changes.
  5. tdbe revised this gist Oct 6, 2020. No changes.
  6. tdbe revised this gist Oct 6, 2020. No changes.
  7. tdbe revised this gist Oct 6, 2020. No changes.
  8. tdbe renamed this gist Oct 6, 2020. 1 changed file with 90 additions and 90 deletions.
    180 changes: 90 additions & 90 deletions proper-color-conversion-algorithms.js → proper-js-color-conversion-algorithms.html
    View file
    Original file line number Diff line number Diff line change
    @@ -55,7 +55,7 @@ <H3>Using native javascript color conversion from any to any</H3>

    function rgbToHex(r, g, b) {

    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }

    function cutHex(h){
    @@ -114,29 +114,29 @@ <H3>Using native javascript color conversion from any to any</H3>
    * @return Array The HSL representation
    */
    function rgbToHsl(r, g, b) {
    r /= 255, g /= 255, b /= 255;
    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;
    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);
    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;
    }
    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 = Math.round(lerp(0,359,h));
    s = Math.round(s*100);
    l = Math.round(l*100);
    return [ h, s, l ];
    h /= 6;
    }
    h = Math.round(lerp(0,359,h));
    s = Math.round(s*100);
    l = Math.round(l*100);
    return [ h, s, l ];
    }

    /**
    @@ -151,32 +151,32 @@ <H3>Using native javascript color conversion from any to any</H3>
    * @return Array The RGB representation
    */
    function hslToRgb(h, s, l) {
    h/=359;
    s/=100;
    l/=100;
    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;
    }
    h/=359;
    s/=100;
    l/=100;
    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;
    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);
    }
    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
    }

    return [ Math.round(r * 255), Math.round(g * 255), Math.round(b * 255) ];
    return [ Math.round(r * 255), Math.round(g * 255), Math.round(b * 255) ];
    }

    /**
    @@ -191,29 +191,29 @@ <H3>Using native javascript color conversion from any to any</H3>
    * @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;
    r /= 255, g /= 255, b /= 255;

    var d = max - min;
    s = max == 0 ? 0 : d / max;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, v = 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;
    }
    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 = Math.round(lerp(0,359,h));
    s = Math.round(s*100);
    v = Math.round(v*100);
    return [ h, s, v ];
    h /= 6;
    }
    h = Math.round(lerp(0,359,h));
    s = Math.round(s*100);
    v = Math.round(v*100);
    return [ h, s, v ];
    }

    /**
    @@ -228,27 +228,27 @@ <H3>Using native javascript color conversion from any to any</H3>
    * @return Array The RGB representation
    */
    function hsvToRgb(h, s, v) {
    h/=359;
    s/=100;
    v/=100;
    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 [ Math.round(r * 255), Math.round(g * 255), Math.round(b * 255) ];
    h/=359;
    s/=100;
    v/=100;
    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 [ Math.round(r * 255), Math.round(g * 255), Math.round(b * 255) ];
    }

    function hslToHex(h, s, l){
    @@ -278,18 +278,18 @@ <H3>Using native javascript color conversion from any to any</H3>


    m_sliderHue.oninput = function(refreshOthers = true) {
    m_outputHue.innerHTML = this.value;
    UpdateColorPickerHue(this.value, refreshOthers);
    m_outputHue.innerHTML = this.value;
    UpdateColorPickerHue(this.value, refreshOthers);
    }

    m_sliderSat.oninput = function(refreshOthers = true) {
    m_outputSat.innerHTML = this.value;
    UpdateColorPickerSat(this.value, refreshOthers);
    m_outputSat.innerHTML = this.value;
    UpdateColorPickerSat(this.value, refreshOthers);
    }

    m_sliderVal.oninput = function(refreshOthers = true) {
    m_outputVal.innerHTML = this.value;
    UpdateColorPickerVal(this.value, refreshOthers);
    m_outputVal.innerHTML = this.value;
    UpdateColorPickerVal(this.value, refreshOthers);
    }

    function UpdateColorPickerHue(hue, refreshOthers = true){
  9. tdbe revised this gist Oct 6, 2020. No changes.
  10. tdbe revised this gist Oct 6, 2020. No changes.
  11. tdbe revised this gist Oct 6, 2020. No changes.
  12. tdbe revised this gist Oct 6, 2020. 1 changed file with 0 additions and 8 deletions.
    8 changes: 0 additions & 8 deletions proper-color-conversion-algorithms.js
    View file
    Original file line number Diff line number Diff line change
    @@ -251,14 +251,6 @@
    return [ Math.round(r * 255), Math.round(g * 255), Math.round(b * 255) ];
    }


    function clickColor(colorInput){
    console.log("clickColor: colorInput: "+colorInput);
    var rgb = hexToRgb(colorInput.value == null? colorInput : colorInput.value);
    document.getElementById("colorPickerResult").innerHTML = rgb[0]+", "+rgb[1]+", "+rgb[2];
    }


    function hslToHex(h, s, l){
    var rgb = hslToRgb(h, s, l);
    return rgbToHex(rgb[0],rgb[1],rgb[2]);
  13. tdbe revised this gist Oct 6, 2020. 2 changed files with 371 additions and 138 deletions.
    138 changes: 0 additions & 138 deletions color-conversion-algorithms.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,138 +0,0 @@
    /**
    * 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 ];
    }
    371 changes: 371 additions & 0 deletions proper-color-conversion-algorithms.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,371 @@
    <!doctype html>

    <html lang="en">
    <head>
    <meta charset="utf-8">

    <title>Color Picker</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">

    <link rel="stylesheet" href="css/style.css?v=1.0">


    </head>
    <body>

    <H1>Color Picker</H1>
    <H3>Using native javascript color conversion from any to any</H3>

    <input type="color" class="form-control" id="html5colorpicker" onchange="clickColor(this)" value="#ff0000">
    <!--div id="colorPreview"></div-->
    <br/>
    <br/>
    <span>Color (rgb) = <span id="colorPickerResult"></<span></span>
    <br/>
    <br/>
    <br/>
    <div class="slidecontainer">
    <p>Hue: <span id="hueDemoValue"></span></p>
    <input type="range" min="0" max="359" value="50" class="slider" id="hueRange"/>

    <br/>
    <p>Sat: <span id="satDemoValue"></span></p>
    <input type="range" min="0" max="100" value="50" class="slider" id="satRange"/>

    <br/>
    <p>Lum: <span id="valDemoValue"></span></p>
    <input type="range" min="0" max="100" value="50" class="slider" id="valRange"/>
    </div>


    <script>
    var m_colorPicker = document.getElementById("html5colorpicker");
    var m_sliderHue = document.getElementById("hueRange");
    var m_sliderSat = document.getElementById("satRange");
    var m_sliderVal = document.getElementById("valRange");
    var m_outputHue = document.getElementById("hueDemoValue");
    var m_outputSat = document.getElementById("satDemoValue");
    var m_outputVal = document.getElementById("valDemoValue");
    m_outputHue.innerHTML = m_sliderHue.value;
    m_outputSat.innerHTML = m_sliderSat.value;
    m_outputVal.innerHTML = m_sliderVal.value;
    var m_storedColorPickerValue = m_colorPicker.value = "#4d995a";


    function rgbToHex(r, g, b) {

    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }

    function cutHex(h){
    return (h.charAt(0)=="#") ? h.substring(1,7):h
    }

    function hexToRgb(h){
    var r = parseInt((cutHex(h)).substring(0,2),16);
    var g = parseInt((cutHex(h)).substring(2,4), 16);
    var b = parseInt((cutHex(h)).substring(4,6),16);
    return[r,g,b];
    }


    function hslToRgb(h, s, l){
    var r, g, b;

    if(s == 0){
    r = g = b = l; // achromatic
    }else{
    var hue2rgb = 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 [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }

    //https://gist.github.com/demonixis/4202528/5f0ce3c2622fba580e78189cfe3ff0f9dd8aefcc
    function lerp (value1, value2, amount) {
    amount = amount < 0 ? 0 : amount;
    amount = amount > 1 ? 1 : amount;
    return value1 + (value2 - value1) * amount;
    }

    /*
    * 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 the same way as your browser DevTools color picker.
    *
    * @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;
    }
    h = Math.round(lerp(0,359,h));
    s = Math.round(s*100);
    l = Math.round(l*100);
    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 the same format as in your browser DevTools color picker
    * 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) {
    h/=359;
    s/=100;
    l/=100;
    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 [ Math.round(r * 255), Math.round(g * 255), Math.round(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 the same way as your browser DevTools color picker
    *
    * @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;
    }
    h = Math.round(lerp(0,359,h));
    s = Math.round(s*100);
    v = Math.round(v*100);
    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 the same format as your browser DevTools color picker
    * 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) {
    h/=359;
    s/=100;
    v/=100;
    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 [ Math.round(r * 255), Math.round(g * 255), Math.round(b * 255) ];
    }


    function clickColor(colorInput){
    console.log("clickColor: colorInput: "+colorInput);
    var rgb = hexToRgb(colorInput.value == null? colorInput : colorInput.value);
    document.getElementById("colorPickerResult").innerHTML = rgb[0]+", "+rgb[1]+", "+rgb[2];
    }


    function hslToHex(h, s, l){
    var rgb = hslToRgb(h, s, l);
    return rgbToHex(rgb[0],rgb[1],rgb[2]);
    }

    function hsvToHex(h, s, l){
    var rgb = hsvToRgb(h, s, l);
    return rgbToHex(rgb[0],rgb[1],rgb[2]);
    }

    function hexToHsv(hex) {
    var rgb = hexToRgb(hex);
    var hsv = rgbToHsv(rgb[0],rgb[1],rgb[2]);
    return hsv;
    }


    function clickColor(colorInput){
    console.log("clickColor: colorInput: "+colorInput);
    var rgb = hexToRgb(colorInput.value == null? colorInput : colorInput.value);
    document.getElementById("colorPickerResult").innerHTML = rgb[0]+", "+rgb[1]+", "+rgb[2];
    }




    m_sliderHue.oninput = function(refreshOthers = true) {
    m_outputHue.innerHTML = this.value;
    UpdateColorPickerHue(this.value, refreshOthers);
    }

    m_sliderSat.oninput = function(refreshOthers = true) {
    m_outputSat.innerHTML = this.value;
    UpdateColorPickerSat(this.value, refreshOthers);
    }

    m_sliderVal.oninput = function(refreshOthers = true) {
    m_outputVal.innerHTML = this.value;
    UpdateColorPickerVal(this.value, refreshOthers);
    }

    function UpdateColorPickerHue(hue, refreshOthers = true){
    console.log("UpdateColorPicker hue: "+hue);
    var pickerHex = m_storedColorPickerValue;
    console.log("pickerHex: "+pickerHex);
    var pkHSV = hexToHsv(pickerHex);
    console.log("pkHSV b4: "+pkHSV[0]+"; "+pkHSV[1]+"; "+pkHSV[2]);
    pkHSV[0] = hue;
    var backToHex = hsvToHex((pkHSV[0]), (pkHSV[1]), (pkHSV[2]));
    console.log("pkHSV: "+(pkHSV[0])+"; "+(pkHSV[1])+"; "+(pkHSV[2]));
    console.log("backToHex: "+backToHex);
    m_storedColorPickerValue = backToHex;
    //m_colorPicker.style.backgroundColor = backToHex;
    m_colorPicker.value = backToHex;
    clickColor(backToHex);
    if(refreshOthers){
    //m_sliderHue.oninput(false);
    m_sliderSat.oninput(false);
    m_sliderVal.oninput(false);
    }
    }

    function UpdateColorPickerSat(sat, refreshOthers = true){
    console.log("UpdateColorPicker sat: "+sat);
    var pickerHex = m_storedColorPickerValue;
    console.log("pickerHex: "+pickerHex);
    var pkHSV = hexToHsv(pickerHex);
    console.log("pkHSV b4: "+pkHSV[0]+"; "+pkHSV[1]+"; "+pkHSV[2]);
    pkHSV[1] = sat;
    var backToHex = hsvToHex((pkHSV[0]), (pkHSV[1]), (pkHSV[2]));
    console.log("pkHSV: "+(pkHSV[0])+"; "+(pkHSV[1])+"; "+(pkHSV[2]));
    console.log("backToHex: "+backToHex);
    m_storedColorPickerValue = backToHex;
    //m_colorPicker.style.backgroundColor = backToHex;
    m_colorPicker.value = backToHex;
    clickColor(backToHex);
    if(refreshOthers){
    m_sliderHue.oninput(false);
    //m_sliderSat.oninput(false);
    m_sliderVal.oninput(false);
    }
    }

    function UpdateColorPickerVal(val, refreshOthers = true){
    console.log("UpdateColorPicker val: "+val);
    var pickerHex = m_storedColorPickerValue;
    console.log("pickerHex: "+pickerHex);
    var pkHSV = hexToHsv(pickerHex);
    console.log("pkHSV b4: "+pkHSV[0]+"; "+pkHSV[1]+"; "+pkHSV[2]);
    pkHSV[2] = val;
    var backToHex = hsvToHex((pkHSV[0]), (pkHSV[1]), (pkHSV[2]));
    console.log("pkHSV: "+(pkHSV[0])+"; "+(pkHSV[1])+"; "+(pkHSV[2]));
    console.log("backToHex: "+backToHex);
    m_storedColorPickerValue = backToHex;
    //m_colorPicker.style.backgroundColor = backToHex;
    m_colorPicker.value = backToHex;
    clickColor(backToHex);
    if(refreshOthers){
    m_sliderHue.oninput(false);
    m_sliderSat.oninput(false);
    //m_sliderVal.oninput(false);
    }
    }


    window.onload = (clickColor(m_colorPicker));

    </script>
    </body>
    </html>
  14. @mjackson mjackson revised this gist Apr 4, 2013. 1 changed file with 7 additions and 6 deletions.
    13 changes: 7 additions & 6 deletions color-conversion-algorithms.js
    View file
    Original file line number Diff line number Diff line change
    @@ -9,19 +9,19 @@
    * @param Number b The blue color value
    * @return Array The HSL representation
    */
    function rgbToHsl(r, g, b){
    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){
    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){
    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;
    @@ -44,7 +44,7 @@ function rgbToHsl(r, g, b){
    * @param Number l The lightness
    * @return Array The RGB representation
    */
    function hslToRgb(h, s, l){
    function hslToRgb(h, s, l) {
    var r, g, b;

    if (s == 0) {
    @@ -61,6 +61,7 @@ function hslToRgb(h, s, l){

    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);
    @@ -80,7 +81,7 @@ function hslToRgb(h, s, l){
    * @param Number b The blue color value
    * @return Array The HSV representation
    */
    function rgbToHsv(r, g, b){
    function rgbToHsv(r, g, b) {
    r /= 255, g /= 255, b /= 255;

    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    @@ -115,7 +116,7 @@ function rgbToHsv(r, g, b){
    * @param Number v The value
    * @return Array The RGB representation
    */
    function hsvToRgb(h, s, v){
    function hsvToRgb(h, s, v) {
    var r, g, b;

    var i = Math.floor(h * 6);
  15. @mjackson mjackson created this gist Apr 4, 2013.
    137 changes: 137 additions & 0 deletions color-conversion-algorithms.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,137 @@
    /**
    * 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 ];
    }