Verwenden von HSL-Farben in CSS

Aus meiner Erfahrung sind die meisten Farben, die Leute in CSS verwenden, Hex und RGB. In letzter Zeit sehe ich mehr Verwendung von HSL-Farben, aber ich denke immer noch, dass das volle Potenzial von HSL übersehen wird. Mithilfe dieses Artikels möchte ich Ihnen zeigen, wie HSL uns wirklich helfen kann, besser mit Farben in CSS zu arbeiten.

Einführung

Normalerweise verwenden wir hexadezimale Farbcodes (Hex-Farben), die in Ordnung sind, aber sie haben ein paar Probleme:

• Sie sind einschränkend;
• Sie sind schwer zu verstehen, wenn man sie liest.

Mit „begrenzt“ meine ich, dass es nicht einfach ist, die Farbe zu ändern, ohne ein Farbrad zu öffnen und selbst eine Farbe auszuwählen. Hinzu kommt, dass es nicht einfach ist, die Farbe zu erraten, wenn man sich den Hex-Code ansieht.

Betrachten Sie die folgende Abbildung:

Ich habe eine Hex-Farbe für ein Himmelblau und eine dunklere ausgewählt. Beachten Sie, dass die Hex-Farben nicht miteinander verwandt sind. Es ist schwer zu sagen, dass sie beide blau sind, aber mit unterschiedlichen Schattierungen.

In einem realen Szenario müssen Sie möglicherweise einen helleren oder dunkleren Farbton erstellen, um etwas schnell zu testen oder zu validieren. Bei Hex-Farben ist dies erst möglich, wenn Sie die Farbauswahl öffnen.

Glücklicherweise können uns HSL-Farben bei der Lösung dieses speziellen Problems helfen und eröffnen uns viele Möglichkeiten.

Was ist HSL?

HSL steht für Farbton, Sättigung und Helligkeit. Es basiert auf dem RGB-Farbrad. Jede Farbe hat einen Winkel und einen Prozentwert für die Sättigungs- und Helligkeitswerte.

Nehmen wir ein Beispiel für die himmelblaue Farbe, die wir zuvor besprochen haben. Zuerst wählen wir die Farbe aus, wie wir es normalerweise aus einem Farbwähler tun, und stellen sicher, dass wir den HSL-Wert dafür erhalten.

Hinweis : Ich verwende die Sketch-App, aber Sie verwenden ein beliebiges Designtool.

Betrachten Sie die folgende Abbildung:

Beachten Sie, dass die HSL-Werte darin enthalten sind. Der erste ist der Winkel, der den Winkel der Farbe darstellt, die wir haben. In diesem Fall ist es himmelblau. Sobald wir den Winkel haben, können wir damit beginnen, die Sättigung und Helligkeit nach unseren Bedürfnissen anzupassen.

Sättigung

Sättigung steuert, wie gesättigt die Farbe sein soll. 0% ist vollständig ungesättigt, während 100% vollständig gesättigt sind.

Leichtigkeit

Die Helligkeit steuert, wie hell oder dunkel die Farbe ist. 0% ist schwarz und 100% ist weiß.

Betrachten Sie die folgende Abbildung:

Damit haben wir drei Werte, die Farbe, Winkel, Sättigung und Helligkeit darstellen. So können wir die Farbe in CSS verwenden:

 .element { background-color: hsl(196, 73%, 62%); }

Durch Ändern des Farbwinkels können wir Farben erhalten, die in Sättigung und Helligkeit der Basisfarbe ähnlich sind. Dies ist sehr nützlich, wenn Sie an neuen Markenfarben arbeiten, da es einen konsistenten Satz sekundärer Markenfarben erstellen kann.

Betrachten Sie die folgende Abbildung:

Haben Sie das Gefühl, dass die drei Farben in Bezug darauf, wie die Farbe gesättigt ist und wie dunkel oder hell sie ist, miteinander verwandt sind? Dies wurde erreicht, indem nur der Farbwinkel geändert wurde. Das ist das Tolle an HSL-Farben. Es ist benutzerfreundlicher zu lesen und zu bearbeiten als jeder andere Farbtyp.

Anwendungsfälle für HSL-Farben

Farben beim Hover ändern

Wenn eine Farbe in einer bestimmten Komponente beim Hover dunkler erscheinen muss, können HSL-Farben dafür perfekt sein. Dies kann für Komponenten wie Schaltflächen und Karten hilfreich sein.

 :root { --primary-h: 221; --primary-s: 72%; --primary-l: 62%; } .button { background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); } .button:hover { --primary-l: 54%; }

Beachten Sie, wie ich CSS-Variablen mit HSL-Farben kombiniert habe. Beim Schweben muss ich nur den Helligkeitswert ändern. Denken Sie daran, je höher der Wert, desto leichter. Für einen dunkleren Farbton müssen wir den Wert verringern.

Eine Kombination getönter Farben

HSL kann praktisch sein, wenn wir ein Design haben, das dieselbe Farbe, aber unterschiedliche Schattierungen verwendet. Betrachten Sie das folgende Design:

Die Hauptkopfnavigation hat die Primärfarbe, während die Sekundärnavigation einen helleren Farbton hat. Mit HSL können wir den helleren Farbton leicht erhalten, indem wir den Helligkeitswert ändern.

Dies kann äußerst nützlich sein, wenn Sie eine Benutzeroberfläche mit mehreren Themen haben. Ich habe zwei Themen erstellt und beim Wechseln von einem zum anderen muss ich nur den Farbton bearbeiten.

Erstes Thema:

Zweites Thema:

Farbpaletten

Durch Ändern der Helligkeit können wir eine Reihe von Schattierungen für eine Farbe erstellen, die nach Möglichkeit in der gesamten Benutzeroberfläche verwendet werden kann.

Dies ist nützlich für Designsysteme, bei denen Designer Entwicklern die Farbtöne für jede Farbe der Marke zur Verfügung stellen.

Hier ist eine interaktive Demo, die das zeigt. Der Eingaberegler ändert nur den Farbtonwert, und die restlichen Schattierungen ändern sich basierend darauf.

Benutzerdefinierte weiße Farbe

Oft müssen wir einen Text mit weißer Farbe einfärben, um den Text hervorzuheben. Diese weiße Farbe ist langweilig und wir können sie durch einen sehr hellen Farbton der Farbe, die wir haben, ersetzen.

Betrachten Sie das folgende Beispiel:

Beachten Sie, wie das Weiß auf der rechten Seite zu viel ist. Wir können dies durch ein benutzerdefiniertes Weiß ersetzen, das von einem sehr hellen Farbton der Farbe, die wir haben, abgeleitet ist. Meiner Meinung nach ist es viel besser.

Variationen einer Schaltfläche

Ein weiterer nützlicher Anwendungsfall für HSL-Farben ist, wenn wir primäre und sekundäre Optionen haben, die von derselben Farbe, aber mit unterschiedlichen Schattierungen stammen. In diesem Beispiel hat die sekundäre Schaltfläche einen sehr leichten Farbton der Hauptfarbe. HSL-Farben sind dafür perfekt.

 :root { --primary-h: 221; --primary-s: 72%; --primary-l: 62%; } .button { background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); } .button--secondary { --primary-l: 90%; color: #222; } .button--ghost { --primary-l: 90%; background-color: transparent; border: 3px solid hsl(var(--primary-h), var(--primary-s), var(--primary-l)); }

Das Optimieren der primären Tastenvariationen war schnell und kann für eine breitere Verwendung erweitert werden. Das Ändern des hue ändert die Themen aller Schaltflächen.

Dynamische Washed-Out-Effekte

In einigen Fällen benötigen wir möglicherweise einen Farbverlauf, um einen sehr hellen Farbton der anderen Farbe zu stoppen. Mit HSL können wir die gleiche Farbe, aber mit einem anderen Helligkeitswert für die zweite verwenden.

 .section { background: linear-gradient(to left, hsl(var(--primary-h), var(--primary-s), var(--primary-l)), hsl(var(--primary-h), var(--primary-s), 95%)); } .section-2 { --primary-h: 167; }

Der Verlauf beginnt rechts mit einer Volltonfarbe und verblasst dann zu einem helleren Farbton. Dies kann beispielsweise für einen dekorativen Heldenabschnitt verwendet werden.

Das ist alles mit den Anwendungsfällen. Ich hoffe, dass Sie etwas Neues und Nützliches gelernt haben.

Fazit

HSL-Farben sind sehr kraftvoll, wenn wir sie richtig einsetzen. Sie können uns Zeit und Mühe ersparen und uns sogar dabei helfen, Optionen zu erkunden, wie wir Farben auf Designs anwenden können.