Powiązane narzędzia do kolorów
Po konwersji HEX możesz przejść do odwrotnego przeliczenia, edycji koloru w HSL albo sprawdzić, jak głębia koloru wpływa na rozmiar obrazu.
HEX na RGB - szybka odpowiedź
Kod HEX zapisuje kolor w postaci trzech liczb szesnastkowych: czerwonej, zielonej i niebieskiej. Dla koloru #25435b pary znaków to 25, 43 i 5b. Po przeliczeniu na system dziesiętny otrzymujemy rgb(37, 67, 91).
Konwerter przyjmuje zapis ze znakiem # lub bez niego, obsługuje skróty #RGB i #RGBA, pełne kody #RRGGBB oraz kody z przezroczystością #RRGGBBAA. Wynik można skopiować pojedynczo, jako pełne zestawienie albo jako gotowy fragment CSS.
Jak ręcznie przeliczyć HEX na RGB?
Pełny kod koloru ma postać #RRGGBB. Najpierw dzielisz go na trzy pary. Każda para jest liczbą w systemie o podstawie 16, dlatego używa cyfr 0-9 i liter A-F.
Dla pary 25 obliczenie wygląda tak: 2 × 16 + 5 = 37. Dla 43 jest to 4 × 16 + 3 = 67. Litera B ma wartość 11, więc 5B daje 5 × 16 + 11 = 91. Wynik końcowy to rgb(37, 67, 91).
Co oznaczają 3, 4, 6 i 8 znaków?
#RGB to skrót pełnego #RRGGBB: #abc oznacza #aabbcc. #RGBA działa podobnie, ale czwarty znak opisuje przezroczystość. Pełne odpowiedniki to #RRGGBB oraz #RRGGBBAA.
W zapisie CSS kanał alpha znajduje się na końcu. W innych środowiskach spotyka się ARGB, gdzie alpha jest na początku. Kalkulator pokazuje oba porządki, aby ograniczyć pomyłki.
Wskazówka od KalkulatorXXL
Przy wdrażaniu koloru sprawdź nie tylko sam zapis RGB, ale też kontrast tekstu i ewentualną przezroczystość. Jeżeli kod ma kanał alpha mniejszy niż 100%, rzeczywisty kontrast zależy również od koloru tła znajdującego się pod nim.
RGB, RGBA, HSL, HSV, CMYK i ARGB - który zapis wybrać?
| Format | Przykład dla #25435b | Najczęstsze zastosowanie |
|---|---|---|
| HEX | #25435b | Stałe kolory w CSS, konfiguracjach i projektach graficznych. |
| RGB | rgb(37, 67, 91) | Kolory ekranowe i praca na kanałach 0-255. |
| RGBA | rgba(37, 67, 91, 1) | Kolor z przezroczystością, nakładki, cienie i stany hover. |
| HSL | hsl(206.7, 42.2%, 25.1%) | Łatwe zmiany odcienia, nasycenia i jasności. |
| HSV/HSB | hsv(206.7, 59.3%, 35.7%) | Selektory kolorów i programy graficzne. |
| CMYK | wartość orientacyjna | Wstępne porównanie z drukiem; finalnie potrzebny jest profil kolorystyczny. |
| ARGB | #ff25435b | Środowiska, w których kanał alpha jest zapisany przed RGB. |
Kontrast koloru z białym i czarnym tekstem
Kalkulator liczy jasność względną koloru i porównuje ją z bielą oraz czernią. Dla zwykłego tekstu poziom WCAG AA wymaga współczynnika co najmniej 4,5:1, a dla dużego tekstu 3:1. Wyższa wartość oznacza większą różnicę jasności.
Jeżeli HEX zawiera przezroczystość, podane współczynniki odnoszą się do bazowego RGB przed nałożeniem na tło. Końcowy kontrast przezroczystego koloru trzeba oceniać po uwzględnieniu konkretnego tła.
HEX8 w CSS a ARGB w aplikacjach
Kod #25435bcc w CSS oznacza czerwony 25, zielony 43, niebieski 5b i alpha cc. Kolejność to RRGGBBAA. Ten sam zestaw zapisany jako ARGB ma postać #cc25435b.
To rozróżnienie jest ważne przy przenoszeniu kolorów między stroną internetową, aplikacją mobilną, plikiem projektu i dokumentacją. Zamiana kolejności kanałów może dać zupełnie inny kolor lub poziom przezroczystości.
Najczęstsze kolory HEX i ich wartości RGB
| Kolor | HEX | RGB | Uwagi |
|---|---|---|---|
| Biały | #ffffff | rgb(255, 255, 255) | Najwyższe wartości wszystkich kanałów. |
| Czarny | #000000 | rgb(0, 0, 0) | Wszystkie kanały wyłączone. |
| Czerwony | #ff0000 | rgb(255, 0, 0) | Maksymalny kanał czerwony. |
| Zielony CSS | #008000 | rgb(0, 128, 0) | Nazwa CSS green nie oznacza #00ff00. |
| Niebieski | #0000ff | rgb(0, 0, 255) | Maksymalny kanał niebieski. |
| Szary | #808080 | rgb(128, 128, 128) | Równe wartości kanałów dają odcień szarości. |
| Granat KalkulatorXXL | #25435b | rgb(37, 67, 91) | Ciemne tło wymagające jasnego tekstu. |
| Żółty akcent | #ffd24a | rgb(255, 210, 74) | Jasny kolor, zwykle z ciemnym tekstem. |
Najczęstsze błędy przy konwersji koloru
- Wpisanie pięciu albo siedmiu znaków, które nie tworzą prawidłowego formatu HEX.
- Użycie litery spoza zakresu A-F, na przykład G lub Z.
- Pomylenie kolejności RGB z BGR albo zapisu RRGGBBAA z AARRGGBB.
- Traktowanie alpha 80 jako 80%, mimo że w HEX para 80 oznacza około 50,2% krycia.
- Zakładanie, że orientacyjny CMYK z ekranu będzie identyczny z wynikiem profesjonalnego druku.
- Wybór tekstu wyłącznie „na oko” bez sprawdzenia kontrastu.
Zadania z konwersji HEX na RGB
Przelicz #ffffff na RGB.
Pokaż odpowiedźUkryj odpowiedź
Rozwiń skrócony kod i podaj RGB.
Pokaż odpowiedźUkryj odpowiedź
Co oznacza #ff000080 w CSS?
Pokaż odpowiedźUkryj odpowiedź
Ciekawostka
Dwa znaki HEX mogą opisać 256 wartości, ponieważ zakres biegnie od 00 do FF. Trzy kanały RGB dają 256 × 256 × 256, czyli 16 777 216 możliwych kombinacji bez kanału alpha. Dodanie kolejnych dwóch znaków na przezroczystość tworzy 256 poziomów alpha.
FAQ - HEX na RGB, RGBA i kolory CSS
Ostatnia aktualizacja: 24.09.2026