Wir alle wissen, welche Bedeutung Farben in allem haben, egal ob es um ein Webseitenlayout, ein Bild, einen Video oder irgendein anderes grafisches Element geht. In der Essenz ist Farbe eine subjektive Erfahrung, die das Ergebnis der Interaktion zwischen Licht, Auge und Gehirn ist. Die Hinzufügung von Farben zur Webseite gibt der gesamten Layout und grafischen Elemente eine neue Lebendigkeit. Niemand mag, wenn man Webseiten mit weiß, schwarz und grau besucht. Farben machen die Elemente für das menschliche Auge realistischer und attraktiver erscheinen.
Nicht nur theoretisch, sondern auch psychologisch kommt es ins Spiel, wenn wir Farben auf Webseiten verwenden. Wissenschaftlich ist bewiesen, dass ein bestimmter Farbwert bestimmte Emotionen im menschlichen Gehirn auslöst, wie z.B. Herbstfarben wie Orange und Gelb, die Freude oder Glück symbolisieren, die rote Farbe für festive Saison und Blau als ruhig und vertrauenswürdig wahrgenommen wird. Darüber hinaus hast du vielleicht bemerkt, dass viele Lebensmittelunternehmen oft Rot und Gelb auf ihren Webseiten verwenden, pharmazeutische Unternehmen dazu neigen, Grün auf ihren Seiten zu verwenden, Fitnessunternehmen manchmal Orange, usw.
Beim Erstellen der Benutzeroberfläche geht es um mehrere Dinge, einschließlich von CSS-WebseitenLayouts, Elementen, CSS-Positionierung, Navigation, Text usw. Ein weiterer Faktor, der für die Benutzeroberfläche relevant ist, sind HSL-Farben in CSS. CSS-Farben spielen ebenfalls eine wichtige Rolle in der Benutzeroberfläche, was einige Leute meist vermeiden.
Nicht nur Webentwickler, sondern auch professionelle Fotografen und Videoeditor nutzen dieses Farbspiel oft aus. Die Perfekte Erstellung eines Bildes ist ihre Arbeit und dafür verwenden sie viel Farbkontrast. Daher ist die Wahl der idealen Farbsetzung für Elemente von größter Bedeutung.
CSS besitzt zahlreiche Eigenschaften, einschließlich von background-color, color, linear-gradient usw., die Benutzern erlauben, die gewünschte Farbe zu addieren oder zu füllen. Alle diese Eigenschaften helfen den Benutzern auch, die Schriftfarbe zu verändern oder sogar schönen Farbmustern zu Texten und Elementen hinzuzufügen.
Alle CSS-Farbeigenschaften erfordern ein Farbverfahren, um die Farbe zu definieren und anschließend in das angegebene Element zu füllen. CSS verfügt über einige integrierte Farbverfahren, wie z.B. HSL, RGB, HSLA, Hexadezimal usw. Allerdings erfordern diese Farbverfahren eine Sammlung von ganzzahligen Werten in verschiedenen Einheiten, um die Farbe abzurufen.
Obwohl zahlreiche Blogs und Tutorials sich auf die RGB– und Hexadecimal-Methoden konzentrieren, gibt es Bedarf, die integrierten Aspekte der HSL-Methode zu decken. In diesem Blog werden wir tief in die Rolle der HSL-Farben in CSS eintauchen, indem wir alle Nuancen rund um die HSL-Methode und ihre Differenz zu anderen Methoden behandeln.
Bevor wir uns direkt auf die HSL-Methode zuwenden, lassen Sie uns die anderen beiden CSS-Farbmethoden – RGB und Hexadecimal – diskutieren und warum wir HSL-Farben in CSS brauchen.
Unterschied zwischen RGB und Hex
Das RGB-Verfahren funktioniert, indem angenommen wird, dass jede Farbe eine Mischung von Rot, Grün und Blau ist. Dieses Verfahren erfordert drei Dezimalzahlen, die im Bereich 0 – 255 in der Funktion rgb() zugeordnet werden. Diese Werte legen die Intensitätsstufe für jeden dieser drei Farben fest, wobei 0 als niedrigste Intensität und 255 als höchste Intensität steht.
Hier sind einige Beispiele von RGB-Farbkombinationen an verschiedenen Intensitäten:
Nehmen wir ein Beispiel, um die Arbeitsweise des RGB-Verfahrens zu verstehen.
.container {
background-color: rgb(0, 200, 120);
width: 100%;
height: 100px;
}Ausgabe:
Nun gehen wir zum Hexadezimal-Verfahren. Es arbeitet auch auf der Vorstellung, dass jede Farbe eine Mischung von Rot, Grün und Blau ist. Das Hexadezimal-Verfahren erfordert drei zweistellige HEX-Zahlen und beginnt mit einem ‘#’-Zeichen. Diese drei Hex-Werte geben die Intensitätsstufe von Rot, Grün und Blau jeweils an.
Da es涉及Hexadezimal-Werte gibt und die Hexadezimal-Basis im Bereich von 0–15 liegt, wo die Werte im Bereich von 10–15 durch die Buchstaben A–F dargestellt werden. Daher gibt 00 die Farbe mit der niedrigsten Intensität und FF die höchste Intensitätsstufe hervor.
Hier sind einige allgemeine Hex-Farben mit Codes:
Nehmen wir ein Beispiel, um das Arbeitsprinzip des Hex-Verfahrens zu verstehen.
.container1{
background-color:#91D8E4;
}Ausgabe:
Arbeiten mit RGB und Hexadezimal-Verfahren ist bequem und kann uns alles geben, was wir wollen. Aber das ist nicht wahr. Arbeiten mit diesen beiden Verfahren ist nicht so einfach, wie es scheint. Sehen wir, wie das geht.
Probleme mit RGB und Hex-Farb-Codes
Eines der bedeutenden Probleme, die diese beiden Methoden mit sich bringen, besteht darin, dass sie nicht intuitiv sind. Das bedeutet, dass sie nicht auf die Art funktionieren, wie ein menschlicher Gehirn Farben erkennt. Wenn ein Mensch eine Farbe sieht, teilt sein Gehirn diese Farbe nicht in Rot, Grün und Blau auf. Daher ist es für uns schwer, Farben anhand ihrer RGB-Zahlen und Hexadezimalzahlen zu erkennen.
Auch in der täglichen Arbeit von Entwicklern oder Testern kann ein solches Dilemma auftreten, nämlich die Notwendigkeit einer Umwandlung von RGB in Hexadezimal oder umgekehrt, um besser verständlich und kommunizierbar zu sein.
Beim Erstellen einer Benutzeroberfläche müssen UI-Designer und Web-Entwickler verschiedene Schattierungen einer bestimmten Farbe verwenden, um eine konsistente Thema durch die Oberfläche zu halten. Zum Beispiel 30 Schattierungen von Blau, 20 Schattierungen von Grün, 10 Schattierungen von Orange usw., je nach den Anforderungen. Es kann zu Unordnung führen, wenn wir CSS-Variablen verwenden, um dies vielen Farbvarianten zu halten. Wenn wir erkennen, dass die RGB-Werte all dieser Varianten unzusammenhängend sind, verschlimmert sich die Situation.
Aber diese Nachteile der RGB- und Hexadezimalmethoden können mit den HSL-Farben in CSS eliminiert werden. Lassen Sie uns nun die Rolle der HSL-Farben in CSS verstehen, indem wir die Diskussion mit dem Bedeutung von HSL beginnen, wie diese funktioniert und wie sie die Nachteile der RGB- und Hexadezimalmethoden überwindet.
Was sind HSL?
HSL steht für Hue, Saturation, und Lightness. Mit anderen Worten, HSL besteht aus drei Messfaktoren – Hue, Saturation und Lightness. Wie die anderen beiden Methoden, die oben erwähnt wurden, arbeitet auch das HSL-Verfahren auf der Beobachtung, dass jeder Farbe eine Mischung von Rot, Grün und Blau ist.
Da die primären Farben im HSL-Format Rot, Grün und Blau sind, ist der RGB-Farbkreis der zentrale Begriff hinter den HSL-Farben in CSS.
Der RGB-(Rot Grün Blau)-Farbkreis repräsentiert Farben, die innen in einem Kreis gefüllt sind. Dieser Kreis zeigt die Beziehung zwischen Primär-, Sekundär- und Tertiärfarben. Es gibt jedoch drei Arten von Farbbäumen – RGB (Rot Grün Blau), CMY (Cyan Magenta Yellow) und RYB (Rot Gelb Blau).
Der oben angehängte zeigt den RGB-Farbkreis. Man kann beobachten, dass Rot 0 Grad ist, Grün bei 120 Grad und Blau bei 240 Grad. Lassen Sie uns tiefer in diese drei Merkmale gräben und verstehen, was hinter den Kulissen passiert, wenn wir HSL-Farben in CSS verwenden.
Hue
Der Hue ist der erste Wert, der in dieser Methode zugewiesen wird, wenn wir HSL-Farben in CSS verwenden. Es ist die Messung des Farbwinkels auf dem Farbbäumen. Der definierte Winkelwert wird vom positivem x-Achsen in anti-uhrzeigersinnigem Verlauf berechnet, und die Farbe an diesem Winkel wird zurückgegeben. Da es eine Messung von einem Winkel ist, ist ihr Standardwert in Grad Einheiten. Allerdings erlaubt diese Methode die Definition von Winkelwerten in anderen Einheiten, einschließlich rad, grad und Umdrehung.
Der Wert der Winkel Einheit befindet sich in einem Bereich von 0–360 Grad. Rot bei 0 Grad, Grün bei 120 Grad und Blau bei 240 Grad. Für rad beträgt der Wertebereich 0–6,28 rad. Die am meisten verwendeten Einheit Werten in den HSL-Farben in CSS sind die Grad-Werte.
Lassen Sie uns ein Beispiel anführen, um zu verstehen, wie der Hue funktioniert.
div {
border: 2px solid;
height: 100px;
background-color: hsl(123deg, 39%, 49%);
}Ausgabe:
Obwohl die Winkel Werte zwischen 0-360 begrenzt sind, kann es Werte kleiner als 0 Grad und größer als 360 Grad annehmen. Wenn der Wert über 360 Grad ist, wird er in den Bereich durch Subtraktion von 360 ergänzt. Bei Werten kleiner als 0 oder negativen Werten wird der Wert addiert zu 360, und der resultierende Wert wird dann verwendet, um Farbe abzurufen.
background-color: hsl(400deg, 39%, 49%);Ausgabe:
background-color: hsl(-120deg, 39%, 49%);Ausgabe:
<div class="container1">Container 1</div>
<div class="container2">Container 2</div>
div {
border: 2px solid;
height: 100px;
text-align: center;
font-size: 80px;
margin-bottom: 10px;
}
.container1 {
background-color: hsl(60, 39%, 49%);
}
.container2 {
background-color: hsl(420, 39%, 49%);
}Ausgabe:
Wenn wir in Bezug auf die azimutalen Werte denken, dann sind 60 Grad und 420 Grad (420 – 360 = 60) gleich. Daher erhalten wir die gleiche Hintergrundfarbe in beiden Containern, wie im obigen Beispiel beobachtet wurde.
.container1 {
background-color: hsl(90, 39%, 49%);
}
.container2 {
background-color: hsl(-270, 39%, 49%);
}Ausgabe:
Hier können Sie auch feststellen, dass 90 Grad und -270 Grad uns das gleiche Ergebnis geben, aus dem gleichen Grund wie im vorhergehenden Beispiel. 90 Grad und -270 Grad sind gleich, wenn wir sie in azimutale Werte nehmen.
Nun lassen Sie uns zu der zweiten Eigenschaft des HSL-Verfahrens gehen, nämlich Sättigung.
Sättigung
Saturation definiert die Reinheitsstufe des Farbtons und wie stark die Farbe ver saturiert oder unver saturiert ist. Mit anderen Worten beeinflusst die Saturationscharakteristik die Intensität der Farbe. Der Saturationswert nimmt einen ganzzahligen Wert in Prozent Einheiten auf, um die Saturation der Farbe zu definieren.
Lassen Sie uns ein Beispiel anführen, um die Funktionsweise der Saturation zu verstehen.
.container{
background-color:hsl(60, 45%,49%);
}Ausgabe:
Wenn der Wert der Saturationscharakteristik hoch ist, dann ist auch die Farbintensität hoch, und der Anteil des Grautons in dieser Farbe wird geringer. Daher gibt eine 100%-ige Saturation uns eine reine Farbe, ein Wert von 50% führt zu einer Farbe und einem Grauton in gleichem Maße und 0% ergibt eine vollständige Grauwirkung.
.container1{
background-color:hsl(60, 0%,49%);
}
.container2{
background-color:hsl(420, 25%,49%);
}
.container3{
background-color:hsl(420, 50%,49%);
}
.container4{
background-color:hsl(420, 75%,49%);
}
.container5{
background-color:hsl(420, 100%,49%);
}Ausgabe:
In dem obigen Beispiel können Sie die Differenz, die wir im Hintergrund der Container durch die Erhöhung des Saturationswerts von 0% bis 100% erhalten sehen. Bei einem Wert von 0% erhalten wir eine volle Grauwirkung im Container 1, und mit zunehmendem Wert nehmen die Farbintensität und die Grauwirkung ab. Schließlich ist die Intensität am höchsten bei 100% im Container 5.
Da der Saturationswert eine Prozentangabe annimmt, fallen die erhaltenen Werte in den Bereich 0% bis 100% ein. Der Benutzer kann auch Werte größer als 100% und kleiner als 0% in der Saturationscharakteristik angeben.
Aber genau wie die Farbcharakteristik Hue ist es nicht nützlich, Werte außerhalb der Grenzen zu übergeben, weil der Intensität der Farbe bei Überschreitung der 100%-Grenze gleich 100% bleibt und bei Werten unter 0% (negative Wert e) die Intensität gleich 0% bleibt.
.container1 {
background-color: hsl(60, 0%, 49%);
}
.container2 {
background-color: hsl(420, -25%, 49%);
}Ausgabe:
Hier können Sie erkennen, dass wir für die Sättigungseigenschaft Werte von 0% und -25% zugewiesen haben und in beiden Containern erhalten wir die gleiche Hintergrundfarbe.
.container1 {
background-color: hsl(60, 100%, 49%);
}
.container2 {
background-color: hsl(420, 200%, 49%);
}Ausgabe:
In diesem Beispiel haben wir die Werte 100% und 200% für die Sättigungseigenschaft initialisiert und für diese beiden unterschiedlichen Werte erhalten wir in beiden Containern die gleiche Hintergrundfarbe.
Nun ist es Zeit für die letzte Eigenschaft des HSL-Verfahrens, das in CSS für HSL-Farben verwendet wird, d. h. die Helligkeit.
Helligkeit
Wie der Name vermuten lässt, steuert die Helligkeitseigenschaft die Menge an Licht in der Farbe. Mit anderen Worten kann die Helligkeit auch als Eigenschaft beschrieben werden, die bestimmt, wie hell oder dunkel eine Farbe ist. Wie die Sättigungseigenschaft erfordert auch die Helligkeitseigenschaft einen Integerwert in Prozenten.
Lassen Sie uns ein Beispiel anführen, um die Funktionsweise der Helligkeit zu verstehen.
.container {
background-color: hsl(60, 39%, 49%);
}Ausgabe:
.container1 {
background-color: hsl(60, 39%, 0%);
color: white;
}
.container2 {
background-color: hsl(420, 39%, 25%);
}
.container3 {
background-color: hsl(420, 39%, 50%);
}
.container4 {
background-color: hsl(420, 39%, 75%);
}
.container5 {
background-color: hsl(420, 39%, 100%);
}
Ausgabe:
Hier können Sie erkennen, dass bei 0% Helligkeit der Hintergrund in Container 1 schwarz ist und mit zunehmender Helligkeit die Farbhelligkeit steigt und bei 100% Helligkeit ist die Farbe voll; daher ist der Hintergrund in Container 5 voll weiß.
Wie die Sättigungseigenschaft akzeptiert auch die Helligkeitseigenschaft Werte über 100% und unter 0%. Aber Werte über 100% funktionieren gleich wie 100%, und Werte unter 0% (negative Werte) funktionieren gleich wie 0%. Seien Sie hier Zeuge dessen.
.container1 {
background-color: hsl(60, 39%, 0%);
}
.container2 {
background-color: hsl(420, 39%, -25%);
}Ausgabe:
.container1 {
background-color: hsl(60, 39%, 100%);
}
.container2 {
background-color: hsl(420, 39%, 250%);
}Ausgabe:
In diesem Beispiel können Sie erkennen, dass es obwohl wir in Container 1 eine Helligkeitswerte von 100% und in Container 2 einen Wert von 200% zugewiesen haben, immer noch den gleichen Ergebnis im Hintergrund erhalten.
Wir haben bisher über die drei Merkmale von HSL-Farben in CSS gesprochen, aber das ist nicht alles. Ein weiteres Merkmal unter HSL-Farben in CSS ist die „A,“ kurz für „alpha“. Es ist das vierte Merkmal. Die Alpha-Eigenschaft gibt die Transparenz der Farbe an. Mit anderen Worten bestimmt die Alpha-Eigenschaft einfach die Transparenzsebene der Farbe. In HSL kann man die Alpha-Eigenschaften mit dem HSLA-Verfahren verwenden.
Im Gegensatz zu anderen Eigenschaften von HSL-Farben in CSS, die einen Wert mit Einheiten aufweisen, ist die Alpha-Eigenschaft unitlos. Die Alpha-Eigenschaft fordert einen unitlosen Wert zwischen 0 und 1. Bei 0 ist die Farbe unsichtbar oder versteckt; bei 1 ist die Alpha-Eigenschaft am höchsten und die Farbe ist vollständig sichtbar.
.container{
background-color:hsla(60, 39%,49%, 0);
}Ausgabe:
.container{
background-color:hsla(60, 39%,49%, 1);
}Ausgabe:
Hier haben wir die Alpha-Eigenschaft mit dem Wert 1 zugewiesen, die Hintergrundfarbe des Containers erscheint und wir können die Hintergrundfarbe beginnen.
Erfordern von unitlosen Werten ist nicht das einzige, was die Alpha-Eigenschaften von anderen Eigenschaften der HSL-Farben in CSS unterscheidet. Eine Alpha-Eigenschaft kann jeden Wert zwischen 0 und 1 annehmen, auch Dezimalwerte (0.1, 0.2, 0.01), die in den anderen Eigenschaften der HSL-Farben in CSS nicht funktionieren.
.container {
background-color: hsla(60, 39%, 49%, 0.5);
}Ausgabe:
In diesem Beispiel können Sie erkennen, dass wir dem Alpha-Kennzeichen einen Wert von 0,5 (halb) zugewiesen haben. Daher erhalten wir als Ergebnis die Hintergrundfarbe mit halber Transparenz im Container. Nicht nur Dezimalzahlen mit einem Nachkommastellen, sondern Alpha-Kennzeichen akzeptieren auch Zahlen mit zwei Nachkommastellen. Dies bietet vollständige Kontrolle über den Transparenzgrad der Farbe.
Hier ist ein Beispiel dafür.
.container {
background-color: hsla(60, 39%, 49%, 0.25);
}Ausgabe:
Hier haben wir einen Wert von 0,25 übergeben, der eine Zahl mit zwei Nachkommastellen ist, an das Alpha-Kennzeichen.
Vorteile der Verwendung von HSL-Farben in CSS
HSL-Farben (Hue, Saturation, Lightness) sind eine relativ neue Ergänzung zum CSS-Farbmodul und bieten ein intuitiver und flexibler Weg, Farben in der Webentwicklung zu definieren. Im Vergleich zu traditionellen RGB- oder Hexadezimal-Farbkodierungen bieten HSL-Farben in CSS zahlreiche Vorteile für Designer und Entwickler an.
In diesem Abschnitt werden wir die Vorteile der Verwendung von HSL-Farben in CSS ausführlicher erörtern und diskutieren, wie sie verwendet werden können, um visuell ansprechende und zugängliche Designs für Webseiten und Anwendungen zu schaffen.
Hinsichtlich der praktischen Anwendung werden HSL-Farben in CSS auf vielerlei Profibereiche hoch gewertet, wegen ihrer Vorteile.
Es gibt mehrere Vorteile der Verwendung von HSL-Farben, die unten aufgeführt sind:
- Verbessert die Gesamtworkflow, indem sie sehr viel glatter wird
- Extrem nützlich, wenn wir verschiedene Farben bekommen, indem wir die Standardsbasisfarbe beibehalten
- Ein kraftvoller und direkter Ansatz, der eine breite Möglichkeit an Farben bietet.
- Das Verfahren arbeitet auf eine praktische Weise, wie Menschen Farben beobachten und ist leicht zu lernen und schnell zu lesen
- Durch die HSL-Methode generierte Farben sind klar ausgedrückt und man kann leicht das Ergebnis vorstellen.
Ein weiterer bedeutender Vorteil der Verwendung von HSL-Farben in CSS besteht darin, dass sie auch als Alternative zu RGB fungieren und leicht in RGB umgewandelt werden können. Da sowohl das RGB- als auch die HSL-Methode eine Sammlung von numerischen Werten erfordern, um zu arbeiten, können wir die Vorteile von Methoden nutzen, die die numerischen Werte der HSL-Farben leicht in die Bruchwerte für die RGB-Methode umwandeln.
Um die Dinge noch einfacher zu machen, können verschiedene Online-Farbkonverter Farbmethoden von einem in den anderen umwandeln. All diese Vorteile machen die HSL-Farben in CSS zu einer bevorzugten Methode, um Farben in Projekten zu definieren. Und es gibt viele weitere Gründe, warum die Zahl der Entwickler, die die HSL-Farben in CSS gegenüber anderen verwenden, täglich zunimmt. Obwohl die meisten CSS-Experten immer noch die HEX- oder RGB-Methode gegenüber HSL bevorzugen, erhält HSL Tag für Tag mehr Aufmerksamkeit.
Anwendungen der Verwendung von HSL-Farben in CSS
HSL-Farben in CSS bieten eine vielseitige und intuitive Methode, Farben zu spezifizieren, und haben viele Anwendungen in der Webentwicklung. Hier sind einige der wichtigsten Anwendungen der Verwendung von HSL-Farben in CSS:
Gefärbte Farben
Auf einem professionellen Niveau nutzen Sie, um eine dauerhafte Thema durch das Interface zu halten, indem Sie das Web-Thema mit unterschiedlichen Schattierungen einer bestimmten Farbe in den verschiedenen Bereichen des Interfaces entwerfen. In solchen Situationen ist die HSL-Methode sehr nützlich.
In diesem Beispiel haben wir zwei grundlegende Webseiten-Layouts betrachtet. In beiden Fällen ist der Kopfbereich mit einem Hintergrundfarbe gefüllt, und der Inhaltsschritt hat dieselbe Hintergrundfarbe, aber eine deutlich hellere Tönung. Um diesen Effekt zu erzielen, haben wir in der Kopfzeile den Wert für die Lichtheit gering gehalten und in den Inhaltsschritt hoch gelegt.
Durch Experimentieren mit dem Lichtheitseigenschaften bei verschiedenen Werten, können wir dunkle und helle Töne der selben Farbe für Webseitenthemen erhalten.
Dunkle Tonsprüche beim Überfahren
Vielleicht haben Sie beobachtet, dass sich einige Elemente der Webseitenoberfläche beim Überfahren mit der Maus in Farbe ändern. Ihre Farbe wechselt von einer helleren Tönung zu einer dunkleren. In diesem Fall kommt die HSL-Farbe in CSS ins Spiel, um die helleren und dunkleren Töne einer gemeinsamen Farbe zu liefern.
button {
padding: 10px;
border-radius: 20px;
background-color: hsl(240, 39%, 70%);
color: white;
font-size: 20px;
}
button:hover {
background-color: hsl(240, 39%, 50%);
cursor: pointer;
}
Hier können Sie erkennen, dass der obere Knopf eine helle Tönung hat, für die wir den Wert der Lichtheitseigenschaft auf 70% gehalten haben. Und nach dem Überfahren ändert sich die Farbe des Knopfes in eine dunklere Tönung, wie Sie am unteren Knopf erkennen können. Um diesen Effekt zu erzielen, haben wir dem Lichtheitseigenschaftswert 50% zugewiesen, was niedriger als der obere Knopf ist.
Töne des weißen Farbtons
Meistens müssen wir weiß als Schriftfarbe verwenden, um dem Text ein wenig Unterschied gegenüber der gesamten Webseitenoberfläche zu geben. Aber das Verwenden der gleichen weißen Tönung für jede Schrift nimmt die Benutzererfahrung ab. Um dies zu vermeiden, können wir verschiedene Töne von weiß verwenden, um den Text hervorzuheben und interessant zu halten.
Die HSL-Farben in CSS können uns dabei behilflich sein, unterschiedliche Schattierungen von Weißfarbe zu erhalten. Wir können unterschiedliche Werte zur Lichtmesszahl in dem HSL-Verfahren hinzufügen, um diese verschiedenen Schattierungen von Weißfarbe zu erhalten.
.container1 {
color: hsl(30, 49%, 100%);
}
.container2 {
color: hsl(30, 49%, 90%);
}
.container3 {
color: hsl(30, 49%, 95%);
}
.container4 {
color: hsl(30, 49%, 85%);
}Ausgabe:
In diesem Beispiel können Sie beobachten, dass in allen vier Containern der Text nicht die Basisweißfarbe ist. Wir haben unterschiedliche Schattierungen von Weiß verwendet, um ihn interessanter zu gestalten und weiß zu halten. Für diesen Zweck haben wir den Wert der Lichtmesszahl für die Schriftfarbe manipuliert.
Button-Typen
Die HSL-Farben in CSS sind auch sehr nützlich, wenn wir für Buttons zwei unterschiedliche Schattierungen derselben Farbe verwenden. Die Verwendung unterschiedlicher Schattierungen einer gemeinsamen Farbe erleichtert es dem Benutzer, schnell zu erkennen, welcher Knopf der Primär- und welcher der Sekundärknopf ist.
In der Realität werden dunkle Schattenfarben für primäre Buttons verwendet, und helle Schattenfarben für sekundäre Buttons. Um die hellen und dunklen Schattierungen einer gemeinsamen Farbe zu erhalten, geben wir hohe und niedrige Werte an die Lichtmesszahl in dem HSL-Verfahren weiter.
Lassen Sie uns dies anhand eines Beispiels anschauen.
.primary {
color: white;
background-color: hsl(10, 49%, 55%);
}
.secondary {
background-color: hsl(10, 49%, 80%);
}Ausgabe:
In dem obigen Beispiel ist der obere Knopf der primäre und der untere Knopf der sekundäre. Der dunkle Schattenfarbe wird der primäre Knopf mit einem niedrigen Lichtwert zugewiesen, und die helle Schattenfarbe wird dem sekundären Knopf mit einem hohen Lichtwert zugewiesen.
Dunkle Themenfarben
Der korrekte Farbkontrast ist in der Benutzeroberfläche unerlässlich. Insbesondere, wenn der Benutzer die dunkle Thema auf der Webseite aktiviert hat. Laut Studien aus dem Jahr 2022 nutzen 81,9% der Benutzer das dunkle Thema auf ihren Smartphones. Von diesem kann man sich eine Ahnung der Bedeutung des Farbkontrasts in den dunklen Themenoberflächen machen.
Nach den Barrierefreiheitrichtlinien von WCAG sollte mindestens ein Verhältnis von 4:5:1 für den Körpertext gegen dunkle Oberflächen aufrechtgehalten werden. Um diese Regel zu erfüllen, sollten in dunklen Themen keine saturierten Farben verwendet werden. Die Verwendung von saturierten Farben kann zudem zu Augenbelastung führen, wenn sie mit einer dunklen Hintergrundfläche verwendet werden.
Auf dem oben genannten Bild ist es offensichtlich, dass es viel einfacher ist, Text mit niedriger Sättigungswert lesbar zu machen als Text mit hoher Sättigung. Daher ist es immer empfehlenswert, unsaturierte Farben gegen dunkle Hintergrundflächen zu verwenden.
Wie wählen Sie die beste Farbangabe?
Die drei diskutierten Methoden haben ihre Vor- und Nachteile. Es hängt vom Anwendungsfall ab, welcher Farbangabe am besten für diesen funktioniert. Es gibt keinen gemeinsamen Faktor, auf dem wir alle drei Farbangaben vergleichen könnten, aber lassen Sie uns jeden von diesen untersuchen.
Hexadezimal
Wenn Sie nicht in einem Designfachbereich tätig sind und Projekte für persönliche Nutzung erstellen, dann müssen Sie wahrscheinlich die hexadezimale Methode verwenden, um Farben anzugeben. Viele Entwickler bevorzugen die Hexadezimalmethode wegen ihrer Einfachheit, die keine zuerst zu komplizierte ist, wie RGB und HSL-Farben in CSS.
Kopieren Sie die Hex-Code Ihres gewünschten Farbtons und fügen Sie sie Ihrem Programm hinzu. Es ergeben sich jedoch Herausforderungen, wenn Sie die Transparenz der Farbe manipulieren müssen. Der Hexadecimal-Methode bietet dem Benutzer keine Kontrolle über die Farbtransparenz.
RGB
Wann sollten Sie die RGB-Methode wählen: Diese Methode ist für alle professionellen Entwickler und Designer in den Bereichen Fotobearbeitung und Design nützlich. Ein weiterer Grund ist, dass die RGB-Methode der am häufigsten verwendete Farbspezifierer in vielen beliebten Designsoftware ist, einschließlich CorelDraw, PhotoShop und Illustrator. Die RGB-Methode ist jedoch nicht erfolgreich, wenn es darum geht, unterschiedliche Schattierungen derselben Farbe ohne zu komplizieren zu erzeugen.
HSL
Erwägen Sie nun die HSL-Methode. Professionelle Webentwickler und User-Interface-Designer neigen dazu, einen gemeinsamen Theme über die gesamte Oberfläche zu halten. In solcher Situation ist die Verwendung von HSL-Farben in CSS eine Hilfe, da sie die Farbscheibe ändern kann, indem Sie die Werte für die Sättigung und Lichterfassung ändern. Im Endeffekt kommt es auf die persönliche Präferenz an. Sie können aus diesen drei Spezifikatoren jede wählen, um Ihre Arbeit durchzuführen.
Browserkompatibilität
Es ist nicht nützlich, Farben anzugeben, wenn die definierten Farben nicht die gewünschte Ausgabe in Browsern liefern. Um solche Situation zu vermeiden, sollte die in der Designoberfläche verwendete Farbspezifikation mit allen Browsern kompatibel sein.
Glücklicherweise arbeitet die HSL-Farben in CSS völlig unabhängig von dem Browser. Die HSL-Methode ist vollständig browserkompatibel. Also egal, welchen Browser der Nutzer verwendet, er landet immer auf der Webseite mit ordnungsgemäß definierten Farben.
Allerdings kann man durch Cross-Browser-Testing die gewünschten Ergebnisse der HSL-Farben in CSS auf allen Browsern sicherstellen. Continuous Quality Testing-Plattformen (d.h. LambdaTest) helfen dir, Cross-Browser-Kompatibilitäts-Tests auf verschiedenen echten Browsern, Geräten und Betriebssystem-Kombinationen durchzuführen. Es wird geprüft, ob die angegebenen CSS-Farben korrekt in Browsern und Geräten funktionieren.
Schließlich
Dieser Blog hat uns über die Rolle der HSL-Farben in CSS und wie sie sich von anderen Farbverfahren unterscheiden lehrt. Wir haben auch die Anwendungen von HSL-Farben in CSS und ihre Vorteile diskutiert. Wir haben auch gelernt, wie HSL-Farben in CSS größere Flexibilität und Präzision bieten, wenn Farben in Web-Design festgelegt werden.
Durch die Verwendung von HSL-Farben in CSS können Designer über die Sättigung und Leuchtkraft der Farben besser kontrollieren, was zu einem breiteren Spektrum an Farben und Tönen führt, die im Web und in Anwendungen zum Erfüllen der Identität oder der ästhetischen Vision einer Marke verfügbar sind.
HSL-Farben in CSS ermöglichen mehr Barrierefreiheit für Menschen mit besonderen Bedürfnissen; indem man die Leuchtkraft und Sättigung der Farben einfachjustiert, entsteht mehr Kontrast und Lesbarkeit für Text und andere Designelemente, was es den Benutzern erleichtert, sich durch die Inhalte zu navigieren und zu verstehen. Insgesamt bieten HSL-Farben in CSS Designern und Entwicklern ein mächtiges Werkzeug, um in ihren Web-Designs lebhafte und barrierefreie Farbschemata zu schaffen.
Source:
https://dzone.com/articles/create-cohesive-ux-using-hsl-colors-in-css