“Arrondir” les valeurs de couleurs pour le plus proche, dans un petit ensemble de couleurs

La première étape serait de définir les couleurs que vous souhaitez comparer.

La deuxième étape est de trouver la plus petite distance à partir de votre couleur à l'une des couleurs que vous avez choisi à l'étape précédente. Afin de pouvoir mesurer cette distance, vous avez besoin d'un espace Euclidien dans lequel le modèle de couleurs.

Naturellement, le simple choix serait l'espace RVB

Et la distance entre deux couleurs C₁(r₁, g₁, b₁) et C₂(r₂, g₂, b₂) serait

sqrt( (r₁ - r₂)² + (g₁ - g₂)² + b₁ - b₂)² ).

Mais si vous avez besoin de plus de précision, il serait préférable d'utiliser la Teinte-Chroma-Légèreté bicone de l'espace, un dérivé de la LGV cylindre.

Dans l'espace RVB, les choses étaient simples de R, G et B, où chacun sur un axe distinct. Dans HCL, nous avons besoin de calculer les coordonnées sur chacun des axes.

Tout d'abord, nous calculons le chroma (qui est un peu différent de la saturation) comme:

Chroma = max(Rouge, Vert, Bleu) - min(Rouge, Vert, Bleu)

Puis nous normaliser notre H, C et L de la valeur, de sorte que H va de 0 à 2 (pour couvrir un cercle si nous multiplions par PI et de prendre le radian comme unité), C va de 0 à 1 (le rayon du cercle trigonométrique) et L va de -1 (Noir) à 1 (Blanc).

Prochaine que nous prenons z = L sans transformation, comme il est clair à partir de l'image qu'il va le long de l'axe vertical.

On peut facilement observer que, pour une couleur, Chroma est la distance de l'axe z et la Teinte correspond à l'angle. Nous obtenons donc

x = C * cos(H*PI) et

y = C * sin(H*PI)

À ce point x, y et z seront tous dans [-1, 1] et la distance entre deux couleurs seront, à l'aide de la même formule que ci-dessus,

sqrt( (x₁ - x₂)² + (y₁ - o₂)² + (z₁ - z₂)² ).

---

Pour obtenir encore plus de précision et de trouver la couleur la plus proche selon la perception humaine de la couleur, vous pouvez utiliser les CIE-L*ab la modélisation de l'espace et de calculer la distance avec l'un de ces algorithmes. Les principes sont les mêmes que pour les deux cas présentés ci-dessus, seuls les algorithmes sont plus complexes.

---

Mise à jour (7 ans plus tard)

Enfin xkcd en vedette une bande dessinée que je peux utiliser dans ce post!

https://xkcd.com/1882/

function getSimilarColors (color) {
    var base_colors=["660000","990000","cc0000","cc3333","ea4c88","993399","663399","333399","0066cc","0099cc","66cccc","77cc33","669900","336600","666600","999900","cccc33","ffff00","ffcc33","ff9900","ff6600","cc6633","996633","663300","000000","999999","cccccc","ffffff"];

    //Convert to RGB, then R, G, B
    var color_rgb = hex2rgb(color);
    var color_r = color_rgb.split(',')[0];
    var color_g = color_rgb.split(',')[1];
    var color_b = color_rgb.split(',')[2];

    //Create an emtyp array for the difference betwwen the colors
    var differenceArray=[];

    //Function to find the smallest value in an array
    Array.min = function( array ){
           return Math.min.apply( Math, array );
    };


    //Convert the HEX color in the array to RGB colors, split them up to R-G-B, then find out the difference between the "color" and the colors in the array
    $.each(base_colors, function(index, value) { 
        var base_color_rgb = hex2rgb(value);
        var base_colors_r = base_color_rgb.split(',')[0];
        var base_colors_g = base_color_rgb.split(',')[1];
        var base_colors_b = base_color_rgb.split(',')[2];

        //Add the difference to the differenceArray
        differenceArray.push(Math.sqrt((color_r-base_colors_r)*(color_r-base_colors_r)+(color_g-base_colors_g)*(color_g-base_colors_g)+(color_b-base_colors_b)*(color_b-base_colors_b)));
    });

    //Get the lowest number from the differenceArray
    var lowest = Array.min(differenceArray);

    //Get the index for that lowest number
    var index = differenceArray.indexOf(lowest);

    //Function to convert HEX to RGB
    function hex2rgb( colour ) {
        var r,g,b;
        if ( colour.charAt(0) == '#' ) {
            colour = colour.substr(1);
        }

        r = colour.charAt(0) + colour.charAt(1);
        g = colour.charAt(2) + colour.charAt(3);
        b = colour.charAt(4) + colour.charAt(5);

        r = parseInt( r,16 );
        g = parseInt( g,16 );
        b = parseInt( b ,16);
        return r+','+g+','+b;
    }

    //Return the HEX code
    return base_colors[index];
}