RVB-HSV conversions

by toubia95

HTML

<input id="testeur" type="text" style="width: 100%">
<input id="testeur2" type="text" style="width: 100%">
<br>
<br>HEX
<div id="color1" class="colorbox" style="background:#6da158;"></div> RGB
<div id="color2" class="colorbox" style="background:rgb(109,161,88);"></div> HSL
<div id="color3" class="colorbox" style="background:hsl(103,29%,49%);"></div>
    <br>
<br>
Base 
<div id="color4" class="colorbox"></div> Complémentaire RYB
<div id="color5" class="colorbox"></div>

CSS

/* http://fr.wikipedia.org/wiki/Teinte_Saturation_Valeur

référence couleur : HSL (css) 103°,29%,49% ; RGB (css) 109,161,88 ; HEX (css) #6da158 ; psd TSL (HSV?) 103°,45%,63% ; psd Lab 61,-28,32 ; psd CMJN 64%,16%,77%,1% ; ai TSL (HSV?) 101°,45%,63% ; 

http://css-tricks.com/snippets/php/convert-hex-to-rgb/
http://css-tricks.com/examples/HSLaExplorer/
http://www.easyrgb.com/index.php?X=MATH

ENCOURS : revoir la fonction rgb2hsL() avec http://www.easyrgb.com/index.php?X=MATH
http://www.sange.be/lart-de-melanger-les-couleurs-1/
http://www.testcouleur.com/harmonie.html
http://www.intellego.fr/soutien-scolaire-seconde-professionnelle/aide-scolaire-arts-appliques/couleur-diaporamas/19364

-> Cercle chromatique de Eugène CHEVREUL
http://www.peintre-analyse.com/couleur.htm
http://www.art-georges.fr/SCRAPBOOKING/pages_html/couleurs.html
-> Classification de MUNSELL
http://en.wikipedia.org/wiki/Munsell_color_system
http://www.colourlovers.com/blog/2007/09/02/the-muller-formula-or-predictable-color-preferences
-> Théorie de Müller

/!\ 71 théories de la couleur : http://www.colorsystem.com/?lang=fr
*/
 .colorbox {
    width: 20px;
    height:20px;
    display: inline-block;
}

JavaScript

/*** COLOR CONVERSION FUNCTIONS ***
 * 1. RGB => HEX RgbToHex() version 1
 * 2. HEX => RGB HexToRgb() version 1
 * 3. HSL => RGB HslToRgb() version 1 => meilleure version ?
 * 4. RGB => HSV RgbToHsv() version 1 -> equivalente version 2
 * 5. RGB => HSL rgb2hsl() version 1
 * 6. HSL => RGB hsl2rgb() version 2 => moins bonne version ?
 * 7. RGB => HSV rgb2hsv() version 2 -> equivalente version 1
 * 8. HSV => RGB hsv2rgb() version 1 => OK optimisé
 * 9. HSV => HSL hsv_to_hsl() version 1 => OK optimisé
 * 10. HSL => HSV hsl_to_hsv() version 1 => OK optimisé
 * 11. RGB => RYB g2y() => simple décalage de vert à jaune
 * 12. RGB => CMYK rgb_to_cmyl() => valeurs très différentes de photoshop
 
 PROJETS : , optimiser code..., HEX => HSL, HEX => HSV, HSL => HEX, HSV => HEX
 *********************************/

/* 1. RGB to HEX conversion  (1 fonction => value)*/
function RgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
//$("#testeur").val(RgbToHex(109,161,88));

/* 2. HEX to RGB conversion (1 fonction => array [0,1,2]) */
function HexToRgb(h) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h),
        r = parseInt(result[1], 16),
        g = parseInt(result[2], 16),
        b = parseInt(result[3], 16);
    return [r, g, b];
}
//$("#testeur").val(HexToRgb('#6da158')[2]);
//$("#testeur").val(HexToRgb('#6da158').join(','));

/* 3. HSL to RGB conversion (2 fonctions => array [0,1,2]) */
function HslToRgb(h, s, l) {
    h /= 360;
    s /= 100;
    l /= 100;
    var m2 = (l <= 0.5) ? l * (s + 1) : l + s - (l * s),
        m1 = l * 2 - m2,
        r = parseInt(huetorgb(m1, m2, h + 1 / 3) * 255),
        g = parseInt(huetorgb(m1, m2, h) * 255),
        b = parseInt(huetorgb(m1, m2, h - 1 / 3) * 255);
    return [r, g, b];
}

function huetorgb(m1, m2, h) {
    if (h < 0) h = h + 1;
    else if (h > 1) h = h - 1;
    if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
    else if (h * 2 < 1) return m2;
    else if (h *...