[Snippet #01 - PHP] color conversion

couleur
php
Date de publication

lun. 31 déc. 2012 à 14:18

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.

<?php
//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]).

<?php
//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 #)

<?php
//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.

<?php
//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 :

<tr><th>0.09</th><td style="background:#070908;">#070908</td><td style="background:#36403c;">#36403c</td><td style="background:#64786f;">#64786f</td><td style="background:#99aaa2;">#99aaa2</td><td style="background:#d0d8d5;">#d0d8d5</td></tr>
<tr><th>0.29</th><td style="background:#060a08;">#060a08</td><td style="background:#2a4c3d;">#2a4c3d</td><td style="background:#4e8e72;">#4e8e72</td><td style="background:#86bda4;">#86bda4</td><td style="background:#c8e1d6;">#c8e1d6</td></tr>
<tr><th>0.49</th><td style="background:#040c09;">#040c09</td><td style="background:#1e583e;">#1e583e</td><td style="background:#38a474;">#38a474</td><td style="background:#73cfa6;">#73cfa6</td><td style="background:#bfe9d7;">#bfe9d7</td></tr>
<tr><th>0.69</th><td style="background:#030d09;">#030d09</td><td style="background:#136440;">#136440</td><td style="background:#22bb77;color:#fff"><b>#22bb77</b></td><td style="background:#60e2a8;">#60e2a8</td><td style="background:#b6f2d7;">#b6f2d7</td></tr>
<tr><th>0.89</th><td style="background:#010f09;">#010f09</td><td style="background:#076f41;">#076f41</td><td style="background:#0dd079;">#0dd079</td><td style="background:#4df5aa;">#4df5aa</td><td style="background:#aefbd8;">#aefbd8</td></tr>    <br/>
sat  lum 0.03 0.23 0.43 0.63 0.83

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.