Przelicz wartości RGB na zapis HSL

Ostatnia aktualizacja treści:

Wpisz trzy kanały RGB, a zapis HSL pojawi się w trakcie pisania: rgb(59, 130, 246) to hsl(217.2, 91.2%, 59.8%). Pole przyjmuje liczby z nawiasem i bez, a kanały zapisane ułamkami od 0 do 1 rozpozna samo. Przełącznikiem wybierzesz zapis CSS albo skalę Office.

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ć RGB na HSL?

Podziel każdy kanał przez 255 i znajdź wśród nich największy oraz najmniejszy. Jasność to średnia tych dwóch wartości. Nasycenie wynika z różnicy między nimi, a odcień z tego, który kanał jest najmocniejszy[1].


Wzór: Δ = max − min, L = (max + min) ÷ 2, S = Δ ÷ (1 − |2L − 1|), a gdy najmocniejszy jest kanał czerwony, H = 60° × ((G − B) ÷ Δ).


Weźmy rgb(239, 68, 68). Po podzieleniu przez 255 kanał czerwony ma 0,937, a zielony i niebieski po 0,267. Średnia największego i najmniejszego to 0,602, więc jasność wynosi 60,2%. Różnica między nimi to 0,671, a wzór na nasycenie daje z niej 84,2%.


Kanały zielony i niebieski są tu równe, więc odcień wynosi dokładnie 0°. Cały kolor to hsl(0, 84.2%, 60.2%). Gdy najmocniejszy jest kanał zielony, odcień liczy się od 120°, dlatego rgb(34, 197, 94) daje hsl(142.1, 70.6%, 45.3%).


Kod HEX tych samych kolorów poda konwerter RGB na HEX, a z kodu od razu do HSL przeliczy konwerter HEX na HSL.

Czym zapis HSL różni się od RGB?

RGB opisuje kolor ilością światła czerwonego, zielonego i niebieskiego, z której ekran składa punkt. HSL opisuje ten sam kolor przez barwę, ilość koloru i jasność. Specyfikacja CSS zauważa, że z liczb RGB trudno odgadnąć, jak zmienić kolor na jaśniejszy w tej samej barwie[1].


Oba zapisy opisują tę samą przestrzeń sRGB. Kolor podany w CSS jako HSL przeglądarka zamienia na sRGB[1], dlatego każdy kolor HSL da się zapisać trzema kanałami RGB i odwrotnie.


Autorzy modelu, George Joblove i Donald Greenberg, nazwali w 1978 roku jego wymiary inaczej niż dzisiejszy CSS: odcień, względna chroma i intensywność[2]. Specyfikacja CSS nazywa je hue, saturation i lightness, czyli odcień, nasycenie i jasność[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.

Jaki zapis HSL mają szarości RGB?

Gdy wszystkie trzy kanały są równe, kolor jest szary i ma nasycenie 0%. O szarości decyduje wtedy tylko jasność, a odcień nie wpływa na wynik[1].
Wartości RGBKod HEXHSL w CSSHSL w Office (0–255)
0, 0, 0#000000hsl(0, 0%, 0%)170, 0, 0
32, 32, 32#202020hsl(0, 0%, 12.5%)170, 0, 32
64, 64, 64#404040hsl(0, 0%, 25.1%)170, 0, 64
96, 96, 96#606060hsl(0, 0%, 37.6%)170, 0, 96
128, 128, 128#808080hsl(0, 0%, 50.2%)170, 0, 128
160, 160, 160#A0A0A0hsl(0, 0%, 62.7%)170, 0, 160
192, 192, 192#C0C0C0hsl(0, 0%, 75.3%)170, 0, 192
224, 224, 224#E0E0E0hsl(0, 0%, 87.8%)170, 0, 224
255, 255, 255#FFFFFFhsl(0, 0%, 100%)170, 0, 255
W CSS jasność szarości to wartość kanału podzielona przez 255. Okno Kolory w Office liczy w tej samej skali co kanały RGB, więc dla szarości trzecia liczba jest równa wartości kanału.

Jak zapisać kolor RGB z kryciem w HSL?

Krycie ma w obu zapisach tę samą wartość: czwarta liczba w rgba() jest czwartą liczbą w hsla(). Tabela pokazuje siedem wartości krycia dla koloru rgb(59, 130, 246) razem z kodem HEX, w którym krycie zajmuje dwie ostatnie cyfry.
KrycieZapis rgbaZapis hslaKod HEX
100%rgba(59, 130, 246, 1)hsl(217.2, 91.2%, 59.8%)#3B82F6
90%rgba(59, 130, 246, 0.9)hsla(217.2, 91.2%, 59.8%, 0.9)#3B82F6E6
75%rgba(59, 130, 246, 0.75)hsla(217.2, 91.2%, 59.8%, 0.75)#3B82F6BF
50%rgba(59, 130, 246, 0.5)hsla(217.2, 91.2%, 59.8%, 0.5)#3B82F680
25%rgba(59, 130, 246, 0.25)hsla(217.2, 91.2%, 59.8%, 0.25)#3B82F640
10%rgba(59, 130, 246, 0.1)hsla(217.2, 91.2%, 59.8%, 0.1)#3B82F61A
0%rgba(59, 130, 246, 0)hsla(217.2, 91.2%, 59.8%, 0)#3B82F600
Przy kryciu równym 1 konwerter podaje zwykły zapis hsl(), bo pełne krycie jest wartością domyślną.

Jak przeliczyć na HSL kanały zapisane ułamkami od 0 do 1?

Część bibliotek zapisuje kanały ułamkami, na przykład moduł colorsys w Pythonie podaje wszystkie wartości w zakresie od 0 do 1[3]. Konwerter rozpozna taki zapis, gdy przynajmniej jedna z trzech liczb ma część ułamkową.
Kanały 0–1HSL w CSSHSL w Office (0–255)
0.2314, 0.5098, 0.9647hsl(217.2, 91.2%, 59.8%)154, 233, 153
0.1333, 0.7725, 0.3686hsl(142.1, 70.6%, 45.3%)100, 180, 116
0.5, 0.5, 0.5hsl(0, 0%, 50.2%)170, 0, 128
1.0, 0, 0hsl(0, 100%, 50%)0, 255, 128
Czerwień zapisana jako 1, 0, 0 ma same liczby całkowite, więc konwerter policzy ją w skali 0–255. Zapis 1.0, 0, 0 wskazuje ułamki i daje pełną czerwień.

Jakie zapisy wartości RGB 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
rgb(59, 130, 246)hsl(217.2, 91.2%, 59.8%)Zapis CSS z nawiasem przyjmujemy bez zmian
59 130 246hsl(217.2, 91.2%, 59.8%)Trzy liczby rozdzielone spacjami wystarczą, nawiasy i przecinki nie są potrzebne
R: 59, G: 130, B: 246hsl(217.2, 91.2%, 59.8%)Litery kanałów, tak jak zapisuje je księga znaku, pomijamy i bierzemy same liczby
rgb(23.1%, 51%, 96.5%)hsl(217.2, 91.2%, 59.8%)Kanały podane w procentach przeliczamy na skalę 0–255 sami
rgba(59, 130, 246, 0,5)hsla(217.2, 91.2%, 59.8%, 0.5)Krycie zapisane z przecinkiem dziesiętnym przenosimy do wyniku w postaci hsla
0,2314 0,5098 0,9647hsl(217.2, 91.2%, 59.8%)Kanały zapisane jako ułamki od 0 do 1 poznajemy po przecinku i przeliczamy na skalę 0–255
[59, 130, 246]hsl(217.2, 91.2%, 59.8%)Tablicę NumPy, którą wypisuje Python, czytamy razem z nawiasem kwadratowym
background-color: rgb(59, 130, 246);hsl(217.2, 91.2%, 59.8%)Wklej całą linię z arkusza stylów, sam kolor z niej wyjmiemy
300, -20, 128hsl(329.9, 100%, 50%)Wartości spoza zakresu przycinamy tak samo jak przeglądarka: 300 do 255, a −20 do 0

Jak przeliczyć RGB na HSL w kodzie, w CSS i w Office?

Python, CSS i Office potrafią przeliczyć RGB na HSL same. Każde z nich zapisuje wynik w innej postaci, więc przy każdym podajemy, jak go odczytać.

  1. Python

    Funkcja colorsys.rgb_to_hls(r, g, b) przyjmuje kanały od 0 do 1 i zwraca odcień, jasność i nasycenie w tej kolejności[3]. Dla #3B82F6 odcień wynosi 0,6034. To ułamek pełnego obrotu, więc po pomnożeniu przez 360 daje 217,2°.

  2. CSS

    W zapisie względnym hsl(from rgb(59 130 246) h s calc(l + 10)) przeglądarka sama przelicza RGB na HSL i podnosi jasność o 10 punktów[4]. Sprawdziliśmy ten zapis w Chromium 151.

  3. Okno Kolory w Office

    Wpisz kanały przy modelu RGB, a potem przełącz Model kolorów na HSL. Okno pokaże odcień, nasycenie i jasność w skali od 0 do 255[5], czyli te same liczby, które konwerter podaje w zapisie Microsoft Office (0–255).

Konwertuj inne jednostki na HSL

HEX na HSL

Konwertuj RGB na inne jednostki

RGB na HEXRGB na CMYKRGB na HSV

Źródła

  1. CSS Color Module Level 4 — Converting sRGB Colors to HSL — W3C
  2. HSL and HSV — Wikipedia (wersja angielska)
  3. colorsys — Conversions between color systems — Python Software Foundation
  4. Using relative colors — MDN Web Docs
  5. Wybieranie kolorów w oknie dialogowym Kolory — Microsoft Support

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

Czy mogę wpisać kanały RGB w procentach?

Tak. Konwerter przelicza procenty na skalę 0–255, więc rgb(23.1%, 51%, 96.5%) daje ten sam wynik co rgb(59, 130, 246), czyli hsl(217.2, 91.2%, 59.8%).

Dlaczego getComputedStyle zwraca rgb, choć w CSS wpisałem hsl?

Przeglądarka zamienia kolor HSL na sRGB już przy obliczaniu stylu, a wartość obliczoną zapisuje w postaci rgb() albo rgba()[1]. Zapis HSL zobaczysz z powrotem, gdy przeliczysz ten wynik tutaj.

Dlaczego colorsys w Pythonie podaje inną kolejność niż CSS?

Moduł colorsys nazywa ten model HLS i zwraca jasność przed nasyceniem[3]. Wartości (0.6034, 0.598, 0.912) to więc odcień 217,2°, jasność 59,8% i nasycenie 91,2%, zapisane w CSS jako hsl(217.2, 91.2%, 59.8%).

Jak przeliczyć HSL z powrotem na RGB?

Wpisz zapis do konwertera HSL na RGB. Przycisk Zmień kolejność przeniesie Cię tam razem z bieżącym wynikiem.

Czy szary kolor ma w HSL jakiś odcień?

Przy nasyceniu 0% odcień nie zmienia koloru[1], więc konwerter podaje w zapisie CSS zero. Okno Kolory w Office wpisuje w to miejsce 170, a kolor wychodzi ten sam.

Jak sprawdzić, czy kolor RGB jest czytelny na tle?

Wklej wartości RGB albo wynik HSL do narzędzia do sprawdzania kontrastu i czytelności. Poda ono współczynnik kontrastu razem z progami WCAG dla tekstu.

Zrzut ekranu darmowego narzędzia Arteon: Przelicz wartości RGB na zapis HSL

Pomóż nam ulepszyć narzędzia

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