Gestion de la couleur

Voilà un ensemble de fonctions JScript qui permettent de convertir les couleurs du format RGB au format HSL et inversement. En effet, si vous voulez eclaircir une couleur, il faut être au format HSL (Hue, Saturation and Luminance) qui est le format pour les humains alors que le codage HTML standard est RGB (#RRGGBB ou RR, GG et BB sont les codages des trois couleurs) est le langage machine.


// JScript source code
//Red : 0..255
//Green : 0..255
//Blue : 0..255
//Hue : 0,0..360,0<=>0..255
//Lum : 0,0..1,0<=>0..255
//Sat : 0,0..1,0<=>0..255

//Retourne un tableau de 3 valeurs : H,S,L
function RGB2HSL (r, g, b)
{
  red = Math.round (r);
  green = Math.round (g);
  blue = Math.round (b);
  var minval = Math.min (red, Math.min (green, blue));
  var maxval = Math.max (red, Math.max (green, blue));
  var mdiff = maxval – minval + 0.0;
  var msum = maxval + minval + 0.0;
  var luminance = msum / 510.0;
  var saturation;
  var hue;
  if (maxval == minval)
  {
    saturation = 0.0;
    hue = 0.0;
  }
  else
  {
    var rnorm = (maxval – red) / mdiff;
    var gnorm = (maxval – green) / mdiff;
    var bnorm = (maxval – blue) / mdiff;
    saturation = (luminance <= 0.5) ? (mdiff / msum) : (mdiff / (510.0 – msum));
    if (red == maxval)
      hue = 60.0 * (6.0 + bnorm – gnorm);
    if (green == maxval)
      hue = 60.0 * (2.0 + rnorm – bnorm);
    if (blue == maxval)
      hue = 60.0 * (4.0 + gnorm – rnorm);
    if (hue > 360.0)
      hue -= 360.0;
  }
  return new Array (Math.round (hue * 255.0 / 360.0), Math.round (saturation * 255.0), Math.round (luminance * 255.0));
}

function Magic (rm1, rm2, rh)
{
  var retval = rm1;
  if (rh > 360.0)
    rh -= 360.0;
  if (rh < 0.0)
    rh += 360.0;
  if (rh < 60.0)
    retval = rm1 + (rm2 – rm1) * rh / 60.0;
  else if (rh < 180.0)
    retval = rm2;
  else if (rh < 240.0)
    retval = rm1 + (rm2 – rm1) * (240.0 – rh) / 60.0;
  return Math.round (retval * 255);
}

//Retourne un tableau de 3 valeurs : R,G,B
function HSL2RGB (h, s, l)
{
  var hue = h * 360.0 / 255.0;
  var saturation = s / 255.0;
  var luminance = l / 255.0;
  var red;
  var green;
  var blue;
  if (saturation == 0.0)
  {
    red = green = blue = Math.round (luminance * 255.0);
  }
  else
  {
    var rm1;
    var rm2;
    if (luminance <= 0.5)
      rm2 = luminance + luminance * saturation;
    else
      rm2 = luminance + saturation – luminance * saturation;
    rm1 = 2.0 * luminance – rm2;
    red = Magic (rm1, rm2, hue + 120.0);
    green = Magic (rm1, rm2, hue);
    blue = Magic (rm1, rm2, hue – 120.0);
  }
  return new Array (red, green, blue);
}

La procédure est la suivante :

  • conversion RGB vers HSL,
  • changement de la luminance
  • conversion HSL vers RGB

Ci joint, un exemple  en ASP

Function FormatColorClaire(color,ratio)
 if len(color)=7 then
  color = right(color,6)
 end if
 
 ‘on passe en RGB
 R = CInt(« &H » & left(color,2))
 V = CInt(« &H » & mid(color,3,2))
 B = CInt(« &H » & right(color,2))
 
 ‘on passe en HSL
 tab = split(RGB2HSL (R, V, B), », »)

 ‘on change la luminosité
 ‘on repasse en RGB
 tab2 = split(HSL2RGB (tab(0),tab(1), ratio), », »)
 
 ‘puis on recode en hexa
 R = Format_double(hex(tab2(0)), 2, « 0 »)
 V = Format_double(hex(tab2(1)), 2, « 0 »)
 B = Format_double(hex(tab2(2)), 2, « 0 »)

 ‘response.write R &  »  » & V &  »  » & B
 FormatColorClaire = « # » & R & V & B
 
End Function

Quelques liens :

http://www.easyrgb.com/math.php?MATH=M19 pour les formules mathématiques de conversion entre beaucoup de formats
D’autres fonctions en C# et VB : http://www.bobpowell.net/RGBHSB.htm
Et bien sûr Google :
http://www.google.fr/search?sourceid=navclient&hl=fr&ie=UTF-8&rls=GGLI,GGLI:2005-25,GGLI:fr&q=HSL+to+RGB

 

 

3 commentaires

  1. Merci pour ces infos.
    Je suis en train de batailler pour crééer un gradient lumineux en asp, du coup ton code aurais pu m’enlever une grosse d’épine du pied s’il avait marché ou été complet… dommage…

Répondre à eclisse64 Annuler la réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *