Przelicz zapis HSL na wartości RGB
Wpisz wartości HSL, a kanały RGB pojawią się w trakcie pisania: hsl(217.2, 91.2%, 59.8%) to rgb(59, 130, 246). Wynik ma zawsze skalę od 0 do 255, a krycie z zapisu hsla trafia do rgba. Po przestawieniu zapisu na Office wpiszesz liczby z okna Kolory.
Wpisz odcień w stopniach, a nasycenie i jasność w procentach. Wartości możesz rozdzielić przecinkami albo spacjami.
Jak przeliczyć HSL na RGB?
Policz każdy kanał osobno z jednego wzoru, który podaje specyfikacja CSS. We wzorze kanał czerwony ma liczbę n równą 0, zielony 8, a niebieski 4[1]. Nasycenie i jasność wpisujesz jako ułamki od 0 do 1.
Wzór: k = (n + H ÷ 30) mod 12, a = S × min(L, 1 − L), kanał = L − a × max(−1, min(k − 3, 9 − k, 1)).
Weźmy hsl(0, 84.2%, 60.2%). Jasność 0,602 i nasycenie 0,842 dają a równe 0,335. Dla kanału czerwonego k wynosi 0, więc nawias daje −1, a kanał ma 0,602 + 0,335, czyli 0,937.
Dla kanałów zielonego i niebieskiego nawias daje 1. Oba mają więc 0,602 − 0,335, czyli 0,267. Po pomnożeniu przez 255 i zaokrągleniu wychodzi rgb(239, 68, 68). Taki sam wynik podaje przeglądarka Chromium 151, w której to sprawdziliśmy.
Kod HEX tego koloru poda konwerter HSL na HEX. Z RGB z powrotem do HSL przeliczy konwerter RGB na HSL.
Jak zapis HSL przekłada się na kanały RGB?
Od odcienia zależy barwa na kole kolorów, czyli to, które kanały RGB są mocne, a które słabe. Przy 0° najmocniejszy jest kanał czerwony, przy 120° zielony, a przy 240° niebieski[1].
Nasycenie mówi, jak bardzo kanały różnią się od siebie. Przy 0% wszystkie trzy są równe i kolor jest szary. Od jasności zależy poziom wszystkich kanałów naraz: przy 0% każdy ma 0, przy 100% każdy ma 255, a przy 50% kolor ma swoją zwykłą postać[1].
CSS zna dwie składnie tego zapisu. W starszej wartości rozdzielają przecinki, a nasycenie i jasność muszą mieć znak procentu. W nowszej wartości rozdzielają spacje, krycie stoi po ukośniku, a nasycenie i jasność można podać bez procentu[1]. Konwerter czyta obie, więc hsl(217.2 91.2 59.8) daje ten sam wynik co hsl(217.2, 91.2%, 59.8%).
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 nasycenie zmienia wartości RGB?
hsl(217.2, 91.2%, 59.8%) spada co 10 punktów, od 100% do 0%. Odcień i jasność zostają bez zmian, więc widać, jak kanały zbliżają się do siebie.| Nasycenie | Zapis HSL | Wartości RGB |
|---|---|---|
| 100% | hsl(217.2, 100%, 59.8%) | 50, 128, 255 |
| 90% | hsl(217.2, 90%, 59.8%) | 60, 130, 245 |
| 80% | hsl(217.2, 80%, 59.8%) | 70, 133, 234 |
| 70% | hsl(217.2, 70%, 59.8%) | 81, 135, 224 |
| 60% | hsl(217.2, 60%, 59.8%) | 91, 138, 214 |
| 50% | hsl(217.2, 50%, 59.8%) | 101, 140, 204 |
| 40% | hsl(217.2, 40%, 59.8%) | 111, 143, 193 |
| 30% | hsl(217.2, 30%, 59.8%) | 122, 145, 183 |
| 20% | hsl(217.2, 20%, 59.8%) | 132, 148, 173 |
| 10% | hsl(217.2, 10%, 59.8%) | 142, 150, 163 |
| 0% | hsl(217.2, 0%, 59.8%) | 152, 152, 152 |
Jak zapisać odcień w stopniach, gradach, radianach i obrotach?
| Zapis w CSS | Kąt w stopniach | Wartości RGB |
|---|---|---|
| hsl(90deg, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(90, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(100grad, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(0.25turn, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(1.5708rad, 100%, 50%) | 90,0002° | 127, 255, 0 |
| hsl(1.570796rad, 100%, 50%) | 89,99998° | 128, 255, 0 |
Jakie zapisy koloru w HSL obsługuje ten konwerter?
| Co wpisujesz | Co pokaże konwerter | Jak to czytamy |
|---|---|---|
| hsl(217.2, 91.2%, 59.8%) | rgb(59, 130, 246) | Zapis CSS z przecinkami przyjmujemy bez zmian |
| H 217.2 S 91.2 L 59.8 | rgb(59, 130, 246) | Litery kanałów i brak procentów nie przeszkadzają, liczby czytamy po kolejności |
| hsla(217,2, 91,2%, 59,8%, 0,5) | rgba(59, 130, 246, 0.5) | Przecinek dziesiętny działa też w kryciu, nie trzeba go zamieniać na kropkę |
| hsl(0.25turn, 100%, 50%) | rgb(128, 255, 0) | Odcień podany w obrotach przeliczamy na stopnie: 0.25turn to dla nas 90° |
| hsl(-120, 100%, 50%) | rgb(0, 0, 255) | Ujemny odcień liczymy od końca koła barw, tak samo jak robi to przeglądarka |
| hsl(0, 150%, 50%) | rgb(255, 0, 0) | Nasycenie powyżej 100% przycinamy do 100%, tak samo jak robi to przeglądarka |
| color: hsl(217, 91%, 60%); | rgb(60, 131, 246) | Wklej całą linię z arkusza stylów, sam kolor z niej wyjmiemy |
| 154, 233, 153 | rgb(60, 131, 246) | Trzy 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 |
Gdzie wpiszesz wynik RGB?
Dokumenty Google i okno Office przyjmują wartości RGB wprost z konwertera, a w kodzie wynik bywa potrzebny jako ułamki.
Dokumenty, Arkusze i Prezentacje Google
Kliknij na pasku narzędzi Kolor tekstu albo Kolor wypełnienia, a w sekcji Niestandardowy wybierz Dodaj kolor niestandardowy. W oknie wpiszesz kod Hex albo wartości RGB[3].Okno Kolory w Office
Na karcie Niestandardowe zostaw Model kolorów ustawiony na RGB i wpisz trzy liczby w pola Czerwony, Zielony i Niebieski[4]. W naszym pomiarze w Office 2016 pola przyjmowały wartości od 0 do 255.Python
Funkcjacolorsys.hls_to_rgb(h, l, s)przyjmuje jasność przed nasyceniem i wszystkie trzy wartości jako ułamki od 0 do 1[5]. Wynik też ma ułamki, więc do skali konwertera pomnóż każdy kanał przez 255.JavaScript
Specyfikacja CSS podaje gotową funkcjęhslToRgb(hue, sat, light), która przyjmuje odcień w stopniach, a nasycenie i jasność od 0 do 100[1]. Zwraca kanały od 0 do 1, a konwerter liczy tym samym wzorem.
Konwertuj inne jednostki na RGB
Konwertuj HSL na inne jednostki
Źródła
- CSS Color Module Level 4 — Converting HSL Colors to sRGB — W3C
- CSS Values and Units Module Level 4 — Angle Units — W3C
- Zmienianie koloru tekstu, obiektów i tła — Edytory Dokumentów Google — Pomoc
- Wybieranie kolorów w oknie dialogowym Kolory — Microsoft Support
- colorsys — Conversions between color systems — Python Software Foundation
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 RGB
Dlaczego wynik RGB przeliczony z powrotem daje trochę inny zapis HSL?
Kanały RGB mają tylko liczby całkowite, więc kilka zapisów HSL daje ten sam kolor. hsl(217, 91%, 60%) daje rgb(60, 131, 246), a ten kolor przeliczony z powrotem to hsl(217.1, 91.2%, 60%). Oba zapisy opisują na ekranie identyczny kolor.
Jak przeliczyć na RGB liczby z okna Kolory w Office?
Przestaw zapis na Microsoft Office (0–255) i wpisz trzy liczby z pól okna. Wartości 154, 233 i 153 dadzą rgb(60, 131, 246), bo okno liczy HSL w skali od 0 do 255[4] i część dokładności przepada. Liczby wpisz dopiero po przestawieniu, bo kolor, który już stoi w polu, przełącznik przepisuje na ten sam kolor w nowym zapisie.
Czy mogę wpisać nasycenie i jasność bez znaku procentu?
Tak. Konwerter czyta same liczby tak jak nowsza składnia CSS, więc 217.2 91.2 59.8 daje rgb(59, 130, 246)[1].
Jak dostać kanały RGB jako ułamki od 0 do 1?
Przelicz zapis HSL na kod w konwerterze HSL na HEX, a kod wpisz do konwertera HEX na RGB z przełącznikiem ustawionym na 0–1. Dla hsl(217.2, 91.2%, 59.8%) wyjdzie 0,2314, 0,5098 i 0,9647.
Czy przeglądarka pokaże ten sam kolor co konwerter?
Tak. Sprawdziliśmy to w Chromium 151 na wszystkich 16 777 216 kolorach: zapis HSL podany przez nasze konwertery dał w przeglądarce dokładnie te kanały RGB, od których zaczynaliśmy.
Jak ustawić kolor z przezroczystością w RGB?
Dopisz krycie do zapisu HSL, na przykład hsla(217.2, 91.2%, 59.8%, 0.5). Konwerter poda rgba(59, 130, 246, 0.5), a czwarta liczba zostanie ta sama.
Pomóż nam ulepszyć narzędzia
Masz pomysł na nową funkcję, widzisz błąd lub chcesz zaproponować inne narzędzie? Napisz do nas.