Yay for HSLa

Riesige schlaffe lange Hosen? Stahl mit hoher Festigkeit und niedriger Legierung? NEIN, wir sprechen über Farbton, Sättigung, Helligkeit und Alpha, und das ist eine Möglichkeit, Farbe in CSS zu deklarieren. Es sieht so aus

#some-element {
  background-color: hsla(170, 50%, 45%, 1);
}

Es ist ähnlich wie RGBa, da Sie drei Werte deklarieren, die die Farbe bestimmen, und dann einen vierten Wert für die Transparenzstufe. Sie können unten mehr über die Browserunterstützung lesen, aber grundsätzlich unterstützt jeder Browser, der rgba() unterstützt, auch hsla().

Es gibt eine neue Syntax für HSL- und RGB-Farben! Jetzt müssen Sie keine Kommas oder das "a" in beiden Funktionen verwenden, um eine Alpha-Transparenz einzustellen. Stattdessen verwenden wir einen Schrägstrich (/) vor dem Alpha-Wert. Z. B. hsl(170 50% 45% / 1) anstelle von hsla(170, 50%, 45%, 1). Lesen Sie mehr über die Änderung und andere aktualisierte CSS-Farbfeatures.

• Farbton – Denken Sie an ein Farbrad. Um 0^o und 360^o sind Rottöne, 120^o sind Grüntöne, 240^o sind Blautöne. Verwenden Sie alles zwischen 0-360. Werte darüber und darunter werden modulo 360 berechnet.
• Sättigung – 0% ist komplett entsättigt (Graustufen). 100% ist voll gesättigt (volle Farbe).
• Helligkeit – 0% ist komplett dunkel (schwarz). 100% ist komplett hell (weiß). 50% ist durchschnittliche Helligkeit.
• Alpha – Deckkraft-/Transparenzwert. 0 ist vollständig transparent. 1 ist vollständig opak. 0,5 ist 50% transparent.

Lassen Sie uns eintauchen.

Warum ist es cool?

Der eigentliche Reiz von HSLa liegt darin, dass es intuitiver ist, was sich bei der Änderung der Werte auf die Farbe auswirkt. Eine Erhöhung des zweiten Wertes erhöht die Sättigung dieser Farbe. Eine Verringerung des dritten Wertes verringert die Helligkeit dieser Farbe. Das macht das Erstellen eigener Farbvariationen im Handumdrehen *viel einfacher*. Ich wette, die meisten von uns können keine schönen und konsistenten Farbvariationen auf diese Weise mit dem RGBa-Modell erstellen.

Das HSLa-Modell erleichtert auch die programmatische Änderung von Farbwerten erheblich. Sehen Sie sich das Demo-Tool an, das dies hervorhebt.

Warum wird es weniger genutzt?

Dies ist meine große Annahme, aber soweit ich das beurteilen kann, wird HSLa in der Praxis *viel* weniger genutzt als RGBa. Wenn Sie Ideen haben, warum das so ist, teilen Sie diese bitte in den Kommentaren mit. Meine Theorie ist, dass HSL-Werte schwieriger zu bekommen sind, wenn man sie vom Bildschirm oder einem Photoshop-Dokument abgreift.

Ich schätze, Photoshop verwendet stattdessen das Hue/Saturation/Brightness-Modell. Ich verstehe ehrlich gesagt nicht ganz den Unterschied, aber als ich das hier zum ersten Mal versuchte, geriet ich in diese Situation.

HSLa-Werte erhalten

Es gibt eine kleine App für Mac namens Colors von Matt Patenaude.

Sie klicken einfach auf die Lupe und dann irgendwo auf den Bildschirm. Die Farbe wird dann in das Feld eingetragen. Dann können Sie die HSLa-Option auswählen und sie in Ihre Zwischenablage kopieren. Es gibt Einstellungen, um die Formatierung nach Ihren Wünschen anzupassen. Funktioniert ziemlich gut. Mein einziger Kritikpunkt ist, dass das kleine schwebende Fenster, wenn Sie es schließen, nicht wieder geöffnet wird, es sei denn, Sie beenden und starten die App neu. Könnte eine Snow-Leopard-Sache sein und die App wurde schon länger nicht mehr aktualisiert? Keine Ahnung.

Wenn jemand ein bevorzugtes Tool für Windows oder Linux zur Farberfassung mit HSLa als Funktion kennt, lassen Sie es mich bitte in den Kommentaren wissen, und ich werde es hier aktualisieren.

Browser-Unterstützung

Firefox 3.0+, Safari 3+, Chrome 6+ (vielleicht auch älter?), Opera 10+ (vielleicht auch älter?)

Wie üblich ist IE aus der Party ausgeschlossen. Sogar Version 8. Ich habe das Gefühl, dass Version 9 es unterstützen wird, habe aber noch keine Beweise. Hat jemand Version 9 installiert und kann es testen? Für IE können Sie einfach eine Fallback-Farbe deklarieren. IE 8 unterstützt auch RGBa nicht, daher ist die Verwendung eines Hex-Codes die beste Wahl.

#some-element { 
  background-color: #e2ecf0; /* Fallback */
  background-color: hsla(190, 30%, 94%, 1);
  background-color: hsl(190 30% 94% / 1);
}

Mein Werkzeug

Als Demo, wie einfach es ist, programmatisch Farbvariationen zu erstellen, habe ich den HSLa Explorer erstellt. Es gibt zwei Schieberegler auf der Seite. Der obere steuert den Farbtonwert und der zweite steuert den Opazitätsgrad. Er nimmt diese Werte und erstellt ein Raster aus 100 Farbvariationen, bei denen Sättigung und Helligkeit in einer Matrix variiert werden.

IE mag aus irgendeinem Grund etwas in JavaScript (in der Demo) nicht, aber egal, IE mag HSLa sowieso nicht. Danke an Matthieu Sieben, der bei der Verbesserung der Demo geholfen hat.

Weitere Werkzeuge

• HSL Color Picker von Brandon Mathis
• HSL Random Color Generator von Matt Groeber