🤦🏿 🎈 🍎 Vergessen Sie RGB und HEX 👏🏾 👨🏻‍⚕️ 🚐

Es gibt verschiedene Möglichkeiten, Farben in CSS darzustellen. Eines davon ist das HSL-System. In diesem Artikel werde ich Ihnen zeigen, welche Möglichkeiten sich für einen Layout-Designer ergeben.

Was ist HSL?

Der Name des HSL-Formats leitet sich aus einer Kombination der ersten Buchstaben Farbton (Farbton), Sättigung (Sättigung) und Helligkeit (Helligkeit oder Helligkeit) ab.

Der Farbton ist der Farbwert im Farbkreis und wird in Grad eingestellt. 0 ° entspricht Rot, 120 ° Grün und 240 ° Blau. Der Wert des Farbtons kann von 0 bis 359 variieren. Die

Sättigung ist die Farbintensität, gemessen in Prozent von 0% bis 100%. Legt fest, wie weit die Farbe von Grau mit derselben Helligkeit entfernt ist.

Die Helligkeit gibt an , wie hell die Farbe ist, und wird als Prozentsatz von 0% bis 100% angegeben. Kleine Werte machen die Farbe dunkler und hohe Werte heller, extreme Werte 0% und 100% entsprechen Schwarzweiß.

HSL-Vorteile ()

Der Hauptvorteil von HSL ist die Möglichkeit, Farbeigenschaften unabhängig voneinander festzulegen . Dies eröffnet Ihnen große Chancen. Sie können die Farbe leicht heller, dunkler, gesättigter oder verfärben. Und unter Beibehaltung des Schattens. Oder umgekehrt - ändern Sie die Farben, ohne ihre Sättigung oder Helligkeit zu ändern. Oft werden Präprozessoren verwendet, um diese Funktionen zu verwenden, aber Sie können auch darauf verzichten.

Einige Beispiele

Abgeleitete Farben des gleichen Farbtons

Eine der häufigsten Aufgaben: eine Komponente herzustellen, die einen einzigen Grundton annimmt, aber aus mehreren Variationen besteht. In meinem Beispiel ist dies eine typische Warnung, bei der die Farbe von Text, Hintergrund und Strich den gleichen Farbton und die gleiche Sättigung, aber unterschiedliche Helligkeit aufweist:

.success {  
  border-color:     hsl(120, 50%, 40%);
  color:            hsl(120, 50%, 20%);
  background-color: hsl(120, 50%, 90%);
}

Sehen Sie, wie schön und klar? Es ist sofort klar, dass dies eine „Familie“ von Blumen ist. In anderen Formaten würde es ungefähr so aussehen:

/* rgb */
.alert {
  border-color:     rgb(51, 153, 51);
  color:            rgb(25, 77, 25);
  background-color: rgb(217, 242, 217);
}

/* hex */
.alert {
  border-color:     #339933;
  color:            #194d19;
  background-color: #d9f2d9;
}

Ich weiß nichts über dich, aber es fällt mir schwer, mir einen solchen Code anzusehen, um zu sagen, ob diese Farben irgendwie miteinander verbunden sind oder nicht.

Aber das sind Kleinigkeiten. Bei Verwendung der benutzerdefinierten CSS-Eigenschaften wird die wahre Leistung angezeigt.

Wie sie sagen, pass auf deine Hände auf. Wenn wir eine Komponente der Farbe erstellen, z. B. einen Farbton oder eine Variable, können wir leicht eine unendliche Anzahl von Variationen unserer Komponente erstellen, indem wir nur den Grundfarbton darin ändern. Und alle Derivate werden davon abgestoßen.

.alert {
  border-color:     hsl(var(--hue), 50%, 40%);
  color:            hsl(var(--hue), 50%, 20%);
  background-color: hsl(var(--hue), 50%, 90%);
}

Bleichen

In diesem Beispiel hat die Aus-Taste eine reduzierte Sättigung. Es hat immer noch eine subtile Blautönung, ist aber fast grau. Und wenn Sie den Mauszeiger bewegen, behält der Knopf Farbton und Sättigung bei, aber es wird dunkler.

Um dieses Problem zu lösen, reicht es aus, nur einen der drei Parameter zu ändern, um eine abgeleitete, aber ähnliche Farbe zu erhalten. Was bei Verwendung von RGB oder Hex nicht so einfach ist.

Wie im ersten Beispiel können Sie den Farbton leicht ändern, ohne alle anderen Farbeigenschaften Ihrer Komponente zu beeinflussen.

Farbvererbung

Eine der coolsten Techniken: Erstellen eines Farbtons ausgehend von einem anderen. Dies wird durch einfaches Hinzufügen in calc () erreicht.

:root{
  --hue: 120;
}

header {
  background-color: hsl(var(--hue), 30%, 20%)
}

header button {
  background-color: hsl(calc(var(--hue) + 130), 80%, 50%)
}

In diesem Beispiel hängt der Farbton der Schaltfläche (+ 130 ° im Farbkreis) vom Farbton des Containers ab.

Auf einfache Weise können Sie vollwertige, flexible Farbpaletten für Ihre Websites erstellen, indem Sie nur einen Grundton festlegen und von diesem ausgehen.

Alle Ihre Komponenten behalten ihre Sättigung und Helligkeit bei, wie in den vorherigen Beispielen gezeigt.

Zukunft

In der Spezifikation des CSS-Farbmoduls Stufe 4 wurden neue Funktionen beschrieben: lab () und lch () zum Angeben von Farben in den gleichnamigen Formaten. LCH hat die gleiche Flexibilität wie hsl, bringt jedoch eine Reihe von Verbesserungen mit Blick auf moderne Geräte. Weitere Informationen hierzu finden Sie im Artikel „ LCH-Farben in CSS: Was, warum und wie? ".

Gesamt

Meiner Meinung nach hat das hsl-Format im Vergleich zu Alternativen eine fantastische Flexibilität. In Kombination mit Variablen bieten Sie praktisch alle Möglichkeiten für die Arbeit mit Farben, von Präprozessoren bis hin zu nativem CSS.

PS Entschuldigung für den lauten Titel :)

Vergessen Sie RGB und HEX