Autor publikacji: Virtual Patriot - Administrator

hsl()

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - hsl color (LV3)

Przeznaczenie funkcji `hsl()`

Za pomocą funkcji hsl() możemy określić wartość interesującego nas koloru.

Parametry funkcji `hsl()`

            hue, saturation, lightness

Przykładowe zapisy

hsl(240, 75%, 40%)

hsl(-150, 100%, 85%)

hsl(24.5, 62.8%, 95.7%)

hue

Parametr hue jest wymaganym parametrem funkcji hsl(). Parametr hue określa odcień barwy nowo powstającego koloru na podstawie koła barw. Barwa czerwona reprezentowana jest przez wartość 0, jak również przez wartość 360. Barwa zielona reprezentowana jest przez wartość 120. Barwa niebieska reprezentowana jest przez wartość 240.

Zakres wartości: 0 - 360
Ważne: wartości większe niż wartość 360 traktowane są jako kolejny obrót na kole barw, dlatego przykładowo wartość 361 traktowana jest jako wartość 1. Wartości ujemne traktowane są jako obrót w tył na wspomnianym kole barw, dlatego przykładowo wartość -1 traktowana jest jako wartość 359. Ponadto wartość 0 oraz wartość 360 reprezentują tę samą barwę. Zobacz również paletton.com.
Wartość domyślna: brak

saturation

Parametr saturation jest wymaganym parametrem funkcji hsl(). Parametr saturation określa procent nasycenia barwy. Im większy procent tym nasycenie barwy nowo powstającego koloru będzie większe.

lightness

Parametr lightness jest wymaganym parametrem funkcji hsl(). Parametr lightness określa procent jasności barwy. Im większy procent tym jasność barwy nowo powstającego koloru będzie większa.

Przykład funkcji `hsl()`

  background-color:hsl(55, 75%, 60%);

tło tego elementu "div" posiada nowy kolor, ponieważ do tego elementu "div" została dodana właściwość "background-color" wraz z wartością w postaci funkcji "hsl()", w której to funkcji zostały użyte następujące wartości: "55, 75%, 60%"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-color:hsl(55, 75%, 60%);
        padding:1em;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <div>
      tło tego elementu "div" posiada nowy kolor, ponieważ do tego elementu "div" została dodana właściwość "background-color" wraz z wartością w postaci funkcji "hsl()", w której to funkcji zostały użyte następujące wartości: "55, 75%, 60%"
    </div>

  </body>
</html>

Interpretacja funkcji `hsl()`

: tak
: tak
: tak
: tak
: tak, lecz od wersji 9
: tak

Zobacz więcej informacji o interpretacji funkcji hsl().