CSS – hsl- oder rgb(a)-Farben

Lesezeit: 6 Minuten

Benutzer-Avatar
Speerfischer

Ich bin dabei, ein neues Projekt zu starten, und ich möchte, dass sein CSS sowohl konsistent als auch leistungsfähig ist. Ich habe mich gefragt, welche Farbeinheiten ich verwenden soll. Mittel und Trello haben einen anderen Ansatz, der RBA gegenüber HSL und umgekehrt befürwortet. Ich habe wirklich Mühe, die Vorteile voneinander zu verstehen

Was sind die Vor- und Nachteile von hsl gegenüber rgb?

  • Mögliches Duplikat von Gibt es gute Gründe für die Verwendung von Hex über Dezimal für RGB-Farbwerte in CSS?

    – Gildas.Tambo

    26. September 2014 um 12:14 Uhr

  • Dies kann auch helfen stackoverflow.com/questions/6797306/…

    – Gildas.Tambo

    26. September 2014 um 12:15 Uhr

  • ich denke das könnte dir helfen ironion.com/colors-on-the-web-rgb-vs-hex-vs-hsla

    – Vitorino fernandes

    26. September 2014 um 12:19 Uhr

Benutzer-Avatar
Sujan Sundareswaran

Alte Frage, aber hier ist trotzdem meine Antwort.

Zunächst einmal, wenn Sie ein reiner Entwickler sind und einfach mit dem Codieren beginnen und das Projekt abschließen möchten, fahren Sie fort und verwenden Sie ein beliebiges Farbformat, es spielt keine Rolle. Wenn Sie sich jedoch Sorgen um die Benutzerfreundlichkeit und die Übergabe an ein größeres Team usw. machen, lesen Sie weiter.

Formate wie Hex und RGB sollen also eher maschinenlesbar als menschenlesbar sein. HSL ist das Gegenteil – soll für Menschen besser verständlich sein.

HSL steht für Farbton, Sättigung und Helligkeit. Der Farbton ist der Wert der tatsächlichen reinen Farbe, wie Rot, Grün, Blau, Gelb, Lila usw., wie er auf einem Farbrad dargestellt wird. Der Wert wird in Grad von 0 bis 360 angegeben.

HSL-Farbrad
Wie Thomas in den Kommentaren zu Recht darauf hingewiesen hat, sollten die Grade für Blau hier 240 sein, nicht 270.

Die Sättigung gibt an, wie viel von dieser Farbe in der Mischung vorhanden ist. Es ist eine Prozentskala von 0 % bis 100 %. 0 % Sättigung ergibt ein mattes Grau, was bedeutet, dass 0 % Ihres Farbtons in der Mischung enthalten sind.

Die Helligkeit ist wiederum ein Prozentwert von 0 % bis 100 %. 0 % bedeutet, dass es vollständig dunkel ist, mit anderen Worten – reines Schwarz. 100 % ist, nun ja, reines Weiß.

Geben Sie hier die Bildbeschreibung ein

HSL ist ein intuitives Farbformat, das die reale Welt nachahmt. Zum Beispiel sitzen Sie wahrscheinlich gerade an einem Schreibtisch. Beachten Sie die Farbe des Schreibtisches. Nehmen wir an, es ist ein Mahagoni-Schreibtisch. Seine Farbwerte wären—

Hex: #4f2017;
RGB: rgb(79, 32, 23);
HSL: hsl(10, 55%, 20%);

Halten Sie nun Ihre Hand darüber, etwa ein paar Zentimeter über der Oberfläche. Der Schatten Ihrer Hand macht den Desktop jetzt etwas dunkler, richtig? Nun ist es unmöglich, diese Farbänderung in Hex oder RGB darzustellen, ohne die Farbe selbst zu ändern. Aber in hsl ist es ein absoluter Kinderspiel – verringern Sie einfach den Helligkeitswert und bam! Die Farbe bleibt gleich, aber mit etwas Schwarz beigemischt – verringern Sie im Grunde den Helligkeitswert.

OLD VALUES                    NEW VALUES 
Hex: #4f2017; --------------> #200d09;
RGB: rgb(79, 32, 23); ------> rgb(32, 13, 9);
HSL: hsl(10, 55%, 20%); ----> hsl(10, 55%, 8%);

Wie Sie sehen können, haben sich die Werte von Hex und RGB komplett geändert, während sich HSL nur in einem Aspekt geändert hat. Aus diesem Grund wird es intuitiv einfach, Farbschemata im Handumdrehen zu erstellen.

Wenn ich Ihnen gesagt habe, dass die Schaltfläche auf der Webseite sein muss #61904a oder rgb(97, 144, 74), kannst du erraten, was die Farbe sein könnte? Nein, es sei denn, Sie sind ein Computer.

Aber die gleiche Farbe in HSL: hsl(100, 32%, 43%). Jetzt beträgt der Farbtonwert 100°, was bedeutet, dass er nahe an reinem Grün liegt, das 120° beträgt. Es ist also eine Art Grün. Als nächstes ist es zu 32% gesättigt, was bedeutet, dass 32 Schritte von einem matten Grau entfernt sind, das ein ziemlich entsättigtes Grün ist. Als nächstes sind es 43 Schritte von reinem Schwarz und umgekehrt 57 Schritte von reinem Weiß. Also auf der dunkleren Seite.

Die Schaltfläche beim Schweben heller und beim Klicken dunkler machen? Es ist ein Kinderspiel, erhöhen und verringern Sie einfach den letzten Wert, Helligkeit. Das ist alles. Dies ist mit Hex und RGB ohne ein Tool oder die Hilfe eines Designers nicht möglich.

Auf diese Weise können Sie selbst Farbschemata mit HSL erstellen. Hoffe das beantwortet deine Frage ausreichend.

  • Ihre Grafik sieht gut aus, aber der Wert für Blau ist 240 und nicht 270! Ich habe Ihre Grafik in meinen Lernressourcen gespeichert und das gerade bemerkt 🙂 Danke

    – dkt

    26. Februar 2019 um 12:30 Uhr

  • Next, its 43 steps from being pure white, and inversely, 57 steps from being pure black. – sollten das nicht eigentlich 43 Schritte von reinem Dunkel und 57 von reinem Weiß sein? So wie ich es verstanden habe, bedeutet 0% rein dunkel und 100% rein weiß. hab ich auch gecheckt CSS-Tricks und es sagt das gleiche.

    – eAbi

    25. Mai 2019 um 8:43 Uhr

  • @eAbi Ja, du hast recht! Ich habe die Antwort bearbeitet. Vielen Dank!

    – Sujan Sundareswaran

    26. Mai 2019 um 10:36 Uhr

  • wunderbare beschreibende Antwort …! Es ist selten, Antworten wie diese in StackOverflow zu finden. 😉

    – Sankha Karunasekara

    29. Mai 2019 um 12:49 Uhr

  • Diese Antwort löste alle meine Kopfschmerzen beim Erlernen all dieser verschiedenen Arten der Farbdarstellung in CSS. Wirklich danke 1 Upvote von mir.

    – moh80s

    27. Februar 2020 um 11:15 Uhr

Benutzer-Avatar
GibboK

Meiner Meinung nach:

HSL(A):

Pro: HSL ist praktisch, um Dinge heller oder dunkler zu machen, ist schneller zu schreiben und ermöglicht es Ihnen, Helligkeit und Sättigung zu ändern, ohne die Farbe selbst zu ändern.

Nachteile: HSL könnte in älteren Browsern (wie IE < 9) nicht unterstützt werden.

RGB(A):

Vorteile: RGBA ist bekannt und wird auch in älteren Browsern unterstützt.

Nachteile: Wenn Sie Dinge heller oder dunkler machen, müssen Sie die Farbe neu schreiben.

  • Du meinst HSL, nicht HEX.

    – RoboRobok

    20. Januar 2017 um 0:28 Uhr

  • Es gibt auch HSLA.

    – Mikael Dui Bolinder

    26. Oktober 2018 um 13:25 Uhr

Mir ist klar, dass dieser Thread alt ist, aber die Debatte hält an. Ich unterrichte Webentwicklung und selbst aktuelle Lehrbücher sind in dieser Frage immer noch uneinheitlich.

Dort sindjedoch eindeutige Gründe, ein Format einem anderen vorzuziehen.

  1. Verwenden Sie dasselbe Format wie der Rest Ihres Entwicklerteams.
  2. Verwenden Sie hex, wenn Ihre Zielbesucher stark veraltete Browser verwenden, um Ihre Websites anzuzeigen.
  3. Verwenden Sie RGBa, wenn Sie bereits mit diesem Format vertraut sind.
  4. Verwenden Sie HSLa, wenn die ersten 3 Optionen Sie nicht in eine andere Richtung führen. HSLa ermöglicht es Ihnen, für Transparenz zu codieren, die RGBa tut, aber auf eine Weise, die für Menschen zugänglich ist, und es wird zu diesem Zeitpunkt breit genug unterstützt, dass Sie viele vorhandene Geräte nicht wirklich von der Anzeige Ihrer Website ausschließen.

Wie bei allen Dingen, aber flexibel bleiben. Rigidität im Ansatz ist ein Zeichen von Kognition Totenstarre bei einem Entwickler.

Die Realität ist, dass Sie mit jedem Format auskommen können, obwohl Hex die Einschränkung hat, Transparenz nicht zu unterstützen, und RGBa die Einschränkung hat, dass es nicht einfach angepasst werden kann, ohne eine separate Referenz oder ein separates Werkzeug zu verwenden. Aus diesem Grund, Meine dringende Empfehlung ist HSLa. Sobald Sie das Farbrad gelernt haben, sollten Sie in der Lage sein, die Codes für jede Farbe zu erraten, die Sie erstellen möchten, und im Stadion sein. Versuchen Sie das mit einem anderen Format und Sie werden verblüfft sein.

Die Wahrheit ist, dass beide Modelle keine Vor- oder Nachteile haben. Beide Modelle können die gleichen Farben erzeugen. Es hängt ausschließlich von Ihrem mentalen Farbmodell ab. Finden Sie es einfacher, sich eine Farbe als eine Kombination aus Rot, Grün und Blau vorzustellen oder als einen bestimmten Farbton mit Helligkeit und Wertigkeit? Wenn Sie an ein Modell gewöhnt sind, ist es natürlich besser, dieses zu verwenden.

Ich persönlich bevorzuge RGB, weil es viele Zeichenprogramme verwenden. Ich kann HSL verwenden und ich mag Hex nicht, weil ich es schwer zu lesen finde.

1227780cookie-checkCSS – hsl- oder rgb(a)-Farben

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy