hsl()

Zapisuje kolor przez odcień na kole barw, nasycenie i jasność. Łatwo w nim rozjaśnić, przyciemnić albo stonować kolor.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Warianty koloru
Warianty koloru w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

:root {
  --hue: 262;
}

.btn {
  background: hsl(var(--hue) 83% 58%);
  color: #fff;
}

.btn:hover {
  background: hsl(var(--hue) 83% 46%);
}

.btn.soft {
  background: hsl(var(--hue) 83% 58% / 0.15);
  color: hsl(var(--hue) 90% 80%);
}

HTML przykładu

<div style="display: flex; flex-wrap: wrap; gap: 12px;">
  <button class="btn" type="button" style="padding: 10px 18px; border: 0; border-radius: 10px; font: 600 15px system-ui, sans-serif; cursor: pointer; transition: background-color 0.2s;">Zapisz zmiany</button>
  <button class="btn soft" type="button" style="padding: 10px 18px; border: 0; border-radius: 10px; font: 600 15px system-ui, sans-serif;">Podgląd</button>
</div>

Podgląd

Najedź na pierwszy przycisk. Potem kliknij „Edytuj” i zmień --hue np. na 160 albo 20: wszystkie odcienie przestawią się naraz.

Definicja i zastosowanie

Funkcja hsl() opisuje kolor tak, jak myśli o nim człowiek. Pierwsza wartość to odcień (hue), czyli kąt na kole barw: 0 to czerwień, 120 zieleń, 240 niebieski, a 360 znów czerwień. Druga to nasycenie (saturation): 0% daje szarość, 100% najżywszy kolor. Trzecia to jasność (lightness): 0% to zawsze czerń, 100% zawsze biel, a 50% to czysty kolor.

Przewagę nad rgb() widać przy palecie. Ten sam odcień z inną jasnością daje jaśniejszy lub ciemniejszy wariant, np. hsl(262 83% 58%) na przycisk i hsl(262 83% 45%) na jego stan po najechaniu. Przezroczystość dopisujesz po ukośniku: hsl(262 83% 58% / 0.4).

Starsza składnia z przecinkami, hsl(262, 83%, 58%), oraz funkcja hsla() nadal działają. Odcień może mieć jednostkę kąta, np. 262deg albo 0.73turn, a liczba bez jednostki oznacza stopnie.

Słabość HSL: jasność 50% nie wygląda tak samo jasno w każdym odcieniu. Żółty hsl(60 100% 50%) jest dla oka dużo jaśniejszy niż niebieski hsl(240 100% 50%). Jeśli kolory w palecie mają wyglądać na równie jasne, lepiej sprawdzi się oklch().

Składnia

hsl(<odcień> <nasycenie> <jasność> [/ <alfa>]?)

Warianty koloru

hsl(262 83% 58%)
kolor bazowy
Fiolet marki: odcień 262, mocne nasycenie i średnia jasność. W zapisie szesnastkowym to prawie dokładnie #7c3aed.
hsl(262 83% 35%)
jasność 35%
Ten sam odcień i nasycenie, niższa jasność. Wychodzi ciemniejsza wersja tego samego koloru, dobra na stan po najechaniu.
hsl(262 83% 82%)
jasność 82%
Wyższa jasność daje pastelowy odcień, np. na tło etykiety albo delikatne podświetlenie.
hsl(262 25% 58%)
nasycenie 25%
Mniejsze nasycenie przygasza kolor w stronę szarości. Przydaje się do teł i obramowań, które nie mają przyciągać uwagi.
hsl(160 83% 40%)
odcień 160
Zmiana samego odcienia przesuwa kolor po kole barw, tu do morskiej zieleni.
hsl(262 83% 58% / 0.4)
alfa 0.4
Po ukośniku przezroczystość. Przez fiolet prześwituje szachownica tła.

Zapis	Co się zmienia	Opis
hsl(262 83% 58%)	kolor bazowy	Fiolet marki: odcień 262, mocne nasycenie i średnia jasność. W zapisie szesnastkowym to prawie dokładnie `#7c3aed`.
hsl(262 83% 35%)	jasność 35%	Ten sam odcień i nasycenie, niższa jasność. Wychodzi ciemniejsza wersja tego samego koloru, dobra na stan po najechaniu.
hsl(262 83% 82%)	jasność 82%	Wyższa jasność daje pastelowy odcień, np. na tło etykiety albo delikatne podświetlenie.
hsl(262 25% 58%)	nasycenie 25%	Mniejsze nasycenie przygasza kolor w stronę szarości. Przydaje się do teł i obramowań, które nie mają przyciągać uwagi.
hsl(160 83% 40%)	odcień 160	Zmiana samego odcienia przesuwa kolor po kole barw, tu do morskiej zieleni.
hsl(262 83% 58% / 0.4)	alfa 0.4	Po ukośniku przezroczystość. Przez fiolet prześwituje szachownica tła.

Warianty koloru w praktyce

hsl(262 83% 58%)

Fiolet marki: odcień 262, mocne nasycenie i średnia jasność. W zapisie szesnastkowym to prawie dokładnie #7c3aed.

.demo { background: hsl(262 83% 58%); }

hsl(262 83% 35%)

Ten sam odcień i nasycenie, niższa jasność. Wychodzi ciemniejsza wersja tego samego koloru, dobra na stan po najechaniu.

.demo { background: hsl(262 83% 35%); }

hsl(262 83% 82%)

Wyższa jasność daje pastelowy odcień, np. na tło etykiety albo delikatne podświetlenie.

.demo { background: hsl(262 83% 82%); }

hsl(262 25% 58%)

Mniejsze nasycenie przygasza kolor w stronę szarości. Przydaje się do teł i obramowań, które nie mają przyciągać uwagi.

.demo { background: hsl(262 25% 58%); }

hsl(160 83% 40%)

Zmiana samego odcienia przesuwa kolor po kole barw, tu do morskiej zieleni.

.demo { background: hsl(160 83% 40%); }

hsl(262 83% 58% / 0.4)

Po ukośniku przezroczystość. Przez fiolet prześwituje szachownica tła.

.demo { background: hsl(262 83% 58% / 0.4); }

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Warianty jednego koloru (stan po najechaniu, obramowanie, tło) twórz, zmieniając tylko jasność. Paleta będzie spójna.
Trzymaj odcień w zmiennej, np. --hue: 262. Nowy motyw kolorystyczny to wtedy zmiana jednej liczby.
Nie porównuj jasności różnych odcieni po samej wartości L. Do palet o równej jasności użyj oklch().

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs