HSL() / HSLa() eignet sich hervorragend für die programmatische Farbkontrolle 

Wenn Sie jemals eine Farbe in nativem CSS manuell bearbeiten müssen, ist HSL so ziemlich der einzige Weg. HSL (die hsl() und hsla() Funktionen in CSS) steht für Hue (Farbton), Saturation (Sättigung), Lightness (Helligkeit) und optional Alpha (Transparenz). Wir haben bereits darüber gesprochen, aber wir können es etwas weiter aufschlüsseln und damit einige interessante Dinge tun.

• Farbton (Hue): Denken Sie an ein Farbrad. Um 0° und 360° herum sind Rottöne. 120° sind Grüntöne und 240° sind Blautöne. Verwenden Sie beliebige Werte zwischen 0-360. Werte darüber und darunter werden modulo 360 behandelt.
• Sättigung (Saturation): 0% ist vollständig entsättigt (Graustufen). 100% ist vollständig gesättigt (volle Farbe).
• Helligkeit (Lightness): 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 deckend. 0,5 ist 50% transparent.

Sie können jeden dieser vier Werte manuell ändern und haben eine gute Vorstellung davon, was passieren wird. Ändern Sie den Farbton, um eine Reise um das Farbrad zu machen. Ändern Sie die Sättigung, um tiefere oder gedämpftere Farben zu erhalten. Ändern Sie die Helligkeit, um im Wesentlichen Schwarz oder Weiß beizumischen.

Sie haben vielleicht einige Kenntnisse mit rgb() und wissen, dass rgb(255, 0, 0) eindeutig Rot ist oder rgb(0, 0, 0) schwarz ist, aber die Manipulation dieser Werte, um ein helles Lila zu erhalten, oder das Starten mit einem Waldgrün und das Aufhellen ist nicht gerade Kopfrechnen. Vielleicht sind Sie sogar der clevere Typ, der Farben anhand von Hex-Codes erkennen kann. Fragen Sie David DeSandro auf einer Party. Aber nichts ist so intuitiv wie HSL.

Diejenigen unter Ihnen, die am Puls der Zeit sind, erinnern sich vielleicht an den Arbeitsentwurf von Color Level 4 mit der color() Funktion und intuitiveren Unterfunktionen. Oder Sie beschäftigen sich intensiv mit Sass-Farbfunktionen oder Ihrer eigenen selbstgemachten Lösung. Mehr davon für Sie!

Siehe den Pen Sass Color Functions von Chris Coyier (@chriscoyier) auf CodePen.

Ich mag HSL sehr, wenn ich mit Farben in JavaScript spiele. Sagen wir zum Beispiel, Sie möchten verschiedene Rottöne generieren. Sie könnten die H-, S- und L-Werte eng um einige Werte herum randomisieren

Siehe den Pen Random Reds von Chris Coyier (@chriscoyier) auf CodePen.

Vor nicht allzu langer Zeit habe ich im Grunde dasselbe getan, aber den Farbton gedreht, um dieses Stargate zu animieren

Siehe den Pen Sparklegate von Chris Coyier (@chriscoyier) auf CodePen.

Wenn Sie mit Farben in JavaScript herumspielen und möchten, dass Zufälligkeit zu ansprechenden Farben führt, probieren Sie PleaseJS aus.

Benötigen Sie einen schnellen Farbwähler? Ich habe diesen vor langer Zeit zusammengestellt und ihn schnell nach CodePen portiert

Siehe den Pen HSL Explorer von Chris Coyier (@chriscoyier) auf CodePen.

Es gibt auch den HSL Color Picker und Mothereffering HSL, wenn Sie Optionen wünschen.

Siehe den Pen HSL von Graham Pyne (@gpyne) auf CodePen.

Möchten Sie mehr über Farben im Web im Allgemeinen erfahren? Verpassen Sie nicht Sarah Drasners Ein Nerd-Leitfaden zu Farben im Web. Es gibt viele großartige Dinge darin, um Ihr Verständnis der Arbeit mit Farben zu verbessern.

Siehe den Pen HSL von Dan Wilson (@danwilson) auf CodePen.