Ich bin dabei ein neues Projekt zu starten und ich möchte, dass sein CSS konsistent und performant ist. Ich habe mich gefragt, welche Farbeinheiten ich verwenden soll. Medium und Trello haben einen anderen Ansatz für die Förderung von RBA über HSL und umgekehrt. Ich kämpfe wirklich, um die Vorteile von einander zu verstehen
Was sind die Vor- / Nachteile von HSL über RGB?
Alte Frage, aber hier ist meine Antwort trotzdem.
Zunächst einmal, wenn Sie ein reiner Entwickler sind und nur Codierung und das Projekt beenden wollen, gehen Sie voran und verwenden Sie ein beliebiges Farbformat, das spielt keine Rolle. Aber wenn Sie sich Sorgen um Usability und Übergabe an ein größeres Team machen, lesen Sie weiter.
Formate wie hex und rgb sollen also maschinenlesbarer sein als menschenlesbar. HSL ist das Gegenteil - soll von Menschen besser verstanden werden.
HSL steht für Farbton, Sättigung und Helligkeit. Farbton ist der Wert der tatsächlichen reinen Farbe, z. B. Rot, Grün, Blau, Gelb, Lila usw., wie auf einem Farbrad dargestellt. Der Wert ist in Grad von 0 bis 360 angegeben. Siehe Bild HSL-Farbrad
Die Sättigung gibt an, wie viel Farbe in der Mischung vorhanden ist. Es ist eine prozentuale Skala von 0% bis 100%. 0% Sättigung gibt ein mattes Grau aus, was bedeutet, dass 0% Ihres Farbtons in der Mischung sind.
Die Helligkeit ist wieder ein Prozentwert von 0% bis 100%. 0% bedeutet, dass es völlig dunkel ist, mit anderen Worten - reines Schwarz. 100% ist, na ja, reinweiß. Siehe Bild Sättigung und Helligkeit
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. Sagen wir, es ist ein Mahagonischreibtisch. Es wären Farbwerte -
%Vor%Halten Sie jetzt Ihre Hand darüber, wie ein paar Zentimeter über der Oberfläche. Der Schatten deiner Hand macht den Desktop jetzt etwas dunkler, oder? Nun ist es unmöglich, diese Farbänderung in hex oder rgb darzustellen, ohne die Farbe selbst zu ändern. Aber in hsl ist es eine absolute Brise - verringern Sie einfach den Wert der Helligkeit und bam! Die Farbe bleibt gleich, aber mit ein wenig Schwarz gemischt verringern Sie den Helligkeitswert.
%Vor%Wie Sie sehen können, haben sich die Werte von Hex und RGB komplett geändert, während HSL nur einen Aspekt geändert hat. Aus diesem Grund wird es intuitiv einfach, Farbschemata im laufenden Betrieb zu erstellen.
Wenn ich Ihnen gesagt habe, dass die Schaltfläche auf der Webseite # 61904a oder rgb (97, 144, 74) sein muss, können Sie dann raten, wie die Farbe aussehen könnte? Nein, nicht, außer du bist ein Computer. Aber die gleiche Farbe in HSL: HSL (100, 32%, 43%). Jetzt ist der Farbtonwert 100 °, was bedeutet, dass es nahe bei reinem Grün liegt, welches 120 ° beträgt. Es ist also irgendwie grün. Als nächstes ist es 32% gesättigt und bedeutet 32 Schritte von einem stumpfen Grau, das ein ziemlich entsättigtes Grün ist. Als nächstes sind seine 43 Schritte rein weiß und umgekehrt 57 Schritte davon entfernt, rein schwarz zu sein. Also, auf der leichteren Seite.
Machen Sie die Schaltfläche heller bei Hover und dunkler bei Klick? Es ist ein Kinderspiel, erhöhen und verringern Sie einfach den letzten Wert, Helligkeit. Das ist alles. Dies ist unmöglich mit Hex und RGB ohne ein Werkzeug oder eine Designer-Hilfe zu tun.
Auf diese Weise können Sie selbst Farbschemata mit HSL erstellen. Hoffe das beantwortet deine Frage ausreichend.
Meiner Meinung nach:
%Vor%Pro: HSL ist praktisch, wenn Dinge heller oder dunkler gemacht werden, ist schneller zu schreiben, ermöglicht es Ihnen, Helligkeit und Sättigung zu modifizieren, ohne die Farbe selbst zu verändern.
Nachteile: HSL könnte in älteren Browsern (wie IE & lt; 9) nicht unterstützt werden.
%Vor%Vorteile: RGBA ist bekannt und wird auch in älteren Browsern unterstützt. Schöne Sache ist die Opazität ist ein separater Wert.
Nachteile: Wenn Sie Dinge heller oder dunkler machen, müssen Sie die Farbe neu schreiben.
Die Wahrheit ist, es gibt keine Vorteile oder Nachteile für jedes Modell. Beide Modelle können die gleichen Farben erzeugen. Es hängt einzig von deinem mentalen Farbmodell ab. Findest du es leichter, eine Farbe als eine Kombination aus Rot, Grün und Blau oder als einen bestimmten Farbton mit einer Leichtigkeit und einem Wert zu betrachten? Wenn Sie an ein Modell gewöhnt sind, ist es offensichtlich besser, dieses zu verwenden.
Persönlich bevorzuge ich RGB, weil das viele Zeichnungsanwendungen verwenden. Ich kann HSL benutzen und ich mag Hex nicht, weil ich es schwer finde, zu lesen.
