Kod HEX pakuje trzy liczby 8-bitowe w sześć cyfr szesnastkowych. Konwersja HEX do RGB oznacza podzielenie tych cyfr na pary i odczytanie każdej pary jako liczby dziesiętnej między 0 a 255 — dokładnie takich wartości, jakich oczekuje CSS, Figma i edytory obrazów.
Jak działa konwersja z HEX na RGB
- Usuń wiodący #, a jeśli kod ma tylko trzy cyfry, podwój każdą z nich: #f53 staje się #ff5533.
- Podziel sześć cyfr na trzy pary — RR, GG i BB.
- Odczytaj każdą parę jako liczbę w systemie szesnastkowym i zamień ją na dziesiętną: FF to 255, 57 to 87, 33 to 51.
- Zapisz trzy wyniki jako rgb(R, G, B).
Przykład działania
Ta konwersja jest dokładna. HEX i RGB opisują te same wartości sRGB w innej notacji, więc nic nie jest zaokrąglane ani tracone w żadnym kierunku.
Wyjaśnienie HEX i RGB
Czym jest HEX?
Kod HEX to sześciocyfrowa liczba szesnastkowa, która przechowuje kanały czerwony, zielony i niebieski koloru po znaku #. Każda para cyfr odpowiada jednemu kanałowi, od 00 (brak) do FF (pełny), co daje te same ~16,7 miliona kolorów co RGB, ale w krótszej notacji. HEX jest domyślny w CSS, narzędziach projektowych i wytycznych marki.
- Składnia:
- #RRGGBB
- Zakres:
- 00–FF na kanał
- Najlepsze do:
- CSS, przekaz projektowy, wytyczne marki
Czym jest RGB?
RGB opisuje kolor trzema kanałami światła — czerwonym, zielonym i niebieskim — każdy od 0 do 255. Odwzorowuje to działanie ekranów: wszystkie trzy na 255 dają biały, wszystkie na 0 — czarny. RGB to właściwy wybór, gdy musisz liczyć z kolorem, a rgba() dodaje przezroczystość.
- Składnia:
- rgb(R, G, B)
- Zakres:
- 0–255 na kanał
- Najlepsze do:
- kod, canvas, przezroczystość z rgba()
Tabela odniesienia z HEX na RGB
Najczęściej używane kolory CSS, skonwertowane z HEX na RGB.
| Kolor | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |