Konwerter RGB na HEX

Bezpośrednie przejście z RGB na hex – precyzyjne narzędzie dla projektantów i programistów

Ta strona konwertuje wartości RGB (trzy liczby dziesiętne, zakres 0–255) na szesnastkowy kod koloru (sześć cyfr szesnastkowych poprzedzonych znakiem #). W przeciwieństwie do wielu innych konwerterów, nie ma tu przycisku „konwertuj” – zmiana dowolnego pola natychmiast aktualizuje wszystkie pozostałe formaty: HSL, HSV, CMYK, LAB oraz podgląd koloru. Co najważniejsze, ponieważ zarówno RGB, jak i hex operują w tej samej przestrzeni barw (sRGB), konwersja jest dokładna i odwracalna – żadnego przycinania gamutu ani przybliżeń. Wynikowy hex, np. #4F46E5, zawsze ma sześć cyfr; narzędzie nie skraca go do trzyliterowej wersji skróconej (np. #ABC), ale w polu wejściowym hex akceptuje taki zapis i wewnętrznie go rozszerza.

Model RGB – jak działa addytywna synteza barw

Kolor wyświetlany na ekranie powstaje przez mieszanie trzech podstawowych składowych: czerwonej (Red), zielonej (Green) i niebieskiej (Blue). Każda z nich może przyjąć wartość od 0 do 255 – to 256 poziomów natężenia. Dlaczego akurat 0–255? Ponieważ 256 to 2^8, czyli osiem bitów na kanał – standard w ośmiobitowych wyświetlaczach. Wartość 0 oznacza zerowe natężenie danej składowej (kanał wygaszony), 255 – maksymalne (kanał w pełni świecący).

Przykładowo, aby uzyskać kolor biały, wszystkie trzy kanały muszą mieć wartość 255: rgb(255, 255, 255). Czarny to rgb(0, 0, 0). Wartości pośrednie tworzą pełne spektrum widzialnych barw. Gdy podajesz na wejściu 79, 70, 229, narzędzie interpretuje to jako:

• czerwony: 79,
• zielony: 70,
• niebieski: 229, co daje w hex odpowiednik #4F46E5.

Należy pamiętać, że model RGB jest addytywny – im więcej światła dodajemy, tym jaśniejszy kolor. To przeciwieństwo modelu subtraktywnego (jak CMYK w druku), gdzie mieszanie pigmentów daje ciemniejsze odcienie.

Szesnastkowe kody kolorów – budowa i zasady

Kod szesnastkowy (hex) to skrócony zapis wartości RGB. Składa się z symbolu # i sześciu cyfr szesnastkowych, gdzie każda cyfra to liczba od 0 do 15 w systemie dziesiętnym, zapisana jako: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Dwie pierwsze cyfry odpowiadają wartości czerwonej, dwie środkowe – zielonej, dwie ostatnie – niebieskiej.

Aby zamienić wartość 79 (dziesiętnie) na hex, wykonujemy prosty rachunek:

• 79 ÷ 16 = 4, reszta 15 → 4F (bo 15 to w hex F). Analogicznie:
• 70 ÷ 16 = 4, reszta 6 → 46,
• 229 ÷ 16 = 14, reszta 5 → E5.

Stąd rgb(79, 70, 229) przekształca się w #4F46E5.

Długość kodu hex – sześciocyfrowy standard

Narzędzie zawsze zwraca sześć cyfr (np. #AABBCC), nawet jeśli kolor można by zapisać skróconą wersją trzyliterową (#ABC). Dlaczego? Ponieważ skrócona wersja jest dostępna tylko wtedy, gdy obie cyfry w każdej parze są takie same – czyli na przykład #AABBCC można skrócić do #ABC, ale #4F46E5 już nie, bo pierwsza para to 4F (różne cyfry). Narzędzie zachowuje pełną, jednoznaczną postać, aby uniknąć nieporozumień. W polu wejściowym hex akceptuje jednak zarówno sześcio-, jak i trzycyfrowy zapis (np. #abc), który wewnętrznie rozszerza do #AABBCC.

Czy hex jest wrażliwy na wielkość liter?

Nie – #4F46E5 i #4f46e5 to ten sam kolor. W praktyce CSS akceptuje obie formy, ale w kodzie źródłowym często stosuje się małe litery dla spójności. Narzędzie nie narzuca żadnej konwencji – wyświetla wynik w takiej formie, w jakiej został wprowadzony (po rozszerzeniu skrótów).

Matematyka konwersji – jak narzędzie przelicza RGB na hex

Proces jest powtarzalny dla każdej z trzech składowych:

1. Podziel wartość dziesiętną przez 16.
2. Część całkowita wyniku to pierwsza cyfra hex.
3. Reszta z dzielenia to druga cyfra hex.
4. Zapisz obie cyfry szesnastkowo (0–9 pozostają, 10 → A, 11 → B,..., 15 → F).
5. Połącz trzy pary w jeden ciąg i poprzedź znakiem #.

Przykład dla rgb(255, 0, 128):

• 255 ÷ 16 = 15, reszta 15 → FF,
• 0 ÷ 16 = 0, reszta 0 → 00,
• 128 ÷ 16 = 8, reszta 0 → 80, Wynik: #FF0080.

Jeśli wartość wejściowa wykracza poza zakres 0–255, narzędzie wyświetla komunikat błędu: „Wprowadź RGB jako trzy liczby 0–255, np. 79, 70, 229.” Nie ma żadnej automatycznej korekty ani obcięcia – użytkownik musi poprawić dane.

Przestrzeń sRGB – dlaczego konwersja jest bezstratna

sRGB to standardowa przestrzeń barw dla monitorów, telewizorów i urządzeń przenośnych. Zarówno wartości RGB (dziesiętne), jak i ich hexowe odpowiedniki reprezentują te same punkty w sRGB. Dlatego konwersja między nimi jest w pełni odwracalna – żadna informacja o kolorze nie ginie.

W praktyce oznacza to, że jeśli zapiszesz rgb(79, 70, 229) w pliku CSS, a następnie przekonwertujesz je na hex i użyjesz #4F46E5, wyświetlony kolor będzie identyczny. Nie ma tu miejsca na aproksymacje, jakie pojawiają się przy konwersji między sRGB a CMYK (gdzie profil papieru i gamut farb drukarskich zmieniają odcień).

Narzędzie nie wykonuje żadnych operacji poza sRGB – nie próbuje dopasować koloru do przestrzeni Adobe RGB, DCI-P3 czy Rec. 2020. Jeśli potrzebujesz koloru dla szerokiego gamutu (np. HDR), musisz skorzystać z innych narzędzi, ale to wykracza poza zakres tej strony.

Zastosowanie hex w CSS i projektowaniu interfejsów

W arkuszu stylów CSS kod hex jest najczęściej używany do definiowania koloru tekstu lub tła:

.element {
  color: #4F46E5;
  background-color: #1E90FF;
}

Dopuszczalne są trzy formy:

• sześciocyfrowa: #RRGGBB – standard, jak w tym narzędziu,
• trzycyfrowa skrócona: #RGB – tylko jeśli każda para ma identyczne cyfry (np. #AABBCC = #ABC),
• ośmiocyfrowa: #RRGGBBAA – z kanałem alfa (przezroczystością), np. #4F46E580 oznacza 50% przezroczystości. To narzędzie zwraca hex bez kanału alfa – jeśli potrzebujesz przezroczystości, musisz dodać własne dwie cyfry.

Projektanci interfejsów często otrzymują wartości RGB z programów graficznych (Photoshop, GIMP, Figma) i potrzebują ich hexowego odpowiednika do implementacji w kodzie. To narzędzie eliminuje ręczne obliczenia i ryzyko pomyłki.

Formatowanie wejściowe – co narzędzie akceptuje

Pole RGB oczekuje trzech liczb oddzielonych przecinkami lub spacjami. Poprawne przykłady:

• 79, 70, 229 (z jednym przecinkiem i spacją),
• 79 70 229 (tylko spacje),
• 79,70,229 (bez spacji – też działa).

Narzędzie ignoruje nadmiarowe białe znaki. Nie akceptuje jednak:

• zakresów procentowych (np. rgb(30%, 20%, 90%)),
• zapisu z nazwą funkcji (np. rgb(79, 70, 229) – to forma CSS, ale w tym polu nie jest obsługiwana; należy wpisać tylko liczby),
• wartości ujemnych lub powyżej 255.

Jeśli format jest nieprawidłowy, pojawia się komunikat: „Enter RGB as three numbers 0–255, like 79, 70, 229.” Wszystkie dane przetwarzane są lokalnie w przeglądarce – nic nie jest wysyłane na serwer.

Ograniczenia koloru na ekranie a rzeczywistość druku

Choć konwersja RGB ↔ hex w sRGB jest bezstratna, ważne jest, aby pamiętać, że kolory wyświetlane na monitorze mogą różnić się od tych uzyskanych w druku. Monitory emitują światło (model addytywny RGB), a drukarki nanoszą pigmenty (model subtraktywny CMYK). Nawet jeśli przekształcisz #4F46E5 na CMYK za pomocą tego narzędzia, wynik będzie tylko przybliżeniem – rzeczywisty wygląd zależy od profilu papieru i rodzaju tuszu.

Dlatego projektanci graficzni powinni zawsze przeprowadzać softproofing (miękką próbę) w dedykowanym oprogramowaniu, zanim prześlą pliki do druku. To narzędzie nie zastępuje profesjonalnych profili ICC.

FAQ – najczęstsze pytania

1. Dlaczego narzędzie nie skraca hex do trzech cyfr, skoro #AABBCC można zapisać jako #ABC? Ponieważ skrócona wersja jest poprawna tylko wtedy, gdy każda para cyfr jest identyczna. Większość kolorów (jak #4F46E5) nie spełnia tego warunku. Narzędzie zachowuje spójność, zawsze zwracając sześć cyfr. Jeśli podasz #abc w polu hex, zostanie ono rozszerzone do #AABBCC.

2. Czy mogę użyć tego narzędzia do konwersji z hex na RGB? Tak – jeśli wprowadzisz kod hex w odpowiednim polu, narzędzie automatycznie wyświetli wartości RGB (oraz wszystkie inne formaty). Nie ma osobnego trybu.

3. Co się stanie, jeśli wpiszę rgb(256, 0, 0)? Narzędzie wyświetli komunikat błędu, ponieważ 256 wykracza poza dozwolony zakres 0–255. Nie nastąpi automatyczne obcięcie do 255.

4. Czy narzędzie obsługuje przezroczystość (kanał alfa) w hex? Nie – wynikowy hex ma zawsze sześć cyfr (bez kanału alfa). Jeśli potrzebujesz koloru z przezroczystością (ośmiocyfrowy hex, np. #4F46E580), musisz samodzielnie dodać dwie cyfry szesnastkowe.

5. Czy dane są gdzieś przechowywane? Nie. Całe przetwarzanie odbywa się lokalnie w przeglądarce – żadna wpisana wartość nie jest wysyłana ani zapisywana na serwerze.

6. Jaka jest różnica między #4F46E5 a rgb(79, 70, 229)? Żadna – to ten sam kolor zapisany w dwóch różnych formatach. Narzędzie wykonuje konwersję matematyczną bez utraty informacji, ponieważ obie reprezentacje odnoszą się do punktu w przestrzeni sRGB.