Konwerter HEX na RGB

Konwersja HEX na RGB – jak to działa?

Każdy kolor wyświetlany na ekranie to suma trzech składowych: czerwonej (R), zielonej (G) i niebieskiej (B), każda o wartości od 0 do 255. Zapis szesnastkowy (HEX) jest po prostu inną, bardziej zwartą postacią tych samych liczb. Tam gdzie RGB podaje rgb(79, 70, 229), HEX skraca to do #4f46e5. Przeliczenie odbywa się przez zamianę każdej pary cyfr szesnastkowych na liczbę dziesiętną – to proste mnożenie przez potęgi szesnastu.

Dla kodu #4f46e5:

• para 4f to w systemie dziesiętnym 4 × 16 + 15 = 79,
• para 46 to 4 × 16 + 6 = 70,
• para e5 to 14 × 16 + 5 = 229.

Wynik to zatem 79, 70, 229, czyli dokładnie te same wartości co w formacie RGB. Ponieważ konwersja jest deterministyczna i oparta na arytmetyce liczb całkowitych, nie występuje żadne zaokrąglanie – wynik jest zawsze dokładny i odwracalny. Możesz wpisać #4f46e5 i natychmiast dostać RGB, ale możesz też zrobić to w drugą stronę, bo to te same dane.

Strona akceptuje zarówno pełne sześciocyfrowe kody (#RRGGBB), jak i trójznakowe skróty (#RGB). W przypadku skrótu każda cyfra jest automatycznie podwajana: #abc staje się #aabbcc, a dopiero potem następuje konwersja. Znak # jest opcjonalny – możesz wpisać 4f46e5 bez niego i konwersja zadziała tak samo.

Zasady i przypadki brzegowe

Narzędzie działa w oparciu o kilka konkretnych reguł, które wynikają z samej natury zapisu szesnastkowego i standardów używanych w CSS.

Akceptowane formaty wejściowe:

• #RRGGBB – pełny kod, np. #1E90FF
• #RGB – skrót trzyliterowy, np. #abc
• RRGGBB – bez znaku #
• RGB – skrót bez znaku #

Co się dzieje po wpisaniu kodu:

1. Jeśli kod ma trzy cyfry/znaki po # (lub sam trzy znaki), jest rozwijany do sześciu poprzez podwojenie każdego znaku.
2. Następnie każda para szesnastkowa jest konwertowana na liczbę całkowitą od 0 do 255.
3. Wynik RGB jest wyświetlany jako trzy liczby oddzielone przecinkami.
4. Automatycznie aktualizują się również pola HSL, HSV, CMYK i LAB.

Nieobsługiwane sytuacje:

• Ośmiocyfrowe kody HEX z kanałem alfa (np. #4f46e580) nie są przez to narzędzie akceptowane – strona oczekuje wyłącznie sześcio- lub trzyznakowych kodów.
• Jeśli wpiszesz wartość niezgodną z formatem, pojawi się komunikat:
  „Enter a hex color like #4f46e5 or #abc.”

Edycja dowolnego pola – zmiana wartości w polu RGB, HSL, HSV, CMYK lub LAB natychmiast aktualizuje wszystkie pozostałe formaty. To nie jest osobna funkcja tylko konsekwencja implementacji: wszystkie konwersje są wykonywane w pamięci przeglądarki, a żadne dane nie są wysyłane na serwer.

Dlaczego HEX i RGB to to samo?

Zapis szesnastkowy (HEX) i zapis dziesiętny (RGB) różnią się wyglądem, ale niosą identyczną informację o kolorze. W systemie szesnastkowym każda cyfra może przyjąć 16 wartości (0–9 oraz a–f), a jedna para cyfr szesnastkowych może reprezentować 256 wartości (16 × 16). To dokładnie tyle, ile wynosi zakres pojedynczego kanału koloru w standardzie 8-bitowym (0–255).

Stąd bierze się bezpośrednie odwzorowanie:

• pierwsza para szesnastkowa → kanał czerwony,
• druga para → kanał zielony,
• trzecia para → kanał niebieski.

Wartość #ff6600 oznacza zatem czerwień na maksimum (255), zieleń na poziomie 102 (66 w szesnastkowym to 6 × 16 + 6 = 102) i niebieski na zerze. To nic innego jak rgb(255, 102, 0) – i tak właśnie każda przeglądarka interpretuje kod HEX w arkuszu CSS.

Trzyznakowy skrót (#abc) jest możliwy, ponieważ w standardzie CSS każda cyfra skrótu jest podwajana: #abc oznacza #aabbcc. Jest to rozwiązanie oszczędzające miejsce, dopóki kolory spełniają warunek, że każdy kanał ma obie cyfry jednakowe (jak #aa, #bb, #cc). W praktyce skróty są używane tylko dla kolorów takich jak #fff (biały), #000 (czarny), #f00 (czerwony) czy #abc (odcień niebiesko‑szary).

Praktyczne zastosowania konwersji HEX→RGB

Dla front‑end developerów

W CSS możesz używać zarówno zapisu color: #ff6600, jak i color: rgb(255, 102, 0). Przeglądarka traktuje je identycznie, ale w JavaScript, na płótnie Canvas czy w API takim jak WebGL potrzebujesz już wartości liczbowych. Jeśli masz kolor w HEX z mockupu, musisz go przekonwertować na tablicę `` zamiast stringa "#ff6600". Ta strona robi to za ciebie w locie.

Przykład użycia w JavaScript:

const hex = "#4f46e5";
// po konwersji:
ctx.fillStyle = `rgb(${79}, ${70}, ${229})`;

Dla projektantów

Oprogramowanie do projektowania interfejsów (Figma, Sketch, Adobe XD) często przyjmuje wartości RGB jako trzy suwaki. Gdy otrzymujesz wytyczne marki w postaci kodów HEX, wpisanie ich bezpośrednio do suwaków wymaga znajomości wartości dziesiętnych. Zamiast liczyć w pamięci, wklejasz HEX w narzędzie i kopiujesz wynik.

Dla grafików cyfrowych i twórców gier

W shaderach, systemach particle i silnikach graficznych kolory są zwykle reprezentowane jako trzy liczby zmiennoprzecinkowe z zakresu 0–1 (lub 0–255 w starszych API). Konwersja z HEX na RGB jest pierwszym krokiem przed normalizacją do zakresu 0–1 (dzieląc każdą wartość przez 255).

Format HEX – historia i zalety

Kod szesnastkowy stał się standardem w projektowaniu stron internetowych z kilku powodów:

• Zwartość – trzy pary cyfr mieszczą się w sześciu znakach, podczas gdy zapis rgb(rrr, ggg, bbb) to nawet 13 znaków.
• Czytelność dla programistów – system szesnastkowy jest naturalny dla inżynierów i narzędzi programistycznych (debuggery, edytory kodu).
• Zgodność z CSS od pierwszej specyfikacji – kod HEX był obsługiwany w CSS1 (1996 rok) i nigdy nie został zastąpiony. Do dziś pozostaje najczęściej używanym formatem koloru w arkuszach stylów.
• Łatwość zapamiętania podstawowych kolorów – białe (#ffffff), czarne (#000000), czerwone (#ff0000), zielone (#00ff00), niebieskie (#0000ff) są intuicyjne, gdy zna się system szesnastkowy.

Jednak zapis HEX nie jest bez wad. Po pierwsze, nie niesie informacji o przezroczystości (dlatego istnieje rozszerzenie #RRGGBBAA, ale ta strona go nie obsługuje). Po drugie, ręczne odczytanie, jaka jest wartość poszczególnych kanałów bez konwersji, wymaga oswojenia z systemem szesnastkowym. Dla koloru #4a7d3f szybkie stwierdzenie, że czerwony to 74, zielony 125, a niebieski 63, nie jest oczywiste – i właśnie po to jest to narzędzie.

Modele kolorów a dostępność

Z wartości RGB można wyliczyć względną luminancję koloru, która jest podstawą kryteriów kontrastu WCAG. Wzór na luminancję względną według specyfikacji W3C:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

gdzie R, G i B to wartości po normalizacji do zakresu 0–1 i zastosowaniu korekcji gamma (sRGB). Jeśli znasz wartości RGB, możesz sprawdzić, czy tekst na danym tle będzie czytelny.

Przykład: dla koloru #4f46e5 (RGB: 79, 70, 229) luminancja wynosi około 0.127, co kwalifikuje go jako ciemny kolor (poniżej 0.18). Aby spełnić wymóg kontrastu 4.5:1 (WCAG AA dla tekstu normalnego), potrzebujesz koloru tekstu o luminancji powyżej 0.571 – czyli jasnego, zbliżonego do białego.

Dlatego znajomość wartości RGB to nie tylko technicality, ale też praktyczne narzędzie do projektowania dostępnego interfejsu.

Często zadawane pytania

Czy konwersja z HEX na RGB jest odwracalna?

Tak. Każdej kombinacji RGB (0–255 na kanał) odpowiada dokładnie jeden kod szesnastkowy i odwrotnie. Konwersja jest bijekcją – nie ma strat informacji, nie ma zaokrągleń. Możesz wpisać #4f46e5, dostać 79, 70, 229, a następnie wpisać 79, 70, 229 w polu RGB i zobaczyć ten sam kod HEX po drugiej stronie.

Czy mogę wpisać kod HEX z małych liter?

Tak. Narzędzie akceptuje zarówno małe, jak i wielkie litery. #4f46e5, #4F46E5, 4f46e5 – wszystkie dadzą ten sam wynik. To zgodne z tym, jak działa CSS, który również nie rozróżnia wielkości liter w kodach szesnastkowych.

Co się stanie, jeśli wpiszę nieprawidłowy znak (np. #xyz)?

Pojawi się komunikat błędu: „Enter a hex color like #4f46e5 or #abc.” Narzędzie nie podejmuje próby interpretacji błędnych danych – wymaga wyłącznie poprawnych cyfr szesnastkowych (0–9, a–f) oraz opcjonalnego znaku # na początku.

Dlaczego strona nie obsługuje kodu ośmiocyfrowego z kanałem alfa?

To celowe ograniczenie. Strona jest dedykowana konwersji HEX→RGB, a kanał alfa (przezroczystość) nie jest częścią standardowego modelu RGB. Do konwersji z kanałem alfa potrzebne byłoby osobne narzędzie, które operuje na formacie #RRGGBBAA i przekształca go na rgba(r, g, b, a).

Czy mogę użyć tego narzędzia, mając tylko trzycyfrowy kod, np. #fff?

Tak. Trzycyfrowy skrót jest automatycznie rozwijany przez podwojenie każdej cyfry: #fff → #ffffff, co daje RGB 255, 255, 255. Analogicznie #abc → #aabbcc, co daje 170, 187, 204.

Dlaczego wynik RGB to liczby całkowite, a nie ułamki?

Ponieważ w standardowym modelu 8-bitowym każdy kanał jest przechowywany jako liczba całkowita od 0 do 255. To wynikający z ograniczeń technicznych poziom precyzji typowego monitora. Narzędzie nie dodaje ani nie odejmuje informacji – po prostu tłumaczy zapis szesnastkowy na dziesiętny, zachowując tę samą dokładność.