Konwersja koloru między HEX, RGB i HSL
Opublikowano · Zaktualizowano 2 min czytania
HEX, RGB i HSL to trzy sposoby zapisu tego samego koloru. Spotyka się je w programie graficznym, w arkuszu stylów, w narzędziu do makiet czy w księdze znaku i ciągle trzeba przechodzić od jednego do drugiego. Narzędzie pokazuje wszystkie trzy naraz i akceptuje popularne zapisy.
Trzy zapisy tego samego koloru
Eksploruj kolory domyślnie pokazuje trzy postacie, z podglądem koloru. HEX to ciąg sześciu cyfr i liter poprzedzony znakiem kratki. RGB podaje ilości czerwieni, zieleni i błękitu, od 0 do 255. HSL opisuje odcień w stopniach oraz nasycenie i jasność w procentach, co bywa bardziej intuicyjne przy rozjaśnianiu lub przyciemnianiu koloru. Dla zieleni #2F4A3F:
| Postać | Wynik |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
Trzy przyciski HEX, RGB i HSL w panelu ograniczają wynik do jednej postaci, wygodnej do skopiowania w niezmienionej formie.
Akceptowane zapisy
| Zapis | Przykład | Wynik w HEX |
|---|---|---|
| Krótki HEX | #fff | #ffffff |
| HEX z przezroczystością | #2F4A3F80 | #2f4a3f80 |
| RGB z przecinkami | rgb(47, 74, 63) | #2f4a3f |
| RGB ze spacjami | rgb(47 74 63) | #2f4a3f |
| RGB w procentach | rgb(100%, 0%, 0%) | #ff0000 |
| HSL ze spacjami | hsl(156 22% 24%) | #304b40 |
Nazwy kolorów, jak „red”, i wartości spoza zakresu od 0 do 255, jak rgb(300, 0, 0), są odrzucane z komunikatem wymieniającym akceptowane zapisy.
Przezroczystość
Przezroczystość zapisuje się w HEX ośmioma cyframi albo po ukośniku ze spacjami. Kolor rgb(47 74 63 / 50%) daje #2f4a3f80 w HEX i rgba(47, 74, 63, 0.5) w RGB. I odwrotnie, #2F4A3F80 daje krycie 0,502, bo 80 w systemie szesnastkowym to 128 z 255.
Dlaczego podróż tam i z powrotem zmienia wynik o jeden poziom
HSL jest pokazywane w liczbach całkowitych: odcień w stopniach, nasycenie i jasność w procentach. Powrót z HSL do HEX prowadzi więc do koloru sąsiedniego, niekoniecznie wyjściowego.
| Wyjście | Pokazane HSL | Powrót do HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
Różnica to jeden poziom na każdym kanale, niewidoczny dla oka. Dla tokenu projektowego lub marki należy zachować oryginalny HEX jako wzorzec i nie przechodzić przez HSL.
Szarości
Szarość ma zerowe nasycenie i odcień bez znaczenia: #808080 daje rgb(128, 128, 128) i hsl(0, 0%, 50%).
Czego narzędzie nie mierzy
Konwersja formatu nic nie mówi o czytelności. Narzędzie nie oblicza kontrastu między tekstem a jego tłem: należy sprawdzić go osobno przed publikacją. Przypadek kodu QR, w którym kontrast decyduje o odczycie, omówiono w Jak utworzyć kod QR, który skanuje się za pierwszym razem.
Do jakich zastosowań
Grafik przekazujący kolor programiście, osoba dostosowująca arkusz stylów, nauczyciel przygotowujący materiał: ten sam kolor zapisuje się na trzy sposoby, zależnie od narzędzia.
Sprawdzenie konwersji
- Wklej kolor w pole: podgląd powinien odpowiadać oczekiwaniom.
- Skopiuj postać, której wymaga system.
- Aby zachować dokładny kolor, zachowaj HEX lub RGB, a nie HSL.
Najczęściej zadawane pytania
- Jak zamienić HEX na RGB?
- Wklej kolor do narzędzia, które pokazuje trzy postacie naraz, na przykład #2F4A3F, rgb(47, 74, 63) i hsl(156, 22%, 24%).
- Dlaczego podróż przez HSL zmienia kolor o jeden poziom?
- HSL jest pokazywane w liczbach całkowitych. Zachowaj oryginalny HEX jako wzorzec.
- Jak zapisać przezroczystość?
- W HEX ośmioma cyframi albo w RGB z ukośnikiem, na przykład rgb(47 74 63 / 50%).
- Czy narzędzie sprawdza czytelność tekstu?
- Nie, nie oblicza kontrastu między tekstem a jego tłem: należy sprawdzić go osobno.