Przelicz kod HEX na wartości RGB
Wpisz kod HEX, a wartości RGB pojawią się w trakcie pisania: #3B82F6 to rgb(59, 130, 246). Konwerter czyta zapis trzy-, cztero-, sześcio- i ośmioznakowy, więc odczyta też krycie z kodu #3B82F680. Przełącznikiem wybierzesz kanały w zapisie 0–255 albo 0–1.
Jak przeliczyć HEX na RGB?
Odczytaj kod parami znaków i zamień każdą parę z systemu szesnastkowego na dziesiętny. Pierwsza para to kanał czerwony, druga zielony, trzecia niebieski, a każda wartość mieści się w zakresie od 0 do 255. Kod #3B82F6 rozkłada się na 3B, 82 i F6, co daje rgb(59, 130, 246).
Wzór: R, G i B to kolejne pary znaków kodu odczytane jako liczby szesnastkowe.
Pojedynczą parę policzysz też w pamięci, bo to jedno mnożenie i jedno dodawanie. Pierwszy znak mnożysz przez 16 i dodajesz drugi, przy czym A oznacza 10, B oznacza 11, a F oznacza 15. Dla pary 3B daje to 3 × 16 + 11, czyli 59.
Kilka kodów wraca przy tym przeliczeniu częściej niż inne. Czerń #000000 to rgb(0, 0, 0), biel #FFFFFF to rgb(255, 255, 255), a szarość #808080 to rgb(128, 128, 128) — dokładnie połowa zakresu na każdym kanale.
W drugą stronę rachunek opiera się na tej samej liczbie, z jedną zmianą: kanał dzielisz przez 16, a resztę z dzielenia zapisujesz drugim znakiem pary. Całą zamianę wykona za Ciebie konwerter RGB na HEX.
Czym jest kod HEX, a czym RGB?
RGB opisuje kolor trzema liczbami: osobno dla kanału czerwonego, zielonego i niebieskiego, każda w zakresie od 0 do 255. Ekran składa z tych trzech składowych barwę światłem, więc im wyższe liczby, tym jaśniejszy punkt, a trzy wartości maksymalne dają biel[1].
Kod HEX opisuje ten sam kolor krócej. Wartość kanału mieści się w systemie szesnastkowym równo w dwóch znakach, więc cały kolor mieści się w sześciu znakach po krzyżyku.
Na co dzień oba zapisy trafiają w inne miejsca. Kod HEX podaje Figma, panel kolorów w systemie CMS i księga znaku, bo jest krótki i łatwo go przekazać. Wartości RGB wchodzą tam, gdzie kolor trzeba policzyć: w obliczeniach kontrastu WCAG, w zapisie z przezroczystością i w silnikach 3D.
Specyfikacja CSS Color Level 4 dopuszcza cztery długości kodu: trzy, cztery, sześć albo osiem znaków[2]. Zapis trzyznakowy jest skrótem, w którym przeglądarka powtarza każdy znak, więc #123 znaczy tyle samo co #112233. Wersje cztero- i ośmioznakowa dokładają na końcu krycie, gdzie 00 oznacza pełną przezroczystość, a FF pełne krycie.
Obie postacie opisują barwę w przestrzeni sRGB. Standard zaproponowały w 1996 roku Hewlett-Packard i Microsoft, a W3C przyjęło go jako obowiązujący dla HTML i CSS pod oznaczeniem IEC 61966-2-1[3]. Dlatego ten sam kod daje na każdym zgodnym ekranie tę samą barwę.
Kody HEX nazwanych kolorów CSS i ich wartości RGB
| Nazwa w CSS | Kod HEX | Wartości RGB |
|---|---|---|
| black | #000000 | 0, 0, 0 |
| white | #FFFFFF | 255, 255, 255 |
| red | #FF0000 | 255, 0, 0 |
| lime | #00FF00 | 0, 255, 0 |
| blue | #0000FF | 0, 0, 255 |
| yellow | #FFFF00 | 255, 255, 0 |
| aqua | #00FFFF | 0, 255, 255 |
| fuchsia | #FF00FF | 255, 0, 255 |
| silver | #C0C0C0 | 192, 192, 192 |
| gray | #808080 | 128, 128, 128 |
| maroon | #800000 | 128, 0, 0 |
| olive | #808000 | 128, 128, 0 |
| green | #008000 | 0, 128, 0 |
| purple | #800080 | 128, 0, 128 |
| teal | #008080 | 0, 128, 128 |
| navy | #000080 | 0, 0, 128 |
| orange | #FFA500 | 255, 165, 0 |
| pink | #FFC0CB | 255, 192, 203 |
Słowo green opisuje w CSS kolor o połowie jasności kanału zielonego, a pełne 255 na tym kanale nosi nazwę lime.
Kody HEX z interfejsów: wartości RGB i zapis 0–1
| Kod HEX | Wartości RGB | Zapis 0–1 |
|---|---|---|
| #FAFAFA | 250, 250, 250 | 0.9804, 0.9804, 0.9804 |
| #F5F5F5 | 245, 245, 245 | 0.9608, 0.9608, 0.9608 |
| #333333 | 51, 51, 51 | 0.2, 0.2, 0.2 |
| #1A1A1A | 26, 26, 26 | 0.102, 0.102, 0.102 |
| #3B82F6 | 59, 130, 246 | 0.2314, 0.5098, 0.9647 |
| #EF4444 | 239, 68, 68 | 0.9373, 0.2667, 0.2667 |
| #EE3333 | 238, 51, 51 | 0.9333, 0.2, 0.2 |
| #22C55E | 34, 197, 94 | 0.1333, 0.7725, 0.3686 |
Zapis ułamkowy powstaje przez podzielenie każdego kanału przez 255, więc 128 daje 0,502, a 255 daje równe 1.
Jakie znaki dopisać do kodu HEX, żeby ustawić krycie?
| Krycie | Znaki w kodzie | Wartość kanału | Dokładne krycie |
|---|---|---|---|
| 100% | FF | 255 | 100% |
| 90% | E6 | 230 | 90,20% |
| 80% | CC | 204 | 80% |
| 75% | BF | 191 | 74,90% |
| 70% | B3 | 179 | 70,20% |
| 60% | 99 | 153 | 60% |
| 50% | 80 | 128 | 50,20% |
| 40% | 66 | 102 | 40% |
| 30% | 4D | 77 | 30,20% |
| 25% | 40 | 64 | 25,10% |
| 20% | 33 | 51 | 20% |
| 10% | 1A | 26 | 10,20% |
| 5% | 0D | 13 | 5,10% |
| 0% | 00 | 0 | 0% |
Kanał krycia ma 256 stopni, tak samo jak każdy kanał koloru. Równo na okrągły procent trafiają w nim wartości co 20%, czyli 0, 20, 40, 60, 80 i 100. Pozostałe pary wypadają o dwie dziesiąte procenta obok wartości z pierwszej kolumny i na ekranie wyglądają tak samo.
Skąd wziąć kod HEX w programie, w którym pracujesz?
Każdy z tych programów pokazuje kod przy zaznaczonym elemencie, tylko w innym miejscu.
Figma
Zaznacz warstwę i kliknij kwadratową próbkę w sekcji Fill na prawym pasku. Otworzy się selektor, a pod suwakami barwy i krycia stoi lista, na której przełączysz zapis między Hex, RGB, HSB, HSL i CSS. Figma pokazuje domyślnie Hex.Photoshop
Kliknij dwukrotnie kwadrat koloru narzędzia na dole paska narzędzi. W oknie Próbnik kolorów kod stoi w polu oznaczonym krzyżykiem, pod wartościami R, G i B.Canva
Zaznacz element i kliknij kolor na górnym pasku. Pod kolorami dokumentu naciśnij Dodaj nowy kolor, a w polu z krzyżykiem wpiszesz albo odczytasz sześcioznakowy kod.Przeglądarka
Kliknij element prawym przyciskiem i wybierz Zbadaj. W panelu stylów przy każdej właściwości koloru stoi mała próbka, a kliknięcie jej z wciśniętym klawiszem Shift przełącza zapis między HEX, RGB i HSL.
Jak przeliczyć HEX na RGB w Excelu?
Wpisz kod do komórki A1, a w trzech sąsiednich komórkach podaj wzory =SZESN.NA.DZIES(FRAGMENT.TEKSTU(A1;2;2)), =SZESN.NA.DZIES(FRAGMENT.TEKSTU(A1;4;2)) oraz =SZESN.NA.DZIES(FRAGMENT.TEKSTU(A1;6;2)). Dla kodu #3B82F6 zwrócą one 59, 130 i 246.
Pierwsza z tych funkcji odczytuje liczbę szesnastkową[4], a druga wycina z kodu kolejne pary znaków. FRAGMENT.TEKSTU przyjmuje komórkę, pozycję pierwszego znaku i liczbę znaków, a ponieważ kod zaczyna się od krzyżyka, kanały stoją na pozycjach 2, 4 i 6.
Skopiowanie tych trzech komórek w dół przelicza całą kolumnę kodów. W wersji angielskiej programu funkcje nazywają się HEX2DEC i MID, a argumenty rozdziela przecinek.
Źródła
- RGB — Wikipedia
- CSS Color Module Level 4 — zapis szesnastkowy — W3C
- sRGB — Wikipedia
- SZESN.NA.DZIES — 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 HEX na RGB
Czy #FFF i #FFFFFF to ten sam kolor?
Tak. Zapis trzyznakowy powtarza każdy znak, więc #FFF rozwija się do #FFFFFF, a #38F do #3388FF[2]. Oba dają w RGB dokładnie te same trzy liczby.
Jaki kod HEX ma biel, a jaki czerń?
Biel to #FFFFFF, czyli rgb(255, 255, 255), a czerń to #000000, czyli rgb(0, 0, 0). Skrótowo zapisuje się je jako #FFF i #000.
Co oznacza krzyżyk przed kodem koloru?
Krzyżyk rozpoczyna zapis szesnastkowy i mówi przeglądarce, że kolejne znaki to kod koloru. Sam nie niesie żadnej wartości, więc konwerter przyjmuje kod z krzyżykiem i bez niego.
Ile kolorów da się zapisać kodem HEX?
Każdy z trzech kanałów ma 256 stopni, co daje 16 777 216 kombinacji[3]. Kod ośmioznakowy dokłada do tego 256 stopni krycia.
Jak zapisać przezroczystość w kodzie HEX?
Dopisz na końcu dwa znaki krycia: #3B82F680 to ten sam niebieski przy kryciu w połowie. Konwerter odczyta taki kod i poda wynik w zapisie rgba(59, 130, 246, 0.5). Gotowe pary znaków dla okrągłych wartości znajdziesz w tabeli krycia powyżej.
Czym różni się zapis 0–255 od 0–1?
To ten sam kolor opisany dwiema skalami. CSS, Figma i programy graficzne liczą kanał w bajtach od 0 do 255, a Unity, three.js, OpenGL i matplotlib w ułamkach od 0 do 1. Przełącznik Zapis kanałów RGB pod polami podaje wynik w tej skali, której akurat potrzebujesz.
Czy kodu HEX można użyć w projekcie do druku?
Drukarnia pracuje na czterech farbach, więc plik do druku opisuje kolor wartościami CMYK. Trzy liczby uzyskane tutaj wpisz do konwertera RGB na CMYK, a odczytasz udziały cyjanu, magenty, żółtego i czerni.
Jak sprawdzić, czy kolor ma wystarczający kontrast?
Wytyczne WCAG liczą kontrast z wartości kanałów, więc pracę zaczynasz od przeliczenia kodu na RGB. Gotowy wynik razem z progami dla tekstu poda narzędzie do sprawdzania kontrastu i czytelnoś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.