Wie HSL Farbe für Ihre HTML5 und CSS3 basierte Web-Seiten verwenden

Sie können einen HSL-Wert zuweisen, wo immer Sie Farben auf HTML5 und CSS3 Webseite verwenden. Der Code für HSLcolors zeigt, wie die HSL-Schema kann auf Ihrer Seite verwendet werden:

HSLcolors.html

Dies ist eine Überschrift

Das ist ein Absatz

So geben Sie eine Farbe, die die HSL-Schema verwenden, dies zu tun:

  1. Richten Sie Ihre Selektoren wie gewohnt.

    Im CSS, stellen eine Auswahl für jedes Element bis Sie färben möchten.

  2. Fügen Sie die Farbregel.

    Wenden Sie einen oder beide an jeden Wähler.

  3. Verwenden Sie die HSL-Funktion.

    Mit HSL gefolgt von Klammern gibt Sie möchten die Farbe mit der HSL Technik zu berechnen.

  4. Geben Sie den Farbton.

    Stellen Sie sich ein Farbrad mit rot an der Spitze. Der Farbton ist der Winkel (in Grad) der Farbe, die Sie auswählen möchten. Hue sollte einen Wert zwischen 0 und 360 haben.

  5. Bestimmen Sie die Sättigung.

    Sättigung wird als Prozentsatz gemessen. Sättigung von 0% zeigt eine Graustufen (irgendwo zwischen Schwarz und Weiß), während Sättigung von 100% ist eine vollständig gesättigte Farbe ohne Graustufen. Sie müssen das Prozentzeichen als Teil des Sättigungswert enthalten.

  6. Geben Sie die Leichtigkeit.

    Helligkeit wird auch in Prozent angegeben, wobei 0% vollständig schwarz zu sein und 100% ist ganz weiß. Ein Helligkeitswert von 50% wird eine ausgewogene Farbe zwischen Weiß und Schwarz bestimmen. Helligkeitswerte sollten auch das Prozentzeichen enthalten.

Das HSL-Modell ist ein relativ neues Zusätzlich zu CSS, so kann es nicht mit älteren Browsern funktionieren, aber es kann sehr hilfreich sein. HSL macht es einfacher, vorherzusagen, ob Farben zusammen gut aussehen wird. Wenn Sie zwei der HSL halten die gleichen Werte und die dritte zu ändern, die beiden Farben sind wahrscheinlich gut zusammen passen.

Menü