Ostatnio edytowany:

hsl()

Autor: Virtual Patriot

Przeznaczenie funkcji hsl()

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

Parametry funkcji hsl()

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.

Zakres wartości

0 - 100%

Wartość domyślna

brak

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.

Zakres wartości

0 - 100%

Wartość domyślna

brak

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()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .