Heim > Web-Frontend > js-Tutorial > Wie kann ich eine HEX-Farbe programmgesteuert aufhellen oder abdunkeln, RGB-Farben verarbeiten und Farben miteinander mischen?

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

Mary-Kate Olsen
Freigeben: 2024-11-05 07:15:02
Original
435 Leute haben es durchsucht

How can I programmatically lighten or darken a HEX color, handle RGB colors, and blend colors together?

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));
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage