Comment puis-je éclaircir ou assombrir par programmation une couleur HEX, gérer les couleurs RVB et mélanger les couleurs ensemble ?

Éclaircir ou assombrir par programmation une couleur HEX (ou RVB et mélanger les couleurs)

Le problème

Le but est de créer une fonction qui peut éclaircir ou assombrir une couleur hexadécimale d’une quantité spécifique. De plus, vous souhaitez gérer les couleurs RVB et mélanger les couleurs ensemble.

La solution

<code class="javascript">function LightenDarkenColor(col, amt) {
  col = parseInt(col, 16);
  return (((col &amp; 0x0000FF) + amt) | ((((col >> 8) &amp; 0x00FF) + amt) << 8) | (((col >> 16) + amt) << 16)).toString(16);
}

// TEST
console.log(LightenDarkenColor("3F6D2A", 40));

Explication

Cette fonction fonctionne en convertissant la couleur hexadécimale en un nombre entier, en ajoutant ou en soustrayant la quantité spécifiée à chacun des canaux RVB, puis en reconvertissant le résultat en couleur hexadécimale.

Améliorations

Pour améliorer la fonction, vous pouvez ajouter la gestion des erreurs et la prise en charge de différents formats de couleurs (RVB, HSL). Vous pouvez également ajouter la possibilité de mélanger les couleurs en passant un deuxième paramètre de couleur.

Voici une version améliorée :

<code class="javascript">function pSBC(p, c0, c1, l) {
  let r, g, b, P, f, t, h, i = parseInt;
  if (typeof(p) != "number" || p <-1 || p > 1 || typeof(c0) != "string" || (c0[0] != 'r' &amp;&amp; c0[0] != '#') || (c1 &amp;&amp; !a)) return null;
  if (!this.pSBCr) this.pSBCr = (d) => {
    let n = d.length, x = {};
    if (n > 9) {
      [r, g, b, a] = d = d.split(",");
      n = d.length;
      if (n < 3 || n > 4) return null;
      x.r = i(r[3] == "a" ? r.slice(5): r.slice(4), 16);
      x.g = i(g);
      x.b = i(b);
      x.a = a ? parseFloat(a) : -1;
    } else {
      if (n == 8 || n == 6 || n < 4) return null;
      if (n < 6) d = "#" + d[1] + d[1] + d[2] + d[2] + d[3] + d[3] + (n > 4 ? d[4] + d[4] : "");
      d = i(d.slice(1), 16);
      if (n == 9 || n == 5) x.r = d >> 24 &amp; 255, x.g = d >> 16 &amp; 255, x.b = d >> 8 &amp; 255, x.a = m((d &amp; 255) / 0.255) /1000;
      else x.r = d >> 16, x.g = d >> 8 &amp; 255, x.b = d &amp; 255, x.a = -1;
    }
    return x;
  };

  h = c0.length > 9;
  h = a ? c1.length > 9 ? true : c1 == "c"?!h : false : h;
  f = this.pSBCr(c0);
  P = p < 0;
  t = c1 &amp;&amp; c1 != "c" ? this.pSBCr(c1) : P ? {r:0,g:0,b:0,a:-1} : {r:255,g:255,b:255,a:-1};
  p = P ? p*-1 : p;
  P = 1-p;
  if (!f || !t) return null;
  if (l) r = m(P*f.r + p*t.r), g = m(P*f.g + p*t.g), b = m(P*f.b + p*t.b);
  else r = m((P*f.r**2 + p*t.r**2)**0.5), g = m((P*f.g**2 + p*t.g**2)**0.5), b = m((P*f.b**2 + p*t.b**2)**0.5);
  a = f.a, t = t.a, f= a >= 0 || t >= 0, a = f ? a < 0 ? t : t < 0 ? a : a*P + t*p : 0;
  if (h) return "rgb" + (f ? "a(" : "(") +r + "," +g + "," +b + (f ? "," + m(a*1000)/1000 : "") + ")";
  else return "#" + (4294967296+r*16777216+g*65536+b*256+(f ? m(a*255):0)).toString(16).slice(1, (f? undefined : -2));
}</code>

Cette version améliorée comprend les fonctionnalités suivantes :

• Gestion des erreurs : La fonction vérifie les entrées non valides et renvoie null si l'entrée n'est pas valide.
• Prise en charge de différents formats de couleurs : La fonction prend en charge Formats de couleurs hexadécimal, RVB et RVBA.
• Mélange de couleurs : Vous pouvez mélanger deux couleurs ensemble en passant un deuxième paramètre de couleur.
• Linéaire ou logarithmique blending : Vous pouvez spécifier s'il faut utiliser un mélange linéaire ou logarithmique en passant un quatrième paramètre.
• Prise en charge du canal alpha : La fonction prend en charge les canaux alpha et vous pouvez mélanger les canaux alpha ensemble lors du mélange des couleurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!