Zamień wartości RGB na kod HEX
Wpisz trzy liczby, a kod HEX pojawi się w trakcie pisania: rgb(59, 130, 246) to #3B82F6. Pole przyjmuje przecinki, spacje i procenty, więc wkleisz wartość prosto z arkusza stylów albo z próbnika. Przełącznikiem odczytasz też kanały podane w ułamkach od 0 do 1.
Jak zamienić RGB na HEX?
Podziel każdy kanał przez 16. Iloraz jest pierwszym znakiem pary, reszta drugim, a liczby od 10 do 15 zapisuje się literami od A do F. Kanał 59 daje 3 i 11 reszty, czyli parę 3B.
Wzór: każdy kanał zapisujesz dwoma znakami szesnastkowymi, a pary sklejasz w kolejności czerwony, zielony, niebieski.
Po tym samym rachunku 130 daje 82, a 246 daje F6, więc rgb(59, 130, 246) zapisuje się jako #3B82F6. Kanał niższy od 16 dostaje zero wiodące, żeby para zawsze miała dwa znaki, więc wartość 10 zapisuje się jako 0A.
Szarości mają wszystkie trzy kanały równe, więc ich kody składają się z trzech takich samych par: 51 daje #333333, a 204 daje #CCCCCC. Taki kod skrócisz do trzech znaków i wtedy przeglądarka rozwinie go z powrotem.
W drugą stronę rachunek opiera się na tej samej liczbie, tylko każdą parę mnożysz przez 16 i dodajesz drugi znak. Całą zamianę wykona za Ciebie konwerter HEX na RGB.
Czym są wartości RGB, a czym zapis szesnastkowy?
RGB opisuje kolor trzema liczbami, po jednej na kanał czerwony, zielony i niebieski. Każda mieści się w zakresie od 0 do 255, bo tyle stopni jasności ma jeden kanał w dwudziestoczterobitowym zapisie koloru. Trzy kanały po 256 stopni dają razem 16 777 216 barw[1].
Zapis szesnastkowy podaje te same trzy liczby w innym systemie liczbowym. Kanał ma 256 stopni, a tyle właśnie mieszczą dwa znaki szesnastkowe, więc każdy kanał zajmuje w kodzie równo dwa miejsca. Cały kolor schodzi do sześciu znaków, bez przecinków i bez nawiasów.
Ta zwięzłość decyduje o tym, gdzie który zapis spotkasz. Kod HEX stoi w arkuszach stylów, w polach kolorów w Figmie i w księgach znaku. Wartości RGB pojawiają się w zakładce Computed w przeglądarce, w próbnikach programów graficznych i wszędzie tam, gdzie kolor bierze udział w obliczeniach.
Specyfikacja CSS Color Level 4 dopuszcza cztery długości kodu: trzy, cztery, sześć i osiem znaków[2]. Wersja trzyznakowa działa tam, gdzie oba znaki pary są takie same, bo przeglądarka rozwija ją przez powtórzenie. Wersje cztero- i ośmioznakowa dokładają na końcu krycie.
Obie postacie opisują barwę w tej samej przestrzeni sRGB, którą W3C przyjęło dla HTML i CSS[1]. Kanał zapisany jako 255 i ten sam kanał zapisany jako FF to dokładnie ten sam odcień.
Kody HEX szarości używanych w interfejsach
#4D4D4D. Zdjęcie: Bill Abbott, CC BY-SA 2.0.| Wartości RGB | Kod HEX |
|---|---|
| 13, 13, 13 | #0D0D0D |
| 14, 14, 14 | #0E0E0E |
| 15, 15, 15 | #0F0F0F |
| 24, 24, 24 | #181818 |
| 35, 35, 35 | #232323 |
| 36, 36, 36 | #242424 |
| 37, 37, 37 | #252525 |
| 51, 51, 51 | #333333 |
| 60, 60, 60 | #3C3C3C |
| 64, 64, 64 | #404040 |
| 65, 65, 65 | #414141 |
| 66, 66, 66 | #424242 |
| 74, 74, 74 | #4A4A4A |
| 77, 77, 77 | #4D4D4D |
| 82, 82, 82 | #525252 |
| 84, 84, 84 | #545454 |
| 89, 89, 89 | #595959 |
| 97, 97, 97 | #616161 |
| 128, 128, 128 | #808080 |
| 204, 204, 204 | #CCCCCC |
Szarość o równych kanałach zawsze daje kod z trzech powtórzonych par, więc #333333 skrócisz do #333, a #CCCCCC do #CCC.
Jaką parę znaków daje wartość kanału?
| Wartość kanału | Para znaków |
|---|---|
| 0 | 00 |
| 16 | 10 |
| 32 | 20 |
| 48 | 30 |
| 64 | 40 |
| 80 | 50 |
| 96 | 60 |
| 112 | 70 |
| 128 | 80 |
| 144 | 90 |
| 160 | A0 |
| 176 | B0 |
| 192 | C0 |
| 208 | D0 |
| 224 | E0 |
| 240 | F0 |
| 255 | FF |
Każdy kolejny wiersz to szesnaście stopni kanału, czyli jeden krok na pierwszym znaku pary.
Kanały w zapisie 0–1 i ich kody HEX
| Zapis 0–1 | Wartości RGB | Kod HEX |
|---|---|---|
| 0, 0, 0 | 0, 0, 0 | #000000 |
| 0.1, 0.1, 0.1 | 26, 26, 26 | #1A1A1A |
| 0.2, 0.2, 0.2 | 51, 51, 51 | #333333 |
| 0.25, 0.25, 0.25 | 64, 64, 64 | #404040 |
| 0.5, 0.5, 0.5 | 128, 128, 128 | #808080 |
| 0.75, 0.75, 0.75 | 191, 191, 191 | #BFBFBF |
| 0.8, 0.8, 0.8 | 204, 204, 204 | #CCCCCC |
| 0.9, 0.9, 0.9 | 230, 230, 230 | #E6E6E6 |
| 1, 1, 1 | 255, 255, 255 | #FFFFFF |
| 0.2314, 0.5098, 0.9647 | 59, 130, 246 | #3B82F6 |
| 0.9373, 0.2667, 0.2667 | 239, 68, 68 | #EF4444 |
| 0.1333, 0.7725, 0.3686 | 34, 197, 94 | #22C55E |
Ułamek mnożysz przez 255 i zaokrąglasz wynik do najbliższej liczby całkowitej. Wartość 0,5 daje w ten sposób 128, a wartość 0,75 daje 191.
Gdzie odczytać wartości RGB w programie, w którym pracujesz?
Wszystkie trzy miejsca pokazują ten sam kolor, tylko innym zapisem.
Photoshop
Kliknij dwukrotnie kwadrat koloru narzędzia na dole paska narzędzi. W oknie Próbnik kolorów wartości stoją w polach R, G i B, każda w zakresie od 0 do 255.Figma
Zaznacz warstwę i kliknij próbkę w sekcji Fill na prawym pasku. Pod suwakami barwy i krycia rozwiniesz listę zapisów i wybierzesz RGB; domyślnie stoi tam Hex.Przeglądarka
Kliknij element prawym przyciskiem, wybierz Zbadaj i przejdź do zakładki Computed. Przeglądarka podaje tam każdą właściwość koloru w zapisiergb(), niezależnie od tego, jak zapisano ją w arkuszu stylów.
Jak przeliczyć RGB na HEX w Excelu?
Wpisz kanały do komórek A1, B1 i C1, a w czwartej komórce podaj wzór ="#"&DZIES.NA.SZESN(A1;2)&DZIES.NA.SZESN(B1;2)&DZIES.NA.SZESN(C1;2). Dla wartości 59, 130 i 246 zwróci on #3B82F6.
Dwójka w każdym wywołaniu to argument miejsca, który uzupełnia wynik zerami z przodu[3]. Kod koloru wymaga dokładnie dwóch znaków na kanał, a kanał o wartości 10 bez tego argumentu dałby samo A.
Skopiowanie tej komórki w dół przelicza całą kolumnę. W wersji angielskiej programu funkcja nazywa się DEC2HEX, a argumenty rozdziela przecinek.
Źródła
- sRGB — Wikipedia
- CSS Color Module Level 4 — zapis szesnastkowy — W3C
- DZIES.NA.SZESN — funkcja Excela — Microsoft Support
Wszystkie wartości w tabelach wyliczyliśmy z definicji jednostek i sprawdziliśmy rachunkowo przed publikacją. Dane historyczne i nazwy lokalnych jednostek opieramy na źródłach wymienionych wyżej.
Ostatnia aktualizacja treści: · przygotował i sprawdził zespół Arteon
Najczęstsze pytania o przeliczanie RGB na HEX
Jaki kod HEX ma rgb(51, 51, 51)?
To #333333, czyli jedna z najczęściej używanych szarości tekstu. Wartość 51 daje parę 33, a ponieważ wszystkie trzy kanały są równe, kod skraca się do #333.
Czy konwerter przyjmie liczby rozdzielone spacją?
Tak. Pole odczyta 59 130 246, 59, 130, 246 oraz pełny zapis rgb(59 130 246 / 50%). Nowoczesna składnia CSS rozdziela kanały spacją, a krycie stawia po ukośniku, więc taki zapis wkleisz wprost z arkusza stylów.
Co zrobić z wartością zapisaną jako rgba?
Wpisz ją w całości. Konwerter odczyta czwartą liczbę jako krycie i doda je na końcu kodu, więc rgba(59, 130, 246, 0.5) da #3B82F680.
Czy kanały można podać w procentach?
Tak. Zapis 50%, 50%, 50% odpowiada wartości 128 na każdym kanale i daje kod #808080. Sto procent oznacza 255, a zero procent oznacza 0.
Jak przeliczyć RGB na HEX w pamięci?
Podziel kanał przez 16. Iloraz jest pierwszym znakiem pary, reszta drugim, a liczby od 10 do 15 zapisujesz literami od A do F. Kanał 160 daje równo 10 i zero reszty, czyli parę A0.
Czym różni się zapis 0–255 od 0–1?
To ten sam kolor opisany dwiema skalami. Skala 0–255 obowiązuje w CSS i w programach graficznych, a skala 0–1 w silnikach 3D i bibliotekach wykresów. Przełącznik Zapis kanałów RGB pod polami mówi konwerterowi, którą z nich wpisujesz.
Czy z kodu HEX da się wrócić do wartości RGB?
Tak, i wynik jest dokładnie taki sam, bo obie postacie opisują te same trzy liczby. Przycisk Zmień kolejność przenosi na konwerter HEX na RGB, gdzie wpisujesz kod i odczytujesz kanały.
Jak z wartości RGB uzyskać kolor do druku?
Drukarnia opisuje kolor czterema farbami, więc te same trzy liczby trzeba przeliczyć na CMYK. Zrobi to konwerter RGB na CMYK, który podaje udziały cyjanu, magenty, żółtego i czerni.
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.