RGB daje trzy dziesiętne kanały między 0 a 255. Konwersja do HEX zamienia każdy kanał na dwucyfrową liczbę szesnastkową, dzięki czemu cały kolor mieści się w jednym kompaktowym tokenie, który rozumie każdy przeglądarka, narzędzie projektowe i przewodnik stylu.
Jak działa konwersja z RGB na HEX
- Weź kanał czerwony i podziel go przez 16: iloraz to pierwsza cyfra, reszta to druga.
- Zapisz cyfry 10–15 jako litery A–F — 255 staje się FF.
- Powtórz dla zielonego i niebieskiego, dopełniając pojedyncze cyfry zerem z przodu: 5 staje się 05.
- Połącz trzy pary i dodaj # na początku.
Przykład działania
Dokładne, o ile kanały są liczbami całkowitymi od 0 do 255. Wartości ułamkowe, takie jak rgb(79.5, 70, 229), są najpierw zaokrąglane do najbliższej liczby całkowitej, ponieważ HEX nie może przechowywać wartości pośrednich.
Wyjaśnienie RGB i HEX
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()
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
Tabela odniesienia z RGB na HEX
Najczęściej używane kolory CSS, skonwertowane z RGB na HEX.
| Kolor | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |