Verwenden Sie JavaScript, um die Sättigung und Helligkeit von RGB -Farben anzupassen

Vor kurzem habe ich Farbdesignprinzipien erkundet und mich von Adam Wathan und Steve Schrogers Arbeit inspirieren lassen. Ihr Rat unterstreicht die Notwendigkeit einer umfassenden Farbpalette, die über einige ästhetisch ansprechende Hex -Codes hinausgeht. Der Aufbau von robusten Anwendungen erfordert eine breitere Reichweite, die zahlreiche Grautöne und mehrere Primärfarben umfasst, die jeweils unterschiedliche Helligkeit und Sättigung haben.

Mein Entwicklungsworkflow umfasst häufig Hex -Codes oder RGB -Farben, aber die manuelle Einstellung von Leichtigkeit und Sättigung erweist sich umständlich. Um diesen Prozess zu optimieren und sich wiederholende Dehnungsverletzungen durch konstante Farbwähleranpassungen zu vermeiden, lassen Sie uns einen Code erkunden, um die Farben effizient zu manipulieren.

Nutzung von HSL -Werten

HSL (Farbton, Sättigung, Leichtigkeit) bietet eine überlegene Methode zum Definieren von Webfarben, insbesondere wenn manuelle Farbanpassungen erwartet. HSL repräsentiert Hue als Zahl (0-360), Sättigung und Leichtigkeit als Prozentsätze. Zum Beispiel:

 div {
  Hintergrundfarbe: HSL (155, 30%, 80%);
}

Dies erzeugt ein leichtes, gedämpftes Minzgrün. Um dunklen Text hinzuzufügen und die Konsistenz aufrechtzuerhalten, können wir die Leichtigkeit anpassen:

 div {
  Hintergrundfarbe: HSL (155, 30%, 80%);
  Farbe: HSL (155, 30%, 5%);
}

Dies schafft einen dunklen Text, der mit dem Hintergrund harmoniert. Für einen Call-to-Action-Taste können wir die Sättigung und eine geringfügig niedrigere Leichtigkeit erhöhen:

 .Call-to-action {
  Hintergrundfarbe: HSL (155, 80%, 60%);
  Farbe: HSL (155, 30%, 5%);
}

Weniger wichtiger Text könnte durch Reduzierung der Sättigung und zunehmender Helligkeit weiter beeinträchtigt werden:

 div {
  Hintergrundfarbe: HSL (155, 30%, 80%);
  Farbe: HSL (155, 30%, 5%);
}

.lesssimportant {
  Farbe: HSL (155, 15%, 40%);
}

HSLs Browserkompatibilität und deklarative Natur machen es RGB vorzuziehen. Bestehende RGB -Projekte oder Legacy -Browser -Unterstützungsbedenken könnten jedoch alternative Ansätze erfordern.

Verwendung von Farbbibliotheken

Zahlreiche Farbmanipulationsbibliotheken vereinfachen HSL-to-RGB/HEX-Conversions und bieten eine erweiterte Farbschemasgenerierung. Einige bemerkenswerte Beispiele sind:

• Colvertize (Philipp Mildenberger): Leichte Bibliothek mit Umwandlung und Manipulationsfunktionen.
• Farbe (Josh Junon): Fluent -Schnittstelle zur Farbdeklaration, Verarbeitung und Extraktion.
• TinyColor (Brian Grinstead): Verarbeitet verschiedene Eingangstypen und bietet Dienstprogramme für die Schema.

CSS-Tricks bietet auch eine wertvolle Ressource für Farbformatkonvertierungen.

Das Farbgitterwerkzeug

Betrachten Sie für einen interaktiveren Ansatz das Farbgitterwerkzeug. Wie die Refactoring -UI hervorhebt, garantiert die mathematische Präzision allein keine optimalen Farbpaletten. Das Farbgitter, eine Reaktionsanwendung, die ich entwickelt habe, erzeugt eine Palette, die auf einem ausgewählten Farbton basiert und 100 Variationen in Sättigung und Leichtigkeit bietet. Benutzer können HEX -Codes oder CSS -benutzerdefinierte Eigenschaften direkt über die Schnittstelle kopieren.

RGB -Farbmanipulationstechniken

Die folgenden Techniken konzentrieren sich auf die RGB -Farbverarbeitung.

Bestimmung der RGB -Leichtigkeit

Hinweis: Diese Methode berücksichtigt nicht die inhärente Helligkeit eines Farbton (z. B. die höhere wahrgenommene Helligkeit von Yellow als lila). Es misst die Menge an schwarz oder weiß gemischtem. Die visuelle Bewertung bleibt für eine genaue Beurteilung der Leichtigkeit von entscheidender Bedeutung.

Die Leichtigkeit wird berechnet, indem die höchsten und niedrigsten RGB -Werte gemittelt und dann durch 255 geteilt werden:

 Funktion getLightnessofrgb (rgbstring) {
  const rgBintArray = (rgbstring.replace ( / / g, '') .lice (4, -1) .Split (','). MAP (e => parseInt (e)));
  const höchst = math.max (... rgbintArray);
  const niedrigst = math.min (... rgbintArray);
  Return (am höchsten am niedrigsten) / 2 /255;
}

RGB sättigen, ohne Leichtigkeit oder Farbton zu beeinflussen

Das Sättigung von RGB stellt Herausforderungen dar: Grautönen fehlen Farbtoninformationen, und das Erreichen reine Farbtöne erfordert 50% Leichtigkeit. Dieses Beispiel behält die Leichtigkeit bei:

Erhöhen Sie den Unterschied zwischen den niedrigsten und höchsten RGB -Werten. Die Aufrechterhaltung der Leichtigkeit erfordert gleiche Erhöhungen/Abnahmen der höchsten und niedrigsten Werte, die durch 0-255 Grenzen eingeschränkt werden. Der verfügbare Sättigungsbereich wird bestimmt:

• Der Unterschied zwischen einem Grau (gleiche Leichtigkeit) und 255.
• Der Unterschied zwischen einem Grau (gleiche Leichtigkeit) und 0.

 // ... (GetLightnessFrgb -Funktion von oben) ...

const Grayval = GetLightnessofrgb ('RGB (205, 228, 219)') * 255; // 217
const sättigungRange = math.round (math.min (255 - Grayval, Grayval)); // 38

// ... (Rest der Sättigungsberechnung) ...

Die Einstellung des mittleren Werts ist proportional zu den Änderungen der höchsten und niedrigsten Werte. Die vollständige Sättigungsfunktion ist ziemlich involviert und für die Kürze weggelassen, aber die Kernkonzepte werden vorgestellt.

Versteuerung von RGB -Farben

Die Entsättigung kehrt den Sättigungsprozess um und bewegt sich in Richtung eines grauen Wertes. Eine vollständige Entsättigung führt zu einem Grau mit gleichen RGB -Werten. Eine partielle Entsättigung beinhaltet proportional die Differenz zwischen den höchsten und niedrigsten RGB -Werten. Die vollständige Entsättigungsfunktion wird auch für die Kürze weggelassen.

Aufhellen und Verdunkelung von RGB gleich

Das Aufhellen beinhaltet proportional erhöhte RGB -Werte in Richtung 255, während die Verdunkelung proportional in Richtung 0 verringert. Beide Prozesse reduzieren die Sättigung allmählich. Die vollständigen Funktionen für das Aufhellen und Verdunkelung werden für die Kürze weggelassen.

Diese Funktionen bilden eine Grundlage für die Manipulation von RGB -Farben. HSL, Farbbibliotheken und das Farbnetzwerkzeug bieten jedoch je nach Ihren Anforderungen und Projektbeschränkungen alternative, potenziell effizientere Lösungen.

Das obige ist der detaillierte Inhalt vonVerwenden Sie JavaScript, um die Sättigung und Helligkeit von RGB -Farben anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!