Przelicz kod HEX na zapis HSL
Wpisz kod HEX, a zapis HSL pojawi się w trakcie pisania: #3B82F6 to hsl(217.2, 91.2%, 59.8%). Wynik ma jedną cyfrę po przecinku, więc wpisany z powrotem daje ten sam kolor. Przełącznikiem wybierzesz zapis CSS albo liczby 0–255 z okna Kolory w Office.
Jak przeliczyć HEX na HSL?
Rozłóż kod na trzy kanały RGB i podziel każdy z nich przez 255. Z największego i najmniejszego kanału policzysz jasność i nasycenie, a kanał o największej wartości wyznaczy odcień na kole barw[1].
Wzór: L = (max + min) ÷ 2, S = (max − L) ÷ min(L, 1 − L), a H to kąt liczony od kanału, który ma największą wartość.
Tak to wygląda dla kodu #3B82F6. Kanały wynoszą 59, 130 i 246. Po podzieleniu przez 255 dają 0,231, 0,510 i 0,965. Średnia z największego i najmniejszego kanału to 0,598, więc jasność wynosi 59,8%. Wzór na nasycenie daje 91,2%.
Najwyższy jest kanał niebieski, dlatego rachunek odcienia zaczyna się od 240 stopni. Kanał czerwony jest słabszy od zielonego, więc od tej wartości odejmuje się 22,8 stopnia i odcień wynosi 217,2°. Cały kolor zapisany w CSS to hsl(217.2, 91.2%, 59.8%).
Pierwszy krok tego rachunku, czyli rozkład kodu na kanały, pokazuje osobno konwerter HEX na RGB. Jeśli masz wartości RGB zamiast kodu, od razu skorzystaj z konwertera RGB na HSL.
Czym jest model HSL?
HSL opisuje kolor trzema wartościami. Odcień (ang. hue) to kąt na kole barw, na którym 0° oznacza czerwień, 120° zieleń, a 240° niebieski. Nasycenie (saturation) mówi, ile w kolorze jest barwy, więc 0% daje szarość, a 100% barwę pełną. Jasność (lightness) wynosi 0% dla czerni i 100% dla bieli, a zwykły kolor ma jasność 50%[1].
Specyfikacja CSS wyjaśnia, do czego służy ten zapis. Z samych liczb RGB trudno odgadnąć, jak zrobić jaśniejszą wersję tej samej barwy, a w HSL wystarczy zmienić jedną wartość[1].
Model opisali George Joblove i Donald Greenberg w sierpniowym numerze czasopisma Computer Graphics z 1978 roku, obok modelu HSV Alvy’ego Raya Smitha[2]. Do CSS trafił w specyfikacji CSS Color Module Level 3, która 7 czerwca 2011 roku została rekomendacją W3C[3].
Jeśli kolor masz w innym zapisie, na przykład w OKLCH, Lab albo jako kod z Androida, konwerter kolorów pokaże go naraz we wszystkich zapisach.
Nazwane kolory CSS: kod HEX i zapis HSL
| Nazwa w CSS | Kod HEX | HSL w CSS | HSL w Office (0–255) |
|---|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) | 170, 0, 0 |
| white | #FFFFFF | hsl(0, 0%, 100%) | 170, 0, 255 |
| red | #FF0000 | hsl(0, 100%, 50%) | 0, 255, 128 |
| lime | #00FF00 | hsl(120, 100%, 50%) | 85, 255, 128 |
| blue | #0000FF | hsl(240, 100%, 50%) | 170, 255, 128 |
| yellow | #FFFF00 | hsl(60, 100%, 50%) | 42, 255, 128 |
| aqua | #00FFFF | hsl(180, 100%, 50%) | 127, 255, 128 |
| fuchsia | #FF00FF | hsl(300, 100%, 50%) | 213, 255, 128 |
| silver | #C0C0C0 | hsl(0, 0%, 75.3%) | 170, 0, 192 |
| gray | #808080 | hsl(0, 0%, 50.2%) | 170, 0, 128 |
| maroon | #800000 | hsl(0, 100%, 25.1%) | 0, 255, 64 |
| olive | #808000 | hsl(60, 100%, 25.1%) | 42, 255, 64 |
| green | #008000 | hsl(120, 100%, 25.1%) | 85, 255, 64 |
| purple | #800080 | hsl(300, 100%, 25.1%) | 213, 255, 64 |
| teal | #008080 | hsl(180, 100%, 25.1%) | 127, 255, 64 |
| navy | #000080 | hsl(240, 100%, 25.1%) | 170, 255, 64 |
| orange | #FFA500 | hsl(38.8, 100%, 50%) | 27, 255, 128 |
| rebeccapurple | #663399 | hsl(270, 50%, 40%) | 191, 128, 102 |
Czym różni się zapis HSL od HSB i od skali Office?
| Kod HEX | HSL w CSS | HSB | HSL w Office (0–255) |
|---|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | 217,2°; 76%; 96,5% | 154, 233, 153 |
| #EF4444 | hsl(0, 84.2%, 60.2%) | 0°; 71,5%; 93,7% | 0, 215, 154 |
| #22C55E | hsl(142.1, 70.6%, 45.3%) | 142,1°; 82,7%; 77,3% | 100, 180, 116 |
| #F59E0B | hsl(37.7, 92.1%, 50.2%) | 37,7°; 95,5%; 96,1% | 26, 235, 128 |
| #8B5CF6 | hsl(258.3, 89.5%, 66.3%) | 258,3°; 62,6%; 96,5% | 183, 228, 169 |
| #1E293B | hsl(217.2, 32.6%, 17.5%) | 217,2°; 49,2%; 23,1% | 154, 83, 45 |
| #FAFAFA | hsl(0, 0%, 98%) | 0°; 0%; 98% | 170, 0, 250 |
| #333333 | hsl(0, 0%, 20%) | 0°; 0%; 20% | 170, 0, 51 |
Ile cyfr po przecinku potrzebuje zapis HSL?
| Kod HEX | Wynik konwertera | Te same liczby zaokrąglone | Kolor z zaokrąglonego zapisu |
|---|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | hsl(217, 91%, 60%) | #3C83F6 |
| #EF4444 | hsl(0, 84.2%, 60.2%) | hsl(0, 84%, 60%) | #EF4343 |
| #22C55E | hsl(142.1, 70.6%, 45.3%) | hsl(142, 71%, 45%) | #21C45D |
| #F59E0B | hsl(37.7, 92.1%, 50.2%) | hsl(38, 92%, 50%) | #F59F0A |
| #8B5CF6 | hsl(258.3, 89.5%, 66.3%) | hsl(258, 90%, 66%) | #895AF6 |
| #1E293B | hsl(217.2, 32.6%, 17.5%) | hsl(217, 33%, 18%) | #1F2A3D |
style.color i odczytywaliśmy z getComputedStyle.Jakie zapisy kodu HEX obsługuje ten konwerter?
| Co wpisujesz | Co pokaże konwerter | Jak to czytamy |
|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | Kod z krzyżykiem, czyli dokładnie w tej postaci, w jakiej stoi w arkuszu stylów |
| 3b82f6 | hsl(217.2, 91.2%, 59.8%) | Krzyżyk nie jest potrzebny, a małe litery czytamy tak samo jak wielkie |
| #38F | hsl(215, 100%, 60%) | Skrót trzyznakowy rozwijamy sami: #38F czytamy jako #3388FF |
| #3B82F680 | hsla(217.2, 91.2%, 59.8%, 0.5) | Dwa ostatnie znaki to krycie — zabieramy je ze sobą i oddajemy wynik w postaci hsla |
| color: #3B82F6; | hsl(217.2, 91.2%, 59.8%) | Wklej całą linię z arkusza stylów albo z narzędzi przeglądarki, sam kod z niej wyjmiemy |
| "#3B82F6" | hsl(217.2, 91.2%, 59.8%) | Cudzysłowy z pliku JSON albo z JavaScriptu pomijamy i czytamy sam kod |
| ##3B82F6 | hsl(217.2, 91.2%, 59.8%) | Podwójny krzyżyk, który robi się przy wklejaniu obok już wpisanego, niczego nie psuje |
| #EF4444 | 0, 215, 154 | Przełącznik Zapis ustawiony na Microsoft Office podaje wynik w skali 0–255, takiej jak w oknie Kolory w Wordzie i Excelu |
Gdzie użyjesz wyniku HSL?
Arkusz stylów i przeglądarka pracują na zapisie CSS, a programy Office na skali 0–255, więc przed skopiowaniem wyniku ustaw odpowiedni zapis na przełączniku.
Arkusz stylów CSS
Wklej wynik jako wartość właściwości, na przykładcolor: hsl(217.2, 91.2%, 59.8%);. CSS przyjmuje też zapis ze spacjami i kryciem po ukośniku, czylihsl(217.2 91.2% 59.8% / 50%)[1].Figma
Zaznacz warstwę i kliknij próbkę wypełnienia na prawym pasku. Pod suwakami barwy i krycia rozwiń listę modeli i wybierz HSL[4]. Figma nie ma polskiej wersji interfejsu, więc sekcja wypełnienia nazywa się Fill.PowerPoint, Word i Excel
Zaznacz kształt, kliknij Wypełnienie kształtu i wybierz Więcej kolorów wypełnienia[6]. Na karcie Niestandardowe ustaw Model kolorów na HSL i wpisz trzy liczby z zapisu Office w pola Barwa, Nasycone i Lum.Chrome
Kliknij element prawym przyciskiem i wybierz Zbadaj. W panelu stylów kliknij próbkę koloru z wciśniętym klawiszem Shift, a na liście, która się otworzy, wybierzhsl(X X X / X)[7]. Wartość w panelu zmieni wtedy zapis na HSL.
Konwertuj inne jednostki na HSL
Konwertuj HEX na inne jednostki
Źródła
- CSS Color Module Level 4 — HSL Colors: hsl() and hsla() functions — W3C
- HSL and HSV — Wikipedia (wersja angielska)
- CSS Color Module Level 3 — HSL color values — W3C
- Update fills using the color picker — Figma Help Center
- Wybieranie kolorów w oknie dialogowym Kolory — Microsoft Support
- Zmienianie kolorów w polu tekstowym lub kształcie — Microsoft Support
- Sprawdzanie i debugowanie kolorów HD i innych niż HD za pomocą selektora kolorów — Chrome for Developers
Wszystkie wartości w tabelach wyliczyliśmy z definicji jednostek i sprawdziliśmy rachunkowo przed publikacją. Dane historyczne i nazwy lokalnych jednostek opieramy na źródłach wymienionych wyżej.
Ostatnia aktualizacja treści: · przygotował i sprawdził zespół Arteon
Najczęstsze pytania o przeliczanie HEX na HSL
Który zapis HSL wybrać w konwerterze?
Zapis CSS wybierz do arkusza stylów i do narzędzi deweloperskich przeglądarki. Zapis Microsoft Office (0–255) wybierz, gdy przepisujesz kolor do okna Kolory w Wordzie, Excelu albo PowerPoincie, bo tam każda z trzech wartości ma skalę od 0 do 255[5].
Dlaczego kolor wpisany w Office wraca z innym kodem HEX?
Okno Kolory liczy HSL na liczbach całkowitych w skali 0–255, więc część dokładności przepada. Sprawdziliśmy to w Office 2016: #3B82F6 daje tam 154, 233 i 153, a te trzy liczby wpisane z powrotem dają #3C83F6. Konwerter liczy tym samym algorytmem, dlatego pokaże Ci dokładnie ten kolor, który zobaczysz w programie.
Jak zapisać kolor HSL z przezroczystością?
Wpisz kod ośmioznakowy, na przykład #3B82F680. Konwerter poda wtedy hsla(217.2, 91.2%, 59.8%, 0.5), a czwarta liczba to krycie od 0 do 1[1]. Zapis Office podaje same trzy liczby: odcień, nasycenie i jasność.
Dlaczego żółty i niebieski mają w HSL tę samą jasność?
Jasność w HSL to średnia z najmocniejszego i najsłabszego kanału, więc nie odpowiada temu, jak jasny kolor widzi oko. Specyfikacja CSS podaje właśnie ten przykład: hsl(60 100% 50%) i hsl(240 100% 50%) mają po 50%, a żółty wygląda na wyraźnie jaśniejszy[1].
Jak zrobić jaśniejszy wariant koloru w HSL?
Zostaw odcień i nasycenie bez zmian, a podnieś samą jasność. Z hsl(217.2, 91.2%, 59.8%) przy jasności 70% wychodzi #6DA2F8. Gotową skalę jasności i przeliczenie dowolnego zapisu na kod podaje konwerter HSL na HEX.
Czy kolor zapisany w HSL ma taki sam kontrast jak w HEX?
Tak, bo oba zapisy opisują ten sam kolor, a kontrast zależy od koloru. Wynik z konwertera wklej do narzędzia do sprawdzania kontrastu i czytelności, które przyjmuje zapis HSL tak samo jak kod HEX.
Pomóż nam ulepszyć narzędzia
Masz pomysł na nową funkcję, widzisz błąd lub chcesz zaproponować inne narzędzie? Napisz do nas.