Przelicz zapis HSL na kod HEX

Ostatnia aktualizacja treści:

Wpisz wartości HSL, a kod HEX pojawi się w trakcie pisania: hsl(217.2, 91.2%, 59.8%) to #3B82F6. Pole przyjmuje zapis z przecinkami, ze spacjami i z kryciem po ukośniku. Po przestawieniu zapisu na Office wpiszesz trzy liczby 0–255 odczytane z okna Kolory.

Wpisz odcień w stopniach, a nasycenie i jasność w procentach. Wartości możesz rozdzielić przecinkami albo spacjami.

Zapis HSL

Zapis CSS pasuje do arkuszy stylów i narzędzi deweloperskich przeglądarki. Zapis 0–255 pokazuje okno Kolory w Wordzie, Excelu i PowerPoincie.

na

Jak przeliczyć HSL na HEX?

Zamień nasycenie i jasność na ułamki od 0 do 1, policz z nich trzy kanały RGB, a każdy kanał zapisz dwiema cyframi szesnastkowymi. Rachunek opiera się na chromie, czyli różnicy między najmocniejszym a najsłabszym kanałem koloru[1]. Jeśli liczby pochodzą z okna Kolory w Office, przestaw najpierw zapis na Microsoft Office (0–255). Gdy w polu jest już kolor, przełącznik przepisze go na ten sam kolor w nowym zapisie.


Wzór: C = (1 − |2L − 1|) × S, najmocniejszy kanał to L + C ÷ 2, a najsłabszy L − C ÷ 2.


Tak wygląda to dla zapisu hsl(217.2, 91.2%, 59.8%). Chroma wynosi tu 0,733. Najmocniejszy kanał ma więc 0,965, a najsłabszy 0,231. Odcień 217,2° leży między cyjanem a niebieskim. Dlatego najmocniejszy jest kanał niebieski, najsłabszy czerwony, a zielony wypada pomiędzy, na 0,510[1].


Po pomnożeniu przez 255 kanały dają 59, 130 i 246. Zapisane szesnastkowo to 3B, 82 i F6, czyli kod #3B82F6. Obie części tej drogi pokazują osobno konwerter HSL na RGB i konwerter RGB na HEX.

Co oznaczają odcień, nasycenie i jasność w zapisie HSL?

Pierwsza wartość to odcień, podawany jako kąt na kole barw. Kolory podstawowe ekranu leżą na nim co 120 stopni: czerwony przy 0°, zielony przy 120° i niebieski przy 240°, a 360° oznacza znów czerwień[2].


Druga wartość to nasycenie. Przy 100% kolor ma pełną barwę, a przy 0% staje się szarością, w której odcień nie ma już wpływu na wynik. Trzecia wartość to jasność. Przy 0% daje ona czerń, przy 100% biel, a pełny kolor danej barwy leży przy 50%[2].


CSS przyjmuje odcień także w innych jednostkach kąta. Pełny obrót to 360 stopni, 400 gradów, 2π radianów albo jeden obrót zapisany jako 1turn[3]. Konwerter czyta każdą z tych postaci, więc 0.25turn daje ten sam kolor co 90°.


Model HSL opisano w 1978 roku, a już w 1979 roku firma Tektronix wprowadziła terminale graficzne, w których kolor ustawiało się właśnie w HSL[1].


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.

Jak zrobić jaśniejszy i ciemniejszy wariant koloru w HSL?

Wystarczy zmienić samą jasność, a odcień i nasycenie zostawić bez zmian. Tabela pokazuje dziewięć stopni jasności dla koloru hsl(217.2, 91.2%, 59.8%) i kody HEX, które z nich wychodzą.
JasnośćZapis HSLKod HEX
10%hsl(217.2, 91.2%, 10%)#021431
20%hsl(217.2, 91.2%, 20%)#042862
30%hsl(217.2, 91.2%, 30%)#073C92
40%hsl(217.2, 91.2%, 40%)#0950C3
50%hsl(217.2, 91.2%, 50%)#0B64F4
60%hsl(217.2, 91.2%, 60%)#3C83F6
70%hsl(217.2, 91.2%, 70%)#6DA2F8
80%hsl(217.2, 91.2%, 80%)#9DC1FB
90%hsl(217.2, 91.2%, 90%)#CEE0FD
Stopień 60% daje #3C83F6. Kolor wyjściowy #3B82F6 ma jasność 59,8%, czyli o 0,2 punktu procentowego niższą.

Jakie kody HEX mają barwy co 30 stopni na kole HSL?

Specyfikacja CSS pokazuje paletę HSL w krokach co 30°, od czerwieni przez żółcie, zielenie, cyjany i niebieskie po magenty[2]. Wszystkie wiersze mają nasycenie 100% i jasność 50%.
OdcieńBarwy w specyfikacji CSSZapis HSLKod HEX
0°czerwieniehsl(0, 100%, 50%)#FF0000
30°czerwono-żółte, czyli pomarańczehsl(30, 100%, 50%)#FF8000
60°żółciehsl(60, 100%, 50%)#FFFF00
90°żółto-zielonehsl(90, 100%, 50%)#80FF00
120°zieleniehsl(120, 100%, 50%)#00FF00
150°zielono-cyjanowehsl(150, 100%, 50%)#00FF80
180°cyjanyhsl(180, 100%, 50%)#00FFFF
210°cyjanowo-niebieskiehsl(210, 100%, 50%)#0080FF
240°niebieskiehsl(240, 100%, 50%)#0000FF
270°niebiesko-magentowehsl(270, 100%, 50%)#8000FF
300°magentyhsl(300, 100%, 50%)#FF00FF
330°magentowo-czerwonehsl(330, 100%, 50%)#FF0080
Barwy przy 0°, 120° i 240° to kolory podstawowe ekranu, więc ich kody mają jeden kanał pełny i dwa zerowe. W krokach pośrednich, na przykład przy 30° i 90°, jeden z kanałów ma połowę skali, czyli 80 w zapisie szesnastkowym.

Jaki kod HEX dają liczby z okna Kolory w Office?

Okno Kolory w Office podaje odcień, nasycenie i jasność w skali od 0 do 255[4]. Wpisaliśmy takie liczby w Office 2016 i odczytaliśmy wynik z tego samego okna, a 40 kombinacji wyszło w konwerterze identycznie jak w programie. Tabela podaje dziesięć z nich.
Wartości w OfficeKod HEXTen sam kolor w CSS
0, 255, 128#FF0101hsl(0, 100%, 50.2%)
42, 255, 128#FFFF01hsl(60, 100%, 50.2%)
85, 255, 128#01FF01hsl(120, 100%, 50.2%)
127, 255, 128#01FFFFhsl(180, 100%, 50.2%)
170, 255, 128#0101FFhsl(240, 100%, 50.2%)
213, 255, 128#FF01FFhsl(300, 100%, 50.2%)
154, 233, 153#3C83F6hsl(217.1, 91.2%, 60%)
170, 0, 128#808080hsl(0, 0%, 50.2%)
0, 0, 255#FFFFFFhsl(0, 0%, 100%)
0, 0, 0#000000hsl(0, 0%, 0%)
Pełna czerwień wpisana jako 0, 255 i 128 daje #FF0101. Jasność 128 to w skali do 255 odrobinę więcej niż połowa, więc dwa słabsze kanały mają wartość 1.

Jakie zapisy koloru w HSL obsługuje ten konwerter?

Każdy z tych zapisów pole przyjmuje i przelicza, więc nie trzeba niczego poprawiać przed wklejeniem. Tabela pokazuje, co konwerter robi z każdym z nich, a wyniki policzył on sam.
Co wpisujeszCo pokaże konwerterJak to czytamy
hsl(217.2, 91.2%, 59.8%)#3B82F6Starszy zapis CSS z przecinkami czytamy tak samo jak nowy
hsl(217.2 91.2% 59.8%)#3B82F6Nowszy zapis CSS ze spacjami przyjmujemy bez żadnej zamiany
217,2 91,2 59,8#3B82F6Same liczby z przecinkiem dziesiętnym, bez nawiasów i bez procentów — rozpoznajemy je po kolejności
H: 217.2 S: 91.2% L: 59.8%#3B82F6Litery kanałów z dwukropkiem, tak jak zapisuje je księga znaku, pomijamy i bierzemy liczby
hsl(217.2 91.2% 59.8% / 50%)#3B82F680Krycie podane po ukośniku dokładamy do wyniku jako dwa ostatnie znaki kodu
180°, 100%, 50%#00FFFFZnak stopnia przy odcieniu nie przeszkadza, czytamy samą liczbę
color: hsl(217, 91%, 60%);#3C83F6Wklej całą linię z arkusza stylów, sam kolor z niej wyjmiemy
154, 233, 153#3C83F6Trzy liczby w skali 0–255, czyli zapis Microsoft Office z okna Kolory w Wordzie i Excelu — przy tym ustawieniu przełącznika Zapis czytamy je tak samo jak procenty

Skąd wziąć wartości HSL i gdzie wkleić kod HEX?

Dwa pierwsze miejsca podają wartości HSL do przeliczenia, a dwa kolejne przyjmują gotowy kod HEX.

  1. Okno Kolory w Office

    Kliknij Wypełnienie kształtu i wybierz Więcej kolorów wypełnienia[5]. Na karcie Niestandardowe ustaw Model kolorów na HSL i przepisz liczby z pól Barwa, Nasycone i Lum. W konwerterze ustaw zapis Microsoft Office (0–255).

  2. Arkusz stylów CSS

    Wyszukaj w pliku funkcję hsl( albo hsla( i skopiuj całą wartość razem z nawiasem. Konwerter przyjmie ją z przecinkami, ze spacjami i z kryciem po ukośniku.

  3. Dokumenty, Arkusze i Prezentacje Google

    Kliknij na pasku narzędzi Kolor tekstu albo Kolor wypełnienia. W sekcji Niestandardowy wybierz Dodaj kolor niestandardowy, wklej kod HEX i kliknij OK[6].

  4. Figma

    Kliknij próbkę wypełnienia na prawym pasku. Na liście modeli pod suwakami ustaw Hex[7] i wklej kod w pole obok.

Konwertuj inne jednostki na HEX

RGB na HEXCMYK na HEX

Konwertuj HSL na inne jednostki

HSL na RGB

Źródła

  1. HSL and HSV — Wikipedia (wersja angielska)
  2. CSS Color Module Level 4 — HSL Colors: hsl() and hsla() functions — W3C
  3. CSS Values and Units Module Level 4 — Angle Units — W3C
  4. Wybieranie kolorów w oknie dialogowym Kolory — Microsoft Support
  5. Zmienianie kolorów w polu tekstowym lub kształcie — Microsoft Support
  6. Zmienianie koloru tekstu, obiektów i tła — Edytory Dokumentów Google — Pomoc
  7. Update fills using the color picker — Figma Help Center

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 HSL na HEX

Dlaczego hsl(217, 91%, 60%) daje inny kod niż #3B82F6?

Zapis z liczbami całkowitymi opisuje kolor z mniejszą dokładnością. hsl(217, 91%, 60%) daje #3C83F6, a kolor #3B82F6 ma zapis hsl(217.2, 91.2%, 59.8%). Ile kolorów zmienia takie zaokrąglenie, pokazuje tabela w konwerterze HEX na HSL.

Jak wpisać kolor HSL z przezroczystością?

Dopisz krycie po ukośniku, na przykład hsl(217.2 91.2% 59.8% / 50%), albo podaj je jako czwartą wartość funkcji hsla()[2]. Konwerter poda wtedy kod ośmioznakowy #3B82F680, w którym dwie ostatnie cyfry opisują krycie.

Co się stanie, gdy wpiszę nasycenie spoza zakresu 0–100%?

Konwerter przytnie je do granicy zakresu, więc 150% policzy jako 100%. Wartość ujemną policzy jako 0%, tak jak nakazuje specyfikacja CSS[2]. Tak samo działa to przy jasności.

Czy odcień 360° to ten sam kolor co 0°?

Tak. Odcień jest kątem, więc 360° oznacza tę samą czerwień co 0°[2]. Z tego samego powodu 480° daje zieleń, identyczną z tą przy 120°, a −120° niebieski, jak przy 240°.

Jak zamienić HSL na wartości RGB?

Wpisz zapis do konwertera HSL na RGB, który poda trzy kanały od 0 do 255. Dla hsl(217.2, 91.2%, 59.8%) wyjdzie rgb(59, 130, 246).

Jak przenieść kolor z okna Office do arkusza stylów?

Ustaw zapis Microsoft Office (0–255) i wpisz trzy liczby z okna Kolory. Kod HEX z pola wyniku możesz od razu wkleić do CSS, a zapis w stopniach i procentach dla tego samego koloru poda konwerter HEX na HSL.

Zrzut ekranu darmowego narzędzia Arteon: Przelicz zapis HSL na kod HEX

Pomóż nam ulepszyć narzędzia

Masz pomysł na nową funkcję, widzisz błąd lub chcesz zaproponować inne narzędzie? Napisz do nas.