Mit JavaScript Sättigung und Helligkeit von RGB-Farben anpassen

In letzter Zeit habe ich mich mit dem Thema Design mit Farbe beschäftigt (oder "colour", wie wir es bei mir in Neuseeland schreiben). Wenn man sich die Ratschläge von Adam Wathan und Steve Schroger zu diesem Thema ansieht, stellt man fest, dass wir für den Aufbau einer Anwendung mehr als nur fünf ansehnliche Hex-Codes von einem Farbpastellengenerator benötigen. Wir brauchen viele Grautöne und einige Primärfarben. Aus diesen Primärfarben wollen wir eine Vielzahl von Helligkeits- und Sättigungsstufen.

Ich habe hauptsächlich Hex-Codes oder RGB-Farben bei der Anwendungsentwicklung verwendet und festgestellt, dass ich langsamer werde, wenn ich versuche, verschiedene Helligkeits- und Sättigungsstufen aus einem einzigen Farbton zu ermitteln. Um Ihnen also RSI durch vorsichtiges Bewegen des Farbauswahlwerkzeugs in VS Code oder ständiges Öffnen von hexcolortool zu ersparen, werfen wir einen Blick auf einige Codes, die Ihnen bei der Manipulation dieser Farben helfen.

HSL-Werte

Eine effektive Methode, Webfarben zu schreiben, ist die Verwendung von HSL-Werten, besonders wenn Sie die Farben manuell ändern möchten. HSL steht für Farbton (Hue), Sättigung (Saturation), Helligkeit (Lightness). Mit HSL können Sie Ihren Farbton als Zahl von 0 bis 360 deklarieren. Dann können Sie eine Prozentzahl für Sättigung und Helligkeit angeben. Zum Beispiel:

div {
  background-color: hsl(155, 30%, 80%);
}

Dies ergibt eine helle, gedämpfte Minzgrünfarbe. Was ist, wenn wir dunklen Text über diesem div werfen müssten? Wir könnten eine Farbe nahe Schwarz verwenden, die aber zum Hintergrund passt. Zum Beispiel können wir dieselben HSL-Werte verwenden und die Helligkeit auf 5% reduzieren:

div {
  background-color: hsl(155, 30%, 80%);
  color: hsl(155, 30%, 5%);
}

Schön. Jetzt haben wir Text, der sehr nah an Schwarz ist, aber natürlicher aussieht und an seinen Hintergrund gebunden ist. Aber was, wenn dies kein Absatz war, sondern ein Call-to-Action-Button? Wir können mehr Aufmerksamkeit erregen, indem wir die Sättigung erhöhen und die Helligkeit des Hintergrunds etwas reduzieren.

.call-to-action {
  background-color: hsl(155, 80%, 60%);
  color: hsl(155, 30%, 5%);
}

Oder was ist, wenn es unwichtigeren Text gäbe? Wir könnten die Helligkeit des Textes wieder erhöhen und die Sättigung verringern. Dies nimmt etwas Kontrast weg und lässt diesen weniger wichtigen Text etwas mehr in den Hintergrund treten. Dennoch müssen wir vorsichtig sein, um genügend Kontrast für Barrierefreiheit und Lesbarkeit zu gewährleisten, also lassen Sie uns den Hintergrund wieder aufhellen.

div {
  background-color: hsl(155, 30%, 80%);
  color: hsl(155, 30%, 5%);
}

.lessimportant {
  color: hsl(155, 15%, 40%);
}

HSL-Werte werden in allen gängigen Browsern unterstützt und sind eine überlegene Methode zur Definition von Farben im Vergleich zu RGB. Das liegt daran, dass sie es Ihnen ermöglichen, mit Farbton, Sättigung und Helligkeit einer Farbe deklariativer umzugehen.

Aber was ist, wenn Sie sich bereits für die Verwendung von RGB-Werten entschieden haben? Oder Sie erhalten eine E-Mail von Ihrem Chef, die fragt: "Wird das unter IE 8 funktionieren?"

Bibliotheken

Es gibt viele großartige Farbbe bibliotheken, die HSL-Werte wieder in Hex-Codes oder RGB-Farben umwandeln können. Die meisten von ihnen verfügen auch über verschiedene Manipulationsfunktionen, um bei der Erstellung eines Farbschemas zu helfen.

Hier ist eine Liste einiger Bibliotheken, die ich kenne

• Wenn die Konvertierung zwischen Formaten ein Problem darstellt, versuchen Sie colvertize von Philipp Mildenberger. Es ist eine leichtgewichtige Bibliothek, die viele Konvertierungsmethoden und einige Manipulationsmethoden bietet.
• Dann gibt es color, gepflegt von Josh Junon. Dies ermöglicht Ihnen, Farben mit einer flüssigen Schnittstelle zu deklarieren, zu verarbeiten und zu extrahieren. Es bietet eine Vielzahl von Konvertierungs- und Manipulationsmethoden.
• Eine weitere ist TinyColor von Brian Grinstead von Mozilla, die eine ganze Menge von Eingabetypen sowie Hilfsfunktionen verarbeiten kann. Sie bietet auch einige Funktionen zur Generierung von Farbschemata.

Hier ist auch ein großartiger CSS-Tricks-Artikel zur Konvertierung von Farbformaten.

Farb-Raster-Werkzeug

Eine andere Option ist, dass Sie ein von mir erstelltes Farbwerkzeug namens Colour Grid ausprobieren können. Um Refactoring UI zu zitieren: "So verlockend es auch ist, Sie können sich nicht allein auf die Mathematik verlassen, um die perfekte Farbpalette zu erstellen."

Natürlich habe ich nach dem Lesen dieses Artikels eine React-App gebaut, um mathematisch eine Farbpalette zu erstellen. Okay, sie wird nicht alle Ihre Probleme lösen, aber sie könnte Ihnen einige Optionen für den Anfang bieten. Die App erstellt 100 verschiedene Sättigungs- und Helligkeitsstufen basierend auf dem von Ihnen ausgewählten Farbton. Sie können entweder auf ein Rasterelement klicken, um den Hex-Code zu kopieren, oder eine Farbe als CSS-Benutzerdefinierte Eigenschaft aus einem Textbereich am Ende kopieren. Dies könnte etwas sein, das Sie ausprobieren können, wenn Sie eine schnelle Möglichkeit benötigen, Variationen von einem oder zwei Farbtönen zu erhalten.

Hier sind einige Techniken, die ich zum Verarbeiten von RGB-Farben gelernt habe, falls Sie RGB-Farben verwenden und eine Möglichkeit zur Transformation benötigen.

So finden Sie die Helligkeit einer RGB-Farbe

Haftungsausschluss: Diese Technik berücksichtigt nicht den intrinsischen Wert eines Farbtons. Der intrinsische Wert eines Farbtons ist seine angeborene Helligkeit, bevor Sie begonnen haben, Schwarz oder Weiß hinzuzufügen. Dies wird durch die Tatsache veranschaulicht, dass reines Gelb für uns viel heller aussieht als ein reines Lila.

Diese Technik erzeugt den Helligkeitsgrad basierend auf einem programmatischen Maß dafür, wie viel Weiß oder Schwarz beigemischt ist. Die wahrgenommene Helligkeit wird von mehr als diesem Maß beeinflusst, daher denken Sie daran, auch Ihre Augen zu benutzen, um den benötigten Lichtgrad zu beurteilen.

Der Helligkeitsgrad einer RGB-Farbe kann ermittelt werden, indem der Durchschnitt des höchsten und niedrigsten RGB-Wertes gebildet und dieser dann durch 255 geteilt wird (die mittlere Farbe beeinflusst die Helligkeit nicht).

Dies ergibt eine Dezimalzahl zwischen Null und Eins, die die Helligkeit darstellt. Hier ist eine JavaScript-Funktion dafür:

function getLightnessOfRGB(rgbString) {
  // First convert to an array of integers by removing the whitespace, taking the 3rd char to the 2nd last then splitting by ','
  const rgbIntArray = (rgbString.replace(/ /g, '').slice(4, -1).split(',').map(e => parseInt(e)));


  // Get the highest and lowest out of red green and blue
  const highest = Math.max(...rgbIntArray);
  const lowest = Math.min(...rgbIntArray);


  // Return the average divided by 255
  return (highest + lowest) / 2 / 255;
}

Hier ist ein CodePen, der diese Funktion verwendet

So sättigen Sie eine RGB-Farbe, ohne Helligkeit oder Farbton zu ändern

Was können wir mit unserer neu gewonnenen Fähigkeit, die Helligkeit einer RGB-Farbe zu ermitteln, anfangen? Sie kann uns helfen, eine RGB-Farbe zu sättigen, ohne die Helligkeit zu ändern.

Das Sättigen einer RGB-Farbe birgt jedoch einige Probleme

• Im RGB-Format einer Graufarbe gibt es keine Informationen, die uns sagen, wie die gesättigte Version aussehen wird, da Grau keinen Farbton hat. Wenn wir also eine Funktion zum Sättigen einer Farbe schreiben wollen, müssen wir diesen Fall behandeln.
• Wir können nicht wirklich einen reinen Farbton erreichen, es sei denn, die Farbe hat 50 % Helligkeit – alles andere wird durch Schwarz oder Weiß verdünnt. Wir haben also die Wahl, ob wir die gleiche Helligkeit beibehalten wollen, während wir die Farbe sättigen, oder die Farbe auf 50 % Helligkeit bewegen, um die lebendigste Version zu erhalten. Für dieses Beispiel behalten wir die gleiche Helligkeitsstufe bei.

Beginnen wir mit der Farbe rgb(205, 228, 219) – einem hellen, gedämpften Cyan. Um eine Farbe zu sättigen, müssen wir den Unterschied zwischen dem niedrigsten und dem höchsten RGB-Wert erhöhen. Dies wird sie in Richtung eines reinen Farbtons bewegen.

Wenn wir die Helligkeit beibehalten wollen, müssen wir den höchsten Wert erhöhen und den niedrigsten Wert um den gleichen Betrag verringern. Da die RGB-Werte jedoch auf 0 bis 255 begrenzt sein müssen, sind unsere Sättigungsoptionen bei helleren oder dunkleren Farben begrenzt. Das bedeutet, dass es einen Sättigungsbereich gibt, den wir für jede gegebene Helligkeit zur Verfügung haben.

Lassen Sie uns den für unsere Farbe verfügbaren Sättigungsbereich ermitteln. Wir können ihn ermitteln, indem wir den niedrigsten dieser beiden Werte finden.

• Der Unterschied zwischen den RGB-Werten eines Graus mit der gleichen Helligkeit wie unsere Farbe und 255
• Der Unterschied zwischen den RGB-Werten eines Graus mit der gleichen Helligkeit wie unsere Farbe und 0 (was der Grauwert selbst ist)

Um eine vollständig graue Version einer Farbe zu erhalten, können wir das Endergebnis der Funktion getLightnessOfRGB aus dem vorherigen Abschnitt nehmen und es mit 255 multiplizieren. Dann verwenden wir diese Zahl für alle drei unserer RGB-Werte, um ein Grau zu erhalten, das die gleiche Helligkeit wie unsere ursprüngliche Farbe hat.

Machen wir das jetzt

// Using the previous "getLightnessOfRGB" function
const grayVal = getLightnessOfRGB('rgb(205, 228, 219)')*255; // 217
// So a gray version of our color would look like rgb(217,217,217);
// Now let's get the saturation range available:
const saturationRange =  Math.round(Math.min(255-grayVal,grayVal)); // 38

Nehmen wir an, wir wollen die Farbe um 50 % sättigen. Dazu wollen wir den höchsten RGB-Wert erhöhen und den niedrigsten um 50 % des Sättigungsbereichs verringern. Dies kann uns jedoch über 255 oder unter Null bringen, daher müssen wir die Änderung durch das Minimum dieser beiden Werte begrenzen.

• Der Unterschied zwischen dem höchsten RGB-Wert und 255
• Der Unterschied zwischen dem niedrigsten RGB-Wert und 0 (was der Wert selbst ist)

// Get the maximum change by getting the minimum out of: 
// (255 - the highest value) OR (the lowest value)
const maxChange = Math.min(255-228, 205); // 27


// Now we will be changing our values by the lowest out of:
// (the saturation range * the increase fraction) OR (the maximum change)
const changeAmount = Math.min(saturationRange/0.5, maxChange) // 19

Das bedeutet, wir müssen 19 zum höchsten RGB-Wert (Grün) addieren und 19 vom niedrigsten RGB-Wert abziehen.

const redResult = 205 - 19; // 186
const greenResult= 228 + 19; // 247

Was ist mit dem dritten Wert?

Hier wird es etwas komplizierter. Der Abstand des mittleren Wertes zum Grau kann über das Verhältnis zwischen ihm und dem Abstand des jeweils anderen Wertes zum Grau ermittelt werden.

Wenn wir die höchsten und niedrigsten Werte weiter vom Grau wegbewegen, erhöht sich/verringert sich der mittlere Wert proportional zu ihnen.

Holen wir uns nun den Unterschied zwischen dem höchsten Wert und vollem Grau. Dann den Unterschied zwischen dem mittleren Wert und vollem Grau. Dann erhalten wir das Verhältnis zwischen diesen. Ich werde auch die Rundung bei der Ermittlung des Grauwerts entfernen, um dies genauer zu machen.

const grayVal = getLightnessOfRGB('rgb(205, 228, 219)')*255;
const highDiff = grayVal - 228; // -11 subtracting green - the highest value
const midDiff = grayVal - 219; // -2 subtracting blue - the middle value
const middleValueRatio = midDiff / highDiff; // 0.21739130434782608

Dann müssen wir den Unterschied zwischen unserem neuen RGB-Grünwert (nachdem wir 19 dazu addiert haben) und dem Grauwert ermitteln und diesen mit unserem Verhältnis multiplizieren. Dies addieren wir wieder zum Grauwert hinzu, und das ist unser Ergebnis für unser neu gesättigtes Blau.

// 247 is the green value after we applied the saturation transformation
const newBlue = Math.round(grayVal+(247-grayVal)*middleValueRatio); // 223

Nachdem wir unsere Transformationen angewendet haben, erhalten wir eine RGB-Farbe von rgb(186, 247, 223 – eine lebendigere Version der Farbe, mit der wir begonnen haben. Aber sie hat ihre Helligkeit und ihren Farbton beibehalten.

Hier sind ein paar JavaScript-Funktionen, die zusammenarbeiten, um eine Farbe um 10 % zu sättigen. Die zweite Funktion hier gibt ein Array von Objekten zurück, die die RGB-Werte in aufsteigender Reihenfolge darstellen. Diese zweite Funktion wird in allen weiteren Funktionen in diesem Artikel verwendet.

Wenn Sie ihr ein Grau geben, gibt sie einfach die gleiche Farbe zurück.

function saturateByTenth(rgb) {
  const rgbIntArray = (rgb.replace(/ /g, '').slice(4, -1).split(',').map(e => parseInt(e)));
  const grayVal = getLightnessOfRGB(rgb)*255;
  const [lowest,middle,highest] = getLowestMiddleHighest(rgbIntArray);


  if(lowest.val===highest.val){return rgb;}
  
  const saturationRange =  Math.round(Math.min(255-grayVal,grayVal));
  const maxChange = Math.min((255-highest.val),lowest.val);
  const changeAmount = Math.min(saturationRange/10, maxChange);
  const middleValueRatio =(grayVal-middle.val)/(grayVal-highest.val);
  
  const returnArray=[];
  returnArray[highest.index]= Math.round(highest.val+changeAmount);
  returnArray[lowest.index]= Math.round(lowest.val-changeAmount);
  returnArray[middle.index]= Math.round(grayVal+(returnArray[highest.index]-grayVal)*middleValueRatio);
   return (`rgb(${[returnArray].join()})`);
}


function getLowestMiddleHighest(rgbIntArray) {
  let highest = {val:-1,index:-1};
  let lowest = {val:Infinity,index:-1};


  rgbIntArray.map((val,index)=>{
    if(val>highest.val){
      highest = {val:val,index:index};
    }
    if(val<lowest.val){
      lowest = {val:val,index:index};
    }
  });


  if(lowest.index===highest.index){
    lowest.index=highest.index+1;
  }
  
  let middle = {index: (3 - highest.index - lowest.index)};
  middle.val = rgbIntArray[middle.index];
  return [lowest,middle,highest];
}

So entsättigen Sie eine RGB-Farbe

Wenn wir eine Farbe vollständig entsättigen, erhalten wir einen Grauton. RGB-Grautöne haben immer drei gleiche RGB-Werte, sodass wir einfach den grayVal aus der vorherigen Funktion verwenden könnten, um eine Graufarbe mit der gleichen Helligkeit wie jede gegebene Farbe zu erstellen.

Was ist, wenn wir nicht direkt zu Grau gehen wollen und eine Farbe nur leicht entsättigen wollen? Das können wir tun, indem wir das vorherige Beispiel umkehren.

Betrachten wir ein weiteres Beispiel. Wenn wir mit rgb(173, 31, 104) beginnen, haben wir ein gesättigtes Rouge. Nehmen wir das Dezimalmaß der Helligkeit und multiplizieren es mit 255, um die graue Version zu erhalten.

const grayVal = Math.round(getLightnessOfRGB('rgb(173, 31, 104)') * 255); // 102

Das bedeutet, dass wir, wenn wir diese Farbe vollständig zu Grau entsättigen, bei rgb(102, 102, 102) landen. Lassen Sie uns sie zu 30 % entsättigen.

Zuerst müssen wir erneut den Sättigungsbereich der Farbe ermitteln.

const saturationRange = Math.round(Math.min(255-grayVal,grayVal)); // 102

Um unsere Farbe um 30 % zu entsättigen, wollen wir die höchste und niedrigste Farbe um 30 % dieses Bereichs in Richtung volles Grau bewegen. Wir müssen jedoch auch die Änderungsmenge durch den Abstand zwischen diesen beiden Farben (der Abstand wird für die höchste und niedrigste gleich sein) und volles Grau begrenzen.

// Get the maximum change by getting the difference between the lowest (green) and the gray value
const maxChange = grayVal-31; // 71
// Now grab the value that represents 30% of our saturation range
const changeAmount = Math.min(saturationRange * 0.3, maxChange) // 30.59999

Und addieren Sie diese Änderungsmenge zum niedrigsten RGB-Wert und ziehen Sie sie vom höchsten Wert ab:

const newGreen =Math.Round(31+changeAmount); // 62
const newRed =Math.Round(173-changeAmount); // 142

Verwenden Sie dann die gleiche Verhältnis-Technik wie in der letzten Funktion, um den Wert für die dritte Farbe zu ermitteln.

const highDiff = grayVal - 173; // -71 subtracting red - the highest value
const midDiff = grayVal - 104; // -2 subtracting blue - the middle value
const middleValueRatio = midDiff / highDiff; // 0.02816901408
const newBlue = Math.Round(grayVal+(142.4-grayVal)*middleValueRatio); // 103

Das bedeutet, dass die RGB-Darstellung unseres Rouges, das um 30 % entsättigt wurde, rgb(142, 62, 103) wäre. Der Farbton und die Helligkeit sind exakt gleich, aber es ist etwas weniger lebendig.

Hier ist eine JavaScript-Funktion, die eine Farbe um 10 % entsättigt. Sie ist im Grunde eine Umkehrung der vorherigen Funktion.

function desaturateByTenth(rgb) {
  const rgbIntArray = (rgb.replace(/ /g, '').slice(4, -1).split(',').map(e => parseInt(e)));
  //grab the values in order of magnitude 
  //this uses the getLowestMiddleHighest function from the saturate section
  const [lowest,middle,highest] = getLowestMiddleHighest(rgbIntArray);
  const grayVal = getLightnessOfRGB(rgb) * 255;


  if(lowest.val===highest.val){return rgb;}
  
  const saturationRange =  Math.round(Math.min(255-grayVal,grayVal));
  const maxChange = grayVal-lowest.val;
  const changeAmount = Math.min(saturationRange/10, maxChange);
                               
  const middleValueRatio =(grayVal-middle.val)/(grayVal-highest.val);
  
  const returnArray=[];
  returnArray[highest.index]= Math.round(highest.val-changeAmount);
  returnArray[lowest.index]= Math.round(lowest.val+changeAmount);
  returnArray[middle.index]= Math.round(grayVal+(returnArray[highest.index]-grayVal)*middleValueRatio);
  return (`rgb(${[returnArray].join()})`);
}



Hier ist ein CodePen, um mit der Auswirkung dieser Sättigungsfunktionen zu experimentieren.

So hellen Sie eine RGB-Farbe auf, ohne den Farbton zu ändern

Um einen RGB-Wert aufzuhellen und den Farbton beizubehalten, müssen wir jeden RGB-Wert um den gleichen Anteil der Differenz zwischen dem Wert und 255 erhöhen. Nehmen wir an, wir haben diese Farbe: rgb(0, 153, 255). Das ist ein vollständig gesättigtes Blau/Cyan. Betrachten wir die Differenz zwischen jedem RGB-Wert und 255:

• Rot ist Null, also ist die Differenz 255.
• Grün ist 153, also ist die Differenz 102.
• Blau ist 255, also ist die Differenz Null.

Wenn wir die Farbe aufhellen, müssen wir jeden RGB-Wert um den gleichen Bruchteil unserer Differenzen erhöhen. Eine Sache, die man beachten sollte, ist, dass wir im Wesentlichen Weiß in unsere Farbe mischen. Das bedeutet, dass die Farbe beim Aufhellen langsam ihre Sättigung verliert.

Lassen Sie uns die Helligkeit dieser Farbe um ein Zehntel erhöhen. Wir beginnen mit dem niedrigsten RGB-Wert, Rot. Wir addieren ein Zehntel von 255 zu diesem Wert. Wir müssen auch Math.min verwenden, um sicherzustellen, dass der Wert nicht über 255 steigt.

const red = 0;
const newRed = Math.round( red + Math.min( 255-red, 25.5 )); // 26

Nun müssen die anderen beiden RGB-Werte um den gleichen Bruchteil der Entfernung zu 255 erhöht werden.

Um dies zu ermitteln, ermitteln wir die Differenz zwischen dem niedrigsten RGB-Wert (bevor wir ihn erhöht haben) und 255. Rot war Null, also ist unsere Differenz 255. Dann ermitteln wir die Menge, um die der niedrigste RGB-Wert bei unserer Transformation gestiegen ist. Rot ist von Null auf 26 gestiegen, also ist unsere Erhöhung 26.

Die Division der Erhöhung durch die Differenz zwischen der ursprünglichen Farbe und 255 ergibt einen Bruchteil, den wir zur Ermittlung der anderen Werte verwenden können.

const redDiff = 255 - red; // 255
const redIncrease = newRed - red; // 26
const increaseFraction = redIncrease / redDiff; // 0.10196

Nun multiplizieren wir die Differenz zwischen den anderen RGB-Werten und 255 mit diesem Bruchteil. Dies ergibt den Betrag, den wir zu jedem Wert hinzufügen müssen.

const newGreen = Math.round(153 + (255 - 153) * increaseFraction); // 163
const newBlue = Math.round(255 + (255 - 255) * increaseFraction); // 255

Das bedeutet, dass die Farbe, die wir erhalten, rgb(26, 163, 255) ist. Das ist immer noch der gleiche Farbton, aber etwas heller.

Hier ist eine Funktion, die dies tut:

function lightenByTenth(rgb) {

  const rgbIntArray = rgb.replace(/ /g, '').slice(4, -1).split(',').map(e => parseInt(e));
  // Grab the values in order of magnitude 
  // This uses the getLowestMiddleHighest function from the saturate section
  const [lowest,middle,highest]=getLowestMiddleHighest(rgbIntArray);
  
  if(lowest.val===255){
    return rgb;
  }
  
  const returnArray = [];

  // First work out increase on lower value
  returnArray[lowest.index]= Math.round(lowest.val+(Math.min(255-lowest.val,25.5)));

  // Then apply to the middle and higher values
  const increaseFraction  = (returnArray[lowest.index]-lowest.val)/ (255-lowest.val);
  returnArray[middle.index]= middle.val +(255-middle.val)*increaseFraction ;
  returnArray[highest.index]= highest.val +(255-highest.val)*increaseFraction ;
  
  // Convert the array back into an rgb string
  return (`rgb(${returnArray.join()})`);
}

So dunkeln Sie eine RGB-Farbe ab, ohne den Farbton zu ändern

Das Abdunkeln einer RGB-Farbe ist ziemlich ähnlich. Anstatt Werte zu addieren, um 255 zu erreichen, subtrahieren wir von den Werten, um uns Richtung Null zu bewegen.

Außerdem beginnen wir unsere Transformation, indem wir den höchsten Wert reduzieren und den Bruchteil dieser Reduzierung ermitteln. Diesen Bruchteil verwenden wir, um die anderen beiden Werte um ihren Abstand zu Null zu reduzieren. Dies ist eine Umkehrung dessen, was wir beim Aufhellen einer Farbe getan haben.

Das Abdunkeln einer Farbe führt ebenfalls dazu, dass sie langsam an Sättigung verliert.

function darkenByTenth(rgb) {
  
  // Our rgb to int array function again
  const rgbIntArray = rgb.replace(/ /g, '').slice(4, -1).split(',').map(e => parseInt(e));
  //grab the values in order of magnitude 
  //this uses the function from the saturate function
  const [lowest,middle,highest]=getLowestMiddleHighest(rgbIntArray);
  
  if(highest.val===0){
    return rgb;
  }

  const returnArray = [];

  returnArray[highest.index] = highest.val-(Math.min(highest.val,25.5));
  const decreaseFraction  =(highest.val-returnArray[highest.index])/ (highest.val);
  returnArray[middle.index]= middle.val -middle.val*decreaseFraction; 
  returnArray[lowest.index]= lowest.val -lowest.val*decreaseFraction;              
                            
  // Convert the array back into an rgb string
  return (`rgb(${returnArray.join()}) `);
}

Hier ist ein CodePen, um mit der Auswirkung der Helligkeitsfunktionen zu experimentieren.

---

Wenn Sie jemals mit RGB-Farben arbeiten müssen, helfen Ihnen diese Funktionen beim Einstieg. Sie können auch das HSL-Format ausprobieren, ebenso wie die Farbbebibliotheken zur Erweiterung der Browserunterstützung und das Colour Grid-Tool für Konvertierungen.