Przelicz HEX na RGB – konwerter kolorów CSS i Figma
HEX z Figmy zamieniaj na RGB do obliczeń WCAG i arkuszy CSS. Przelicz w obu kierunkach natychmiast – bez instalacji, bez logowania.
Jak działa konwersja HEX na RGB?
HEX to szesnastkowy zapis koloru używany w CSS i HTML (np. #3B82F6). RGB to trzy wartości liczbowe 0–255 dla kanałów czerwonego, zielonego i niebieskiego (np. rgb(59, 130, 246)).
Każda para znaków w kodzie HEX odpowiada jednemu kanałowi: #3B82F6 → R=3B=59, #3B82F6 → G=82=130, #3B82F6 → B=F6=246.
W CSS można używać obu zapisów zamiennie. HEX jest krótszy, RGB jest bardziej czytelny i pozwala łatwiej modyfikować poszczególne kanały. CSS obsługuje też zapis skrócony: #FFF = #FFFFFF.
Wartości HEX są głównym formatem kolorów w Figma, Sketch i Adobe XD. Konwersja na RGB przydaje się do obliczania kontrastów, tworzenia palet i pracy z kanałem alfa (RGBA).
Jak działa konwersja HEX na RGB?
Kod koloru HEX składa się z sześciu znaków szesnastkowych (0–9 i A–F), podzielonych na trzy pary. Każda para odpowiada jednemu kanałowi koloru: pierwsza para to czerwony (R), druga to zielony (G), a trzecia to niebieski (B).
Konwersja polega na zamianie każdej pary znaków szesnastkowych na liczbę dziesiętną z zakresu 0–255. Na przykład w kodzie #3B82F6 para 3B odpowiada wartości 59, para 82 to 130, a F6 to 246 — co daje kolor rgb(59, 130, 246).
Konwersja w drugą stronę działa analogicznie: każdą wartość RGB (0–255) zamienia się na dwuznakowy zapis szesnastkowy. Wartości jednocyfrowe otrzymują zero wiodące, np. wartość 10 staje się 0A.
HEX vs RGB – porównanie
| Cecha | HEX | RGB |
|---|---|---|
| Zapis | #RRGGBB | rgb(R, G, B) |
| Zakres | 00–FF na kanał | 0–255 na kanał |
| Alfa (przezroczystość) | #RRGGBBAA | rgba(R, G, B, A) |
| Skrót | #RGB (3 znaki) | Brak |
| Użycie | CSS, HTML, Figma | CSS, obliczenia, WCAG |
Jak korzystać z konwertera?
1. Wpisz wartość
Wpisz liczbę w polu wejściowym. Możesz użyć kropki lub przecinka jako separatora dziesiętnego.2. Odczytaj wynik
Wynik konwersji pojawi się natychmiast w polu obok – bez klikania żadnego przycisku.3. Skopiuj lub zmień kierunek
Kliknij Kopiuj wynik lub użyj przycisku Zmień kolejność, aby przeliczać w drugą stronę.
Kiedy przydaje się ten konwerter?
CSS i arkusze stylów
Figma i Sketch eksportują kolory w formacie HEX. CSS obsługuje oba zapisy, ale funkcje jakcolor-mix()i obliczenia kanałów wymagają RGB. Przeliczając#3B82F6nargb(59, 130, 246), zyskujesz pełną elastyczność w arkuszach CSS i zmiennych custom properties.Przepływ pracy Figma – CSS
Polskie agencje projektowe pracują głównie w Figma, gdzie kolory podawane są jako HEX. Przekazując projekt frontendowcowi, kolor HEX trzeba zamienić na RGB do arkuszy CSS lub na HSL do budowania palet. Ten konwerter przyspiesza ten przepływ pracy bez wychodzenia z przeglądarki.Dostępność WCAG i audit kontrastu
Standardy dostępności WCAG 2.1 wymagają minimalnego kontrastu 4,5:1 dla tekstu. Algorytm liczenia względnej luminancji operuje na wartościach RGB, nie HEX. Przeliczając kolor HEX na RGB, możesz ręcznie zweryfikować kontrast lub wkleić wartości do kalkulatora kontrastu. Ważne w projektach dla instytucji publicznych w Polsce.Systemy projektowe i tokeny kolorów
Budując design tokens dla polskich startupów lub platform e-commerce, kolory brandowe zwykle definiuje się jako HEX. Konwersja na RGB pozwala używać ich w CSS custom properties z przezroczystością:rgba(var(--color-primary), 0.5). Przeliczenie wszystkich kolorów brandowych zajmuje sekundy.
Praktyczne wskazówki
- HEX skrócony:
#FFF=#FFFFFF= rgb(255,255,255). - Czerń:
#000000= rgb(0,0,0). Biel:#FFFFFF= rgb(255,255,255). - HEX z alfa:
#3B82F680– ostatnie 2 znaki = przezroczystość (80 = 50%). - Kontrast WCAG: minimum 4,5:1 dla tekstu, 3:1 dla dużego tekstu.
Sprawdź konwertery innych jednostek
Najczęściej zadawane pytania
Jak przeliczyć HEX na RGB?
Każdą parę znaków kodu HEX należy przeliczyć z systemu szesnastkowego na dziesiętny. Na przykład w kodzie #3B82F6 para 3B daje wartość 59 dla kanału czerwonego, 82 daje 130 dla zielonego, a F6 daje 246 dla niebieskiego — wynik to rgb(59, 130, 246).
Co oznacza # w kodzie koloru?
Hash (#) to prefix kodu HEX. Nie jest częścią wartości – oznacza jedynie, że następujące znaki to kod szesnastkowy.
Czy #FFF i #FFFFFF to ten sam kolor?
Tak. Zapis skrócony powtarza każdy znak: #FFF = #FFFFFF, #38F = #3388FF.
Jak dodać przezroczystość do HEX?
Dodaj 2 znaki na końcu: #3B82F680. 80 (hex) = 128 = 50% przezroczystości. FF = 100%, 00 = 0%.
Jaki jest HEX dla białego koloru?
#FFFFFF = rgb(255, 255, 255). Skrót: #FFF.
Czy RGB i HEX dają ten sam kolor?
Tak, to dwa różne zapisy tego samego koloru. #FF0000 i rgb(255, 0, 0) to identyczna czerwień.
Jak używać koloru HEX z przezroczystością w CSS?
W nowoczesnym CSS możesz użyć zapisu rgb(59 130 246 / 50%) lub rgba(59, 130, 246, 0.5). W HEX przezroczystość dodajesz jako 8. i 9. znak: #3B82F680 (80 hex = 50%). CSS custom properties z RGB pozwalają też na dynamiczne ustawianie przezroczystości.
Dlaczego Figma używa HEX, a CSS pozwala na oba?
Figma i narzędzia projektowe preferują HEX, bo jest krótki i powszechnie rozpoznawalny. CSS obsługuje HEX, RGB i HSL zamiennie – wybór formatu to kwestia preferencji. W systemach projektowych polskie agencje często mieszają oba zapisy: HEX w tokenach, RGB do obliczeń i przezroczystości.
Pomóż nam ulepszyć narzędzia
Masz pomysł na nową funkcję, znalazłeś błąd lub chcesz zaproponować inne narzędzie? Napisz do nas – odpowiadamy w ciągu 24 godzin.