Konwerter kolorów HEX na RGB

HEX i RGB: dwa sposoby zapisu tego samego koloru

Każdy kolor widziany na ekranie jest mieszaniną trzech świateł: czerwonego, zielonego i niebieskiego. Włącz wszystkie trzy na maksimum, a otrzymasz biel; wyłącz je wszystkie, a otrzymasz czerń. HEX i RGB to po prostu dwie notacje opisujące, jak jasny powinien być każdy z tych trzech kanałów. Wskazują dokładnie ten sam kolor, więc dobry konwerter po prostu tłumaczy między tymi dwoma systemami zapisu, nie zmieniając nigdy samego odcienia. To właśnie robi to narzędzie, w całości w przeglądarce, pokazując jednocześnie podgląd koloru, byś mógł potwierdzić wynik własnymi oczami.

Jak odczytać kod hex

Kod koloru hex wygląda jak #1E90FF. Znak hash oznacza jedynie początek; sześć znaków po nim to trzy pary, zapisane według wzoru #RRGGBB. Pierwsza para to czerwony, druga to zielony, trzecia to niebieski. Każda para to liczba zapisana w systemie szesnastkowym, czyli podstawie 16, gdzie cyfry biegną od 0 do 9, a litery A, B, C, D, E, F oznaczają wartości od 10 do 15. Para może przyjmować wartości od 00 (kanał całkowicie wyłączony) do FF (całkowicie włączony). W zwykłym systemie dziesiętnym ten zakres to dokładnie 0–255, ta sama skala co w RGB. Przy 256 możliwych poziomach na kanał sześciocyfrowy zapis może opisać 16 777 216 odrębnych kolorów.

Konwersja w obu kierunkach na przykładzie

Aby przejść z HEX na RGB, podziel kod na trzy pary i zamień każdą z szesnastkowej na zwykły dziesiętny. Weźmy #1E90FF. Para czerwonego to 1E: to 1 pomnożone przez 16 plus 14 (E), co daje 30. Para zielonego 90 to 9 pomnożone przez 16 plus 0, co daje 144. Para niebieskiego FF to 15 pomnożone przez 16 plus 15, co daje 255. Zatem #1E90FF staje się rgb(30, 144, 255) — znajomy niebieski dodger blue.

W drugą stronę to ten sam proces w odwrotnej kolejności. Weź każdą liczbę RGB i zapisz ją jako dwie cyfry szesnastkowe. Czysta czerwień, rgb(255, 0, 0), daje FF, 00 i 00, które łączą się w #FF0000. Warto pamiętać: jeśli wartość jest mniejsza niż 16, nadal potrzebujesz obu cyfr, więc 5 zapisuje się jako 05, a nie jako samo 5. Konwerter obsługuje to uzupełnianie automatycznie, ale ludzie robią ten błąd podczas ręcznych obliczeń.

Gdzie używa się każdego formatu

HEX to codzienny język sieci. CSS, HTML i większość pisanego kodu sięga po kody hex, bo są zwięzłe i łatwe do skopiowania. RGB pojawia się głównie w narzędziach projektowych i do obróbki obrazów — Figma, Photoshop, Sketch i Illustrator zwykle pokazują suwaki lub pola w zakresie 0–255, a aplikacje do nagrywania ekranu lub wideo często oczekują RGB. Dlatego regularnie pobierasz kod hex z arkusza stylów i potrzebujesz jego odpowiednika RGB, by wpisać go w panel narzędzia projektowego, lub odwrotnie. Ten kurs tam i z powrotem to właśnie główny powód, dla którego konwerter jest przydatny. Jeśli chcesz zbudować cały zestaw pasujących odcieni zamiast tłumaczyć jeden, nasz generator palet kolorów to lepszy punkt startowy, a więcej narzędzi tego typu znajdziesz w narzędziach deweloperskich.

Alpha, przezroczystość i HSL

Obie notacje mają rozszerzoną formę dodającą przezroczystość. RGB staje się rgba(30, 144, 255, 0,5), gdzie czwarta wartość to alfa — 0 oznacza pełną przezroczystość, a 1 pełną nieprzezroczystość. HEX dodaje czwartą parę w tym samym celu, dając ośmiocyfrowy kod #RRGGBBAA; np. 80 to mniej więcej 50% krycia. Niektóre konwertery oferują też HSL (barwa, nasycenie, jasność), które opisuje kolor tak, jak zrobiłby to człowiek — wybierz barwę na kole, a następnie ustaw jej żywość i jasność. HSL to inny model myślenia, a nie inna paleta, więc może być bardziej intuicyjny, gdy chcesz rozjaśnić kolor lub uczynić go bardziej stonowanym bez żonglowania trzema oddzielnymi liczbami.

Najczęściej zadawane pytania