Wie kann ich eine HEX-Farbe programmgesteuert aufhellen oder abdunkeln, RGB-Farben verarbeiten und Farben miteinander mischen?

Programmgesteuertes Aufhellen oder Abdunkeln einer HEX-Farbe (oder RGB und Mischfarben)

Das Problem

Das Ziel besteht darin, eine Funktion zu erstellen, die das kann Eine Hex-Farbe um einen bestimmten Betrag aufhellen oder abdunkeln. Darüber hinaus möchten Sie RGB-Farben verarbeiten und Farben miteinander mischen.

Die Lösung

<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));

Erklärung

Diese Funktion wandelt die Hex-Farbe in eine Ganzzahl um und addiert oder Subtrahieren des angegebenen Betrags von jedem der RGB-Kanäle und anschließendes Umwandeln des Ergebnisses zurück in eine Hex-Farbe.

Verbesserungen

Um die Funktion zu verbessern, können Sie Fehlerbehandlung und Unterstützung für verschiedene hinzufügen Farbformate (RGB, HSL). Sie können auch die Möglichkeit hinzufügen, Farben miteinander zu mischen, indem Sie einen zweiten Farbparameter übergeben.

Hier ist eine verbesserte Version:

<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>

Diese verbesserte Version enthält die folgenden Funktionen:

• Fehlerbehandlung: Die Funktion prüft auf ungültige Eingaben und gibt null zurück, wenn die Eingabe ungültig ist.
• Unterstützung für verschiedene Farbformate: Die Funktion unterstützt Hex-, RGB- und RGBA-Farbformate.
• Farbmischung:Sie können zwei Farben miteinander mischen, indem Sie einen zweiten Farbparameter übergeben.
• Linear oder logarithmisch Blending: Sie können angeben, ob lineares oder logarithmisches Blending verwendet werden soll, indem Sie einen vierten Parameter übergeben.
• Alphakanal-Unterstützung: Die Funktion unterstützt Alphakanäle und Sie können Alphakanäle mischen beim Mischen von Farben zusammen.

Das obige ist der detaillierte Inhalt vonWie kann ich eine HEX-Farbe programmgesteuert aufhellen oder abdunkeln, RGB-Farben verarbeiten und Farben miteinander mischen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!