Convertir des couleurs HTML<=>RGB + dégradés de couleurs (PHP)

J'ai vu plusieurs fois des gens qui se cassaient la tête à écrire une fonction pour convertir des couleurs du format HTML au format RGB, et inversement. J'en ai vu de toutes les couleurs (c'est le cas de le dire LOL), et notamment des réécritures farfelues de la conversion décimal<->hexadécimal...

Cet article est également disponible sur mon site perso à l'adresse http://iubito.free.fr/prog/html2rgb.php avec plus de mise en page ;-)

Télécharger le script
Il suffit d'extraire le fichier du zip, et de faire

<? include('html2rgb.php'); ?>

au début des pages PHP.

En PHP, il existe deux fonctions qui permettent de faire la conversion décimal<->hexa.

• int hexdec (string hex_string)
• string dechex ( int number)

Ces fonctions ont parfois des limites, notamment dans les grands nombre... mais pour les codes couleurs elles sont largement suffisantes.

Voici maintenant les deux fonctions qui transforment les couleurs HTML<->RGB. Pour ceux qui ne le savent pas, RGB=Red,Green,Blue. ;) R, G et B prennent des valeurs entre 0 et 255. A quoi ça sert, on n'écrit pas des couleurs RGB dans une page web ? héhé, si vous voulez faire un zoli dégradé de couleurs ! Héhé, les calculs sont mille fois plus faciles en RGB qu'en HTML.

---

Fonctions utiles

Ce premier code converti les couleurs HTML hexadécimales en RGB. La fonction prend comme paramètre une couleur "ff8000" ou "#ff8000" et retourne un tableau contenant les trois valeurs RGB.

<? // Array html2rgb(string color) // Ce code convertit les couleurs HTML (codées en hexa), en RGB : function html2rgb($color) {   // gestion du #...   if (substr($color,0,1)=="#") $color=substr($color,1,6);   $tablo[0] = hexdec(substr($color, 0, 2));   $tablo[1] = hexdec(substr($color, 2, 2));   $tablo[2] = hexdec(substr($color, 4, 2));   return $tablo; } // Exemple sans le # $rgb=html2rgb("fffc49"); echo $rgb[0]." ".$rgb[1]." ".$rgb[2]; // ==> 255 252 73 // Exemple avec le # $rgb2=html2rgb("#fffc49"); echo $rgb2[0]." ".$rgb2[1]." ".$rgb2[2]; // ==> 255 252 73 ?>

Passons maintenant à la fonction réciproque...
Avant d'attaquer les choses sérieuses, voici une petite fonction utile pour éviter les débordements...

<? // Une petite fonction utile pour borner les nombres entre 0 et 255. function bornes($nb,$min,$max) {   if ($nb<$min) $nb=$min; // $nb est borné bas   if ($nb>$max) $nb=$max; // $nb est Bornéo (ah! la vieille blague de mon prof de maths ;-)) hihi !)   return $nb; } ?>

Et maintenant les choses sérieuses ! Le paramètre $tablo est un Array retourné par la fonction html2rgb. La chaîne retournée contient le '#'. N'hésites pas à le virer si tu ne le veux pas.

<? // string rgb2html(Array tablo) // La réciproque exacte de la fonction html2rgb, avec comme paramètre un Array. function rgb2html($tablo) {   // Vérification des bornes...   for($i=0;$i<=2;$i++)   {     $tablo[$i]=bornes($tablo[$i],0,255);   }   // Le str_pad permet de remplir avec des 0   // parce que sinon rgb2html(Array(0,255,255)) retournerai #0ffff<=manque un 0 !   return "#" . str_pad(dechex( ($tablo[0]<<16)|($tablo[1]<<8)|$tablo[2] ), 6, "0", STR_PAD_LEFT); } // exemple : $col[0] = 123; $col[1] = 234; $col[2] = 34; echo rgb2html($col); // ==> #7bea22 // Avec le tableau retourné par l'exemple plus haut echo rgb2html($rgb2); // ==> #fffc49 // Test dépassement : echo rgb2html(Array(300,400,12345)); // ==> #ffffff echo rgb2html(Array(300,-40,-1)); // ==> #ff0000 // Test du str_pad : echo rgb2html(Array(0,128,128)); // ==> #008080 echo rgb2html(Array(2,3,4)); // ==> #020304 ?>

---

Et maintenant, un peu d'application ! ;-)

Du dégradé... t'en as peut-être vu en JavaScript. Mais voici une version PHP, qui marche avec tous les navigateurs !

Application 1 : une ligne en dégradé ;)

<? // Le code qui permet de faire une ligne dégradé $nb = 50; // Nb d'éléments d'une liste, de caractères d'une chaine => nb de couleurs différentes. $start = Array(0,255,255); // Tableau RGB de départ $end = Array(19,0,50); // Tableau RGB d'arrivée // On pourrait faire $start=html2rgb("#00ffff"); // et $end=html2rgb("#130032"); echo "<table border=0 width=100% cellspacing=0 cellpadding=0>"; echo "<tr height=5>"; // height = épaisseur de la ligne if ($nb>0) {   for ($i=0;$i<=$nb;$i++)   {     for ($j=0;$j<3;$j++) // Pour traiter le Rouge, Vert, Bleu     {       $buffer[$j] = $start[$j] + ($i/$nb)*($end[$j]-$start[$j]);     }     echo "<td bgcolor=\"".rgb2html($buffer)."\"></td>";   } } echo "</tr></table>"; ?>

Le résultat :

Application 2 : du texte en dégradé !

<? // La fonction écrit du texte en dégradé // Les paramètres $start et $end sont ici des valeurs HTML function texteDegrade($text,$starthtml,$endhtml) {   $start=html2rgb($starthtml);   $end=html2rgb($endhtml);   $nb=strlen($text);   if ($nb>0)   {     for ($i=0;$i<=$nb;$i++)     {       for ($j=0;$j<3;$j++) //Pour faire le Rouge, Vert, Bleu       {         $buffer[$j] = $start[$j] + ($i/$nb)*($end[$j]-$start[$j]);       }       echo "<font color=\"".rgb2html($buffer)."\">".substr($text,$i,1)."</font>";     }   } } echo texteDegrade("test de la fonction texteDegrade", "#123456", "#FEDCBA"); ?>

Le résultat : test de la fonction texteDegrade

Application 3 : Encore mieux ! du texte en dégradé avec plus de 2 couleurs !!!

Pour le moment c'est possible "manuellement" en faisant du genre :
<?
texteDegrade("Début du texte","0000FF","FFFF00");
texteDegrade("Suite du texte", "FFFF00","FF0000");
?>
Mais maintenant voici une fonction sympathique :)))

<? // texteDegrade2 permet de faire des dégradés sur 2, 3, n couleurs // texteDegrade2("Voyage en Italie","#00ff00|#ffffff|#ff0000") // Découpage de "Voyage en Italie" en 2 => "Voyage e" et "n Italie" // Dégradé vert=>blanc pour "Voyage e" et dégradé blanc=>rouge pour "n Italie" // Avec le tableau $preset, on peut faire des dégradés prédéfinis, du genre // texteDegrade2("Voyage en Italie","Italie"); function texteDegrade2($text,$couleurs) {   $couleurs=strtolower($couleurs);   $preset["italie"] = "00ff00|ffffff|ff0000";   $preset["france"] = "0000ff|ffffff|ff0000";   $preset["roumanie"] = "0000ff|ffff00|ff0000";   $preset["belgique"] = "000000|ffff00|ff0000";   $preset["irlande"] = "00ff00|ffffff|ffa500";   $preset["arcenciel"] = "ff0000|ffa500|ffff00|00ff00|0000ff|4B0082|9400D3";   if ($preset[$couleurs]) $couleurs=$preset[$couleurs];   $tablo=explode('|',$couleurs);   $nb=sizeof($tablo)-1; // Nb de dégradé entre 2 couleurs   $tablo2=explode('²',decoupe($text,$nb));   for ($i=0;$i<$nb;$i++)   {     texteDegrade($tablo2[$i],$tablo[$i],$tablo[$i+1]);   } } // Fonction qui découpe une chaine $txt en $nb morceaux // Merci Didier ;-)) function decoupe($txt,$nb) {   if(($nb<2)||($txt=="")) return $txt;   else   {     $tmp = substr($txt,0,round(strlen($txt)/$nb));     $txt2 = substr($txt,round(strlen($txt)/$nb));     return $tmp."²".decoupe($txt2,$nb-1);   } } ?>

Exemples :
texteDegrade2("Manger une paella","ff0000|ffff00|ff0000");
Manger une paella
texteDegrade2("Il faut visiter Anvers, rien que pour l'endroit, ça vaut le coup déjà ! (Coluche)", "Belgique");
Il faut visiter Anvers, rien que pour l'endroit, ça vaut le coup déjà ! (Coluche)
texteDegrade2("Le soleil brille, brille, brille...", "arcenciel");
Le soleil brille, brille, brille...

Et maintenant...

... laisse toi guider par ton imagination ! Enrichis facilement tes pages avec des dégradés de couleurs ;-))

Pour créer un dégradé sur autre chose que du texte (options d'une liste déroulante par exemple...), il faut s'inspirer de la fonction texteDegrade

$start=html2rgb('#123456'); //couleur départ $end=html2rgb('#654321'); //couleur arrivée $nb=10; //Nombre d'éléments, d'options dans un select, longueur d'un texte for ($i=0;$i<=$nb;$i++) {    for ($j=0;$j<3;$j++) //Pour faire le Rouge, Vert, Bleu    {       $buffer[$j] = $start[$j] + ($i/$nb)*($end[$j]-$start[$j]);    }    echo "<font color=\"".rgb2html($buffer)."\">blabla</font>";    // ou autre chose    // echo '<option style="background-color..."'></option>'; }