Yosko.net

[Snippet #01 - PHP] color conversion

Rédigé par Yosko - 31 décembre 2012 - 5 commentaires

La conversion RGB/HSL en PHP ? Rien de plus simple

En partant des algorithmes fournis sur ce site, j'ai écris en PHP les fonctions de conversion RGB/HSL.

On en trouve des variantes un peu partout sur le web, mais certaines sont fausse, ou parlent à tort de HSL quand elles traitent du HSV... Bref, autant repartir sur de bonnes bases.

En plus des fonctions de conversion RGB/HSL, je vous propose quelques petites fonctions utilitaires, le tout à télécharger au bas de l'article.

Nettoyer un code couleur HTML

S'assurer qu'il est au bon format et se débarasser du "#" pour pouvoir le traiter sans souci.

//returns a clean 6 digit hex number as a string
function cleanHexColor($hex) {
    $hex = strtolower($hex);
    //remove the leading "#"
    if(strlen($hex) == 7 || strlen($hex) == 4)
        $hex = substr($hex, -(strlen($hex)-1));

    // $hex like "1a7"
    if(preg_match('/^[a-f0-9]{6}$/i', $hex))
        return $hex;
    // $hex like "162a7b"
    elseif(preg_match('/^[a-f0-9]{3}$/i', $hex))
        return $hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
    //any other format
    else
        return "000000";
}

Conversion HTML > RGB

Convertir un code de couleur hexadécimal (sans #) en RGB (3 valeurs de [0-255]).

//returns an array of 3 [0-255] int
function hex2rgb($hex) {
    return array(
        hexdec(substr($hex, 0, 2)),
        hexdec(substr($hex, 2, 2)),
        hexdec(substr($hex, 4, 2)),
    );
}

Conversion RGB > HTML

Convertir les valeurs RGB (3 valeurs de [0-255]) d'une couleur en un code HTML (sans #)

//returns a 6 digit hex number as a string
function rgb2hex($rgb) {
    return ""
        .substr("00".dechex(ceil($rgb[0])), -2)
        .substr("00".dechex(ceil($rgb[1])), -2)
        .substr("00".dechex(ceil($rgb[2])), -2)
    ;
}

Faire varier une couleur

Un petit snippet pour fournir des variations d'un couleur fournie en paramètre. Il suffit de définir quelle dimension (HSL : teinte, saturation ou luminosité) on souhaite garder constante, et la fonction retournera un tableau avec les variantes. A combiner avec les fonctions ci-dessus + rgb2hsl et hsl2rgb à télécharger plus bas.

//returns a 2 dimensional array of HSL values (as subarray of 3 values [0-1] floats)
function variationAround($hsl, $stepSize = 0.2,  $constant = "hue") {
    if($constant == "hue") {
        $i = 1; $j = 2;
    } elseif($constant == "sat") {
        $i = 0; $j = 2;
    }if($constant == "lum") {
        $i = 0; $j = 1;
    }
    
    $variations = array();  //resulting variations
    $hslTemp = array();     //stores current variation
    $mod = array();         //stores modulos for h, s & l
    
    $mod[0] = (float)(($hsl[0]*100) % ($stepSize * 100)) / 100;
    $mod[1] = (float)(($hsl[1]*100) % ($stepSize * 100)) / 100;
    $mod[2] = (float)(($hsl[2]*100) % ($stepSize * 100)) / 100;
    
    $hslTemp = $hsl;
    $hslTemp[$i] = $mod[$i];
    while($hslTemp[$i] <= 1) {
        $row = array();
        $hslTemp[$j] = $mod[$j];
        while($hslTemp[$j] <= 1) {
            $row[(string)$hslTemp[$j]] = array($hslTemp[0], $hslTemp[1], $hslTemp[2]);
            $hslTemp[$j] = (float)($hslTemp[$j] + $stepSize);
        }
        $variations[(string)$hslTemp[$i]] = $row;
        $hslTemp[$i] = (float)($hslTemp[$i] + $stepSize);
    }
    
    return $variations;
}

Permet par exemple d'obtenir, pour la couleur #22bb77 et à teinte constante :


sat \ lum0.030.230.430.630.83
0.09#070908#36403c#64786f#99aaa2#d0d8d5
0.29#060a08#2a4c3d#4e8e72#86bda4#c8e1d6
0.49#040c09#1e583e#38a474#73cfa6#bfe9d7
0.69#030d09#136440#22bb77#60e2a8#b6f2d7
0.89#010f09#076f41#0dd079#4df5aa#aefbd8

Télécharger les fonctions et un exemple d'utilisation

Contient :

  • color.lib.php : toutes les fonctions évoquées, dont rgb2hsl et hsl2rgb.
  • exemple.php : une implémentation utilisant ces fonctions pour afficher les variations autour d'une couleur.

Keep calm & taste the rainbow.

5 commentaires

#1 mercredi 23 janvier 2013 @ 01:17 ak a dit :

C'est exactement ce que je cherchais pour un projet perso, merci !

#2 jeudi 24 janvier 2013 @ 10:32 Yosko a dit :

Ravi d'avoir pu rendre service smile

#3 jeudi 24 janvier 2013 @ 11:17 Bronco a dit :

Bon, alors ça, extrêmement utile! je récup' direct wink
ça pourrait même être intégré à auto_css (http://www.warriordudimanche.net/article10/un-framework-css-perso-en-php-minimal-mais-pas-mal-auto-css-php) (variation de couleur par exemple)... Tu me permettrais ? (je te cite bien entendu ^^)

En tout cas, merci wink

#4 jeudi 24 janvier 2013 @ 11:46 Yosko a dit :

Si je te permets ? Bien sûr, et même avec plaisir.

D'ailleurs, le variateur de teinte pourrait être repensé pour une utilisation plus cohérente (en s'inspirant par exemple du site http://colorschemedesigner.com qui propose des méthodes de sélections de teintes complémentaires intéressantes). Le but serait de sélectionner des teintes qui se marient bien entre elles.

EDIT : comme indiqué dans les fichiers, la licence c'est WTFPL (http://www.wtfpl.net/about/) (sauf pour les 2 algos de conversion RGB <> HSL que j'ai récupéré ailleurs).

#5 jeudi 24 janvier 2013 @ 12:02 Bronco a dit :

Cool ^^ merci wink

Écrire un commentaire

 Se rappeler de moi sur ce site

Capcha
Entrez le code de l'image :