Przykład 1
- #FF5733
- źródło hex
#FF5733
Jaki HEX z #FF5733? #FF5733. Konwersja, nie picker.
Kalkulator Kolor HEX ↔ RGB
Wpisz HEX albo RGB. #FF5733 zostaje #FF5733. #0F0 daje #00FF00. 255, 87, 51 dają #FF5733. Konwersja sRGB, nie color picker.
Wpisz #RRGGBB albo kanały R, G, B (0–255), kliknij Oblicz i skopiuj gotowy wynik do CSS.
To zamiana #RRGGBB ↔ rgb(r,g,b), kanały 0-255. Nie HSL i nie picker. Sąsiednią podstawę liczy binarny / hex / decimal.
Wynik
Wpisz kolor, wybierz kierunek i kliknij Oblicz.
Czym są kolory HEX i RGB?
RGB to addytywny model barw używany na ekranach. Kolor powstaje z trzech kanałów światła: czerwonego (R), zielonego (G) i niebieskiego (B). Im wyższa wartość kanału, tym mocniej świeci dana składowa.
W typowym zapisie CSS każdy kanał to liczba całkowita od 0 do 255 (8 bitów na kanał). Zero oznacza brak światła w tym kanale, 255 — pełną intensywność.
rgb(255, 0, 0)— czerwonyrgb(0, 255, 0)— zielonyrgb(0, 0, 255)— niebieskirgb(0, 0, 0)— czarny (brak światła)rgb(255, 255, 255)— biały (pełne wszystkie kanały)
HEX to inny zapis tych samych wartości. Zamiast trzech liczb dziesiętnych używasz ciągu szesnastkowego w formie #RRGGBB:
RR— czerwonyGG— zielonyBB— niebieski
Każda para to jedna liczba 0–255 zapisana heksadecymalnie (cyfry 0–9 oraz litery A–F). Dlatego #FF0000 to ten sam kolor co rgb(255, 0, 0).
Jak przeliczyć HEX na RGB?
Ręczna konwersja HEX → RGB wygląda tak:
- Usuń znak
#, jeśli jest na początku (np.#4CAF50→4CAF50). - Podziel sześć znaków na trzy pary:
RR,GG,BB. - Każdą parę zamień z systemu szesnastkowego na dziesiętny.
- Zapisz wynik jako
rgb(r, g, b).
Przydatna reguła dla jednej pary hex:
wartość dziesiętna = 16 × pierwsza cyfra + druga cyfra
Gdzie A=10, B=11, C=12, D=13, E=14, F=15. Przykład: 4C → 16 × 4 + 12 = 76.
W drugą stronę (RGB → HEX) każdy kanał 0–255 zamieniasz na dwucyfrowy hex i sklejasz w #RRGGBB. Ten kalkulator robi obie konwersje automatycznie po kliknięciu Oblicz.
Przykład konwersji HEX na RGB
Weźmy kolor #4CAF50.
| Krok | Wartość | Obliczenie |
|---|---|---|
| Wejście | #4CAF50 | usuń # → 4CAF50 |
| Podział | 4C · AF · 50 | RR · GG · BB |
| R | 4C | 16 × 4 + 12 = 76 |
| G | AF | 16 × 10 + 15 = 175 |
| B | 50 | 16 × 5 + 0 = 80 |
| Wynik | rgb(76, 175, 80) | |
Te same wartości w drugą stronę: 76, 175, 80 → #4CAF50.
Jak używać kalkulatora HEX ↔ RGB?
- Wybierz kierunek w przełączniku Konwertuj z: — HEX albo RGB.
- Jeśli źródłem jest HEX, wpisz kolor (
#RRGGBB,RRGGBBlub skrót#RGB). Pola R, G, B są wtedy tylko do odczytu wyniku. - Jeśli źródłem jest RGB, wpisz trzy liczby całkowite 0–255. Pole HEX jest wtedy tylko do odczytu.
- Kliknij Oblicz. Wynik pojawia się dopiero po zatwierdzeniu — bez przeliczania „na żywo” podczas pisania.
- W panelu wyniku zobaczysz znormalizowany HEX (wielkie litery z
#), zapisrgb(r, g, b), osobne kanały, podgląd koloru, snippet CSS oraz przyciski Kopiuj.
Po zmianie kierunku poprzedni wynik jest czyszczony — trzeba ponownie kliknąć Oblicz.
Czym jest skrócony zapis HEX?
Skrót #RGB działa tylko wtedy, gdy w pełnym zapisie obie cyfry każdej pary są takie same. Wtedy wystarczy jeden znak na kanał:
#FFF=#FFFFFF(biały)#000=#000000(czarny)#F00=#FF0000(czerwony)
Rozwinięcie polega na powtórzeniu każdego znaku: F → FF, 0 → 00.
Ten kalkulator akceptuje skrót HEX i przed konwersją rozwija go do pełnego #RRGGBB. Jeśli wpiszesz skrót, w wyniku zobaczysz też krótką informację o rozwinięciu.
Szybka ściąga konwersji
- HEX → RGB: usuń
#→ trzy pary → każda para do dziesiętnego →rgb(r, g, b) - RGB → HEX: każdy kanał do 2-znakowego hex → sklej → dodaj
# - Cyfry hex: 0–9, A=10 … F=15
- Para:
16 × pierwsza + druga
Popularne kolory — HEX i RGB
| Kolor | HEX | RGB |
|---|---|---|
| Czarny | #000000 | rgb(0, 0, 0) |
| Biały | #FFFFFF | rgb(255, 255, 255) |
| Czerwony | #FF0000 | rgb(255, 0, 0) |
| Zielony | #00FF00 | rgb(0, 255, 0) |
| Niebieski | #0000FF | rgb(0, 0, 255) |
| Żółty | #FFFF00 | rgb(255, 255, 0) |
| Material green | #4CAF50 | rgb(76, 175, 80) |
Jak to działa?
Kalkulator Kolor HEX ↔ RGB na tej karcie zamienia zapis koloru. #FF5733 zostaje #FF5733. #0F0 daje #00FF00. 255, 87 i 51 dają #FF5733. Karta nie jest color pickerem i nie ma HSL.
Pole hex-val jest tekstem HEX. Pola rgb-r, rgb-g, rgb-b są kanałami 0-255. Fill trzyma hex-rgb-source hex albo rgb. #RGB rozszerza się: #0F0 staje się #00FF00. Wynik extras to wielkie #RRGGBB.
#FF5733 nie schodzi z pipety w Figma. #00FF00 nie jest paletą systemową. Trzecia karta idzie z RGB, nie z pickera. Wpisujesz wartości sam. Nie ma alfy.
Binarny / hex / decimal obok czyta FF jako 255. ASCII czyta znak. Tu #FF5733 zostaje #FF5733, sama konwersja.
Wpisz #FF5733, źródło hex, potem Oblicz. Wynik to #FF5733. #0F0 daje #00FF00. 255, 87, 51 przy źródle rgb też dają #FF5733.
#FF5733 zostaje #FF5733. #0F0 daje #00FF00. 255, 87, 51 dają #FF5733. Inny HEX zmienia wynik.
Wzór
#RRGGBB ↔ rgb(r,g,b); #RGB się rozszerza. Kanały 0-255, nie picker.
Jak korzystać
- Wpisz #FF5733 i zostaw źródło hex.
- Kliknij Oblicz. Wynik to #FF5733.
- #0F0 daje #00FF00. 255, 87, 51 przy rgb dają #FF5733.
- To konwersja, nie color picker.
- Sąsiednia karta czyta FF jako liczbę, nie kolor.
#FF5733 zostaje #FF5733
HEX ↔ RGB, kanały 0-255. #FF5733 zostaje #FF5733. To nie picker.
- Kolor
- Zapis sRGB. #0F0 zostawia #00FF00. Nie HSL.
- HEX
- Pole hex-val. #FF5733 zostaje #FF5733. Nie pipeta.
- RGB
- Kanały 0-255. 255, 87, 51 dają #FF5733. Nie picker.
Przykłady
Przykład 2
- #0F0
- źródło hex
#00FF00
Jaki HEX z #0F0? #00FF00. Skrót #RGB się rozszerza.
Przykład 3
- R 255
- G 87
- B 51
- źródło rgb
#FF5733
Jaki HEX z rgb(255, 87, 51)? #FF5733.
Powiązane kalkulatory
Najczęstsze pytania
Jaki wynik z #FF5733?
#FF5733. Ten sam HEX. Konwersja, nie picker.
Ile z #0F0?
#00FF00. Skrót #RGB rozszerza się do #RRGGBB.
Ile z 255, 87, 51?
#FF5733. Źródło rgb w fill.
Czy to color picker?
Nie. Nie ma pipety i nie ma koła barw. Same pola.
Czy HSL albo alfa działają?
Nie. Tylko sRGB 0-255 i #RRGGBB albo #RGB.
Po co hex-rgb-source?
hex czyta hex-val. rgb czyta trzy kanały. Jest w fill.
Czym to różni się od bin / hex / dec?
Tam FF daje 255 jako liczbę. Tu #FF5733 zostaje kolorem.
Czy małe #ff5733 działa?
Tak, karta podnosi do #FF5733. Extras biorą wielkie.
Czy puste HEX liczy?
Nie przy źródle hex. Przy rgb potrzebujesz trzech kanałów.
FAQ — przykłady praktyczne
- Czym różni się HEX od RGB?
- Oba zapisy opisują ten sam kolor ekranowy, tylko w innym formacie. HEX używa zapisu szesnastkowego, np.
#FF5733. RGB podaje składowe czerwony/zielony/niebieski w zakresie 0–255, np.rgb(255, 87, 51). Ten kalkulator przechodzi między obu reprezentacjami: wybierz źródło HEX lub RGB i kliknij Oblicz. - Jak przeliczyć HEX na RGB?
- Podziel kod HEX na trzy pary znaków (R, G, B) i każdą parę zamień z szesnastkowego na dziesiętny. Przykład:
#FF5733→FF,57,33→FF = 255,57 = 87,33 = 51→rgb(255, 87, 51). W kalkulatorze ustaw źródło HEX, wpisz kolor i kliknij Oblicz. - Jak przeliczyć RGB na HEX?
- Każdy kanał 0–255 zamień na dwucyfrowy hex i połącz w jeden kod z
#. Przykład:rgb(255, 87, 51)→255 = FF,87 = 57,51 = 33→#FF5733. W narzędziu wybierz źródło RGB, podaj R/G/B i kliknij Oblicz — wynik jest normalizowany do wielkich liter. - Czy zapis HEX musi być wielkimi literami?
- Nie. W CSS HEX nie jest czuły na wielkość liter, więc
#00ff00i#00FF00to ten sam kolor. Ten kalkulator normalizuje wynik do wielkich liter z wiodącym#, żeby wynik był spójny i łatwy do kopiowania. - Czy skrócony zapis HEX, np. #FFF, jest poprawny?
- Tak. Trzyznakowy HEX jest poprawny w CSS i rozwija się przez powtórzenie każdego znaku:
#FFF=#FFFFFF,#0F0=#00FF00. Ten kalkulator akceptuje skrót i przed konwersją rozwija go do pełnego#RRGGBB. - Kiedy używać HEX, a kiedy RGB?
- HEX jest popularny w design handoffach, tokenach i prostym CSS — krótki i czytelny w arkuszach stylów. RGB bywa wygodniejszy, gdy myślisz kanałami koloru albo pracujesz z funkcjami CSS/JS. Żaden format nie jest „zawsze lepszy”; wybieraj ten, który pasuje do kontekstu pracy.