Wie kann man eine bestimmte Farbe etwas dunkler oder heller machen?

Ich habe dieses Bild:

Die Pfeile zeigen zwei verschiedene Farben, aber tatsächlich sollten sie dieselbe Farbe haben, aber etwas heller oder dunkler.

Ich habe diesen Screenshot der Anwendung gemacht, die ich mache, und die bräunliche Farbe an den Rändern ist nur die blaue Farbe, die mit 30 summiert wird. Wie Sie sehen, reicht dies nicht aus, dh das Hinzufügen von 30 zur tatsächlichen Farbe funktioniert nicht für alle Farben.

Wie kann ich eine bestimmte Farbe schattieren, dh sie heller oder dunkler machen?

Was soll ich auch tun, wenn es mit Alpha halbtransparent aussehen soll?

Coole Frage.

Um mit hexadezimalen Werten arbeiten zu können, müssen Sie den relativen Anteil der RGB-Werte berücksichtigen.

Ich werde eine Skala in Zahlen verwenden, nicht mit Buchstaben, damit wir die Mathematik dahinter sehen können.

Stellen Sie sich vor, Sie haben eine Orange.

Sie können einen Wert von R255 G128 B0 haben

Wenn Sie eine dunklere Farbe wünschen, müssen Sie die Werte beispielsweise auf 50% reduzieren.

Dadurch erhalten Sie R128 G64 B0. Beachten Sie, dass alle Farben mit einer proportionalen Skala geändert wurden.

Eine komplexere Farbe könnte R255 G200 B100 sein. Lassen Sie uns sie abdunkeln, aber nicht so stark wie im vorherigen Fall. Lassen Sie es uns nur um 80% abdunkeln.

R255x0,8 G200x0,8 B100x0,8 = R204 G160 B80

Um eine Farbe heller zu machen, ist die Idee ziemlich gleich, aber es ist schwieriger, weil die Farben auf 255 begrenzt werden, sodass Sie über den Unterschied zwischen 255 und Ihren Werten nachdenken können.

Zum Beispiel die gleiche Orange

R255 G128 B0

Sie können R nicht mehr erhöhen, und Sie können das Grün und das Blau nicht mit denselben Werten erhöhen, zum Beispiel 100 weitere, weil Sie haben werden

R255 G228 B100

das ist zu gelb.

Die Mathematik wäre

1) Die Differenz von 255 zum aktuellen Wert (R255 G128 B0) beträgt: R0 G127 B255

2) Lassen Sie uns eine hellere Orange um 50% machen

3) Rx50% Gx50% Bx50% = R0 G64 B128

4) Addieren Sie dies zu Ihrem Anfangswert: R255 + 0 G128 + 64 B0 + 128 = R255 G192 B128.

Ich füge ein Bild hinzu, um Ihnen die Grundidee zu geben. Die RGB-Werte sind nicht die gleichen wie in meinem Text, nur weil es eine faule Arbeit ist, aber Sie können sehen, dass die orangefarbenen "Treppen" ihre eigentlichen Proportionen behalten.

Bearbeitet

Ich bin so dumm Sie können auch die HSL-Farbnotation verwenden:

{Hintergrundfarbe: hsl (45, 60%, 70%);} und modifiziere die dritte Farbe für dunklere Farben und die zweite und dritte für hellere.

Sie können auch eine hsla-Variante verwenden, um Alpha einzuschließen.

Sie haben die Dinge ein wenig missverstanden, JavaScript modelliert Farbe nicht als hexadezimal, das System auch nicht. Die hexadezimale Notation gilt nur für das vom Menschen lesbare Dokument. Intern speichert Ihr System drei ganzzahlige Werte. Sie können diese direkt abfragen und bearbeiten.

Angenommen, Sie möchten das eigentliche Dokument anstelle von Systeminternalen bearbeiten. Dann ist es am besten, Ihre Berechnung auf eine Bibliothek zu verschieben, die dies für Sie erledigt. Sie sehen, dass der Browser Farben auf viele Arten darstellen kann, sodass Sie alle Arten von Fällen wie Ad-RGB- und HSV-Eingaben programmieren müssen. Daher schlage ich vor, dass Sie etwas wie Color.js verwenden , das Ihnen viel Kopfschmerzen erspart, da Sie das Mischen, Abdunkeln, Aufhellen usw. nicht selbst implementieren müssen.

Edity:

Falls Sie dies selbst tun möchten, was ich nicht empfehle. Beginnen Sie damit, die Hexarepräsentation in numerische Tripletts von ganzen Zahlen oder Gleitkommazahlen im Bereich von 0 bis 1 umzuwandeln. Dies erleichtert die Berechnung.

Für eine einfache Manipulation der Farbkonvertierung von RGB-Werten in HSL oder HSB sind Helligkeitsberechnungen daher trivial (Wikipedia hat Formulierungen). Addieren oder subtrahieren Sie also einfach Helligkeit oder Helligkeit. Für eine echte Lichtsimulation ist die Berechnung einfach genug, multiplizieren Sie einfach die Lichtfarbe mit der Grundfarbe. Für neutrales Licht ist es einfach:

Ergebnis = Intensität * Farbe

Wie Rafael erklärte, wiederholte sich die Formel nach Farbkanal. Sie können farbiges Licht simulieren, indem Sie dies tun

Ergebnis = Intensität * LigtColor * Farbe

Damit dies am besten zuerst in Float konvertiert werden kann, möglicherweise auch linear. Dies ermöglicht warmes oder kaltes Licht in Ihrer Umgebung, das ein natürlicheres Gefühl hervorrufen kann.

Alpha-Blending (Farbschicht übereinander) ist einfach

Ergebnis = ColorTop * alpha + ColorBottom * (1-alpha)

Endgültige Bearbeitung

Schließlich ist hier ein Code, der etwas für das tut, was Sie fragen. Der Grund, warum dies schwer zu erkennen ist, ist, dass es momentan eine Art abstrakte Form hat. Live-Code hier verfügbar

Bild 1 : Ergebnis des Codes unten siehe auch Live-Version .

{
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    var Color = function(r, g, b) {
      this.r = r;
      this.g = g;
      this.b = b;
    }
    Color.prototype.asHex = function() {
      return "#" + ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1);
    }
    Color.prototype.asRGB = function() {
      return 'rgb(' + this.r + ',' + this.g + ',' + this.b + ')';
    }
    Color.prototype.blendWith = function(col, a) {
      r = Math.round(col.r * (1 - a) + this.r * a);
      g = Math.round(col.g * (1 - a) + this.g * a);
      b = Math.round(col.b * (1 - a) + this.b * a);
      return new Color(r, g, b);
    }
    Color.prototype.Mul = function(col, a) {
      r = Math.round(col.r/255 * this.r * a);
      g = Math.round(col.g/255 * this.g * a);
      b = Math.round(col.b/255 * this.b * a);
      return new Color(r, g, b);
    }
    Color.prototype.fromHex = function(hex) {
      // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
      hex = hex.substring(1,7)
      var bigint = parseInt(hex, 16);
      this.r = (bigint >> 16) & 255;
      this.g = (bigint >> 8) & 255;
      this.b = bigint & 255;
    }

    ctx.font = "16px Arial";
    ctx.fillText("Manual Alpha Blend", 18, 20);

    var a = new Color(220, 0, 150);

    var b = new Color();
    b.fromHex('#00C864');

    //Alpha blend
    ctx.fillStyle = a.asHex();
    ctx.fillRect(25, 25, 100, 100);
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(a.asHex(), 30, 45);
    ctx.fillStyle = b.asRGB()
    ctx.fillRect(50, 50, 100, 100);
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(a.asHex(), 55, 145);
    var bl = a.blendWith(b, 0.3);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(50, 50, 75, 75);
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(bl.asHex(), 55, 70);

    // lighten 1

    ctx.fillStyle = '#000000';
    ctx.fillText('Neutral Light', 200, 20);

    var c = new Color(100, 100, 100);
    var purelight= new Color(255, 255, 255);

    ctx.fillStyle = c.asRGB();
    ctx.fillRect(200, 25, 100, 100);

    var bl = c.Mul(purelight,1.2);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(225, 50, 100, 100);

    var bl = c.Mul(purelight, 0.8);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(250, 75, 100, 100);

     // lighten 2

    ctx.fillStyle = '#000000';
    ctx.fillText('Yellowish Light', 400, 20);

    var c = new Color(100, 100, 100);
    var yellowlight= new Color(255, 255, 220);

    var bl = c.Mul(yellowlight,1.0);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(400, 25, 100, 100);

    var bl = c.Mul(yellowlight,1.2);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(425, 50, 100, 100);

    var bl = c.Mul(yellowlight, 0.8);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(450, 75, 100, 100);
  }
}

PS Sie sollten nach Stackoverflow fragen, da das meiste davon tatsächlich bereits in Stackoverfow zu finden ist.

Manuell, wenn Sie die Dunkelheit / Helligkeit einer Farbe von Hand ändern möchten, ohne sie auch nur anzusehen. in hex oder rgb ist es wirklich einfach , jedem kanal eine gleiche lichtmenge hinzuzufügen oder zu entfernen.
Angenommen, Sie haben in rgb 132.145.167 yo können 30 zu jeder Zahl hinzufügen, um eine hellere Version derselben Farbe zu erhalten, also 162.175.207, und wenn Sie feststellen, dass Sie es nur ein bisschen übertrieben haben, dann subtrahieren Sie 2 von jeder so 160.173.205. Gleiches mit Hex, aber in Hex-Zahlen. e4c3d5 ist also e4 c3 d5. Sie können 16 hinzufügen, um es heller zu machen. f4d3e5 oder 16 subtrahieren, um eine dunklere Version derselben Farbe d4b3c5 zu erhalten.
Sie können so viel addieren oder subtrahieren, wie Sie möchten, und Sie können besser den richtigen Betrag erraten, um Überstunden zu addieren und zu subtrahieren. Solange Sie allen drei Kanälen (allen drei Zahlen) den gleichen Betrag hinzufügen, ändern Sie nur das Wie viel Weiß fügen Sie der Mischung hinzu oder entfernen sie.