Kolory HSL CSS

Wartości HSL

W CSS można używać barwy, nasycenia i jasności (HSL) do określania kolorów, w następującym formacie:

hsla(hue, saturation, lightness)

Barwa (hue）jest stopniem od 0 do 360 stopni na koło kolorów. 0 to czerwony, 120 to zielony, a 240 to niebieski.

Nasycenie (saturation）jest wartością procentową, 0% oznacza cień szarości, a 100% to pełny kolor.

Jasność (lightness）też jest wartością procentową, 0% to czarny, 50% to ani jasny, ani ciemny, a 100% to biały.

Przeprowadź eksperyment poprzez mieszanie poniższych wartości HSL:

　

HUE

0

SATURATION

100%

LIGHTNESS

50%

Przykład

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

Spróbuj sam

Nasycenie

Nasycenie można opisać jako siłę koloru.

100% to czysty kolor, bez cieni szarości

50% to 50% szarości, ale wciąż można zobaczyć kolor.

0% to całkowita szarość, nie widać już koloru.

Przykład

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

Spróbuj sam

Jasność

Jasność koloru można opisać jako ilość światła nadawanego kolorowi, gdzie 0% oznacza ciemność (czarny), 50% oznacza 50% jasności (ani ciemny, ani jasny), a 100% oznacza pełne światło (biały).

Przykład

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

Spróbuj sam

Zwykle określa się cień szarości ustawiając tonację i nasycenie na 0, a zmieniając jasność od 0% do 100% uzyskuje się ciemniejsze lub jaśniejsze cienie:

Przykład

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

Spróbuj sam

Wartości HSLA

Wartość koloru HSLA to rozszerzenie wartości koloru HSL z kanałem alpha - określa przezroczystość koloru.

Wartość koloru HSLA określona jest jako:

hsla(hue, saturation, lightness, alpha)

alpha Parametry to liczby między 0.0 (całkowicie przezroczyste) a 1.0 (całkowicie nieprzejrzyste):

Przeprowadź eksperymenty poprzez mieszanie poniższych wartości HSLA:

　

HUE

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5

Przykład

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

Spróbuj sam