HSL() / HSLa() ist ideal für die programmatische Steuerung von Farbe

0
38

Wenn Sie jemals brauchen, um von hand zu manipulieren, eine Farbe in die native CSS-HSL ist so ziemlich der einzige Weg. Farbton / Sättigung / Helligkeit (hsl() und hsla () – Funktionen in CSS) steht für den Farbton, die Sättigung, die Helligkeit und Optional alpha. Wir haben auch darüber gesprochen, bevor, aber wir können es brechen ein wenig mehr und tun einige interessante Dinge mit.

  • Farbton: Denken Sie sich ein Farbrad. Um 0o und 360o sind Rotweine. 120o ist, wo die grünen und 240o sind blues. Verwenden Sie alles in zwischen 0-360. Werte oberhalb und unterhalb wird modulo 360.
  • Sättigung: 0% ist komplett entsättigt (Graustufen). 100% ist voll gesättigt (volle Farbe).
  • Helligkeit: 0% ist komplett dunkel (schwarz). 100% komplett light (white). 50% ist die Durchschnittliche Helligkeit.
  • alpha: Deckkraft/Transparenz-Wert. 0 ist vollständig transparent. 1 ist vollständig deckend ist. 0,5, 50% transparent.

Sie können von hand manipulieren diese vier Werte und haben ein anständiges Gefühl dafür, was passieren wird. Ändern Sie die Farbe auf eine Reise rund um den Farbkreis. Ändern Sie die Sättigung tiefer oder mehr gedämpften Farben. Ändern Sie die Helligkeit im wesentlichen mix-in schwarz oder weiß.

Sie könnten einige mentale Koteletts mit rgb(), wohl wissend, dass rgb(255, 0, 0) ist eindeutig red oder rgb(0, 0, 0) ist schwarz, aber manipulieren diese, um auf einem hell-lila oder das starten mit einem Wald grün und ein wenig leichter ist nicht gerade Kopfrechnen. Man könnte sogar die clevere Art, die identifizieren können, die Farbe von Hex-codes. Fragen Sie David DeSandro auf einer party irgendwann. Aber nichts, was annähernd so intuitiv wie die HSL.

Diejenigen von Euch, die auf der Schneide erinnern sich vielleicht an den working draft der Farbe der Stufe 4 mit der color() Funktion und intuitiver sub-Funktionen. Oder, Sie könnten sich heiß und schwer mit Sass Farbe Funktionen oder Ihre eigenen Hause brauen Sache. More power to ya!

Sehen der Stift Sass Farbe Funktionen von Chris Coyier (@chriscoyier) auf CodePen.

Ich mag die HSL-beim spielen mit Farbe in JavaScript. Zum Beispiel, sagen, Sie wollen zu generieren, verschiedene rote Töne. Sie könnten zufällig die H, S und L eng um einige Werte:

Finden Sie die Stift-Random-rot von Chris Coyier (@chriscoyier) auf CodePen.

Nicht lange her, dass ich im Grunde die gleiche Sache Tat, aber gedreht ist der Farbton zu animieren, dieses stargate:

Finden Sie den Stift Sparklegate von Chris Coyier (@chriscoyier) auf CodePen.

Wenn Sie Durcheinander mit Farbe in JavaScript und möchte Randomisierung führen in angenehme Farben, geben PleaseJS zu drehen.

Brauchen Sie eine schnelle Farbauswahl? Ich legte diesen zusammen vor Ewigkeiten und ich habe schnell portiert es auf CodePen:

Finden Sie den Stift HSL-Explorer von Chris Coyier (@chriscoyier) auf CodePen.

Es gibt auch die HSL Color Picker und Mothereffering HSL-wenn Sie möchten, Optionen.

Finden Sie die Stift-HSL von Graham Pyne (@gpyne) auf CodePen.

Wollt Ihr lernen, mehr über die Farbe auf dem web im Allgemeinen? Don ‘T miss Sarah Drasner ist Ein Nerd’ s Guide to Farbe auf das Web. Viele tolle goodies drin, bis Sie Ihr Verständnis von der Arbeit mit Farbe.

Finden Sie die Stift-HSL von Dan Wilson (@danwilson) auf CodePen.

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!