Jak konwertować kody kolorów HEX na RGB
HEX i RGB to dwa sposoby zapisywania dokładnie tych samych kolorów. Projektanci i programiści ciągle żonglują między nimi — HEX w arkuszach CSS, RGB w animacjach JavaScript, HSL w narzędziach projektowych. Zrozumienie ich powiązania znacznie ułatwia pracę z kolorami.
Jak działa HEX
Kod koloru HEX jak #FF5733 to 6-cyfrowa liczba szesnastkowa reprezentująca kanały czerwony, zielony i niebieski:
| Część | Hex | Dziesiętnie | Kanał |
|---|---|---|---|
| FF | FF | 255 | Czerwony |
| 57 | 57 | 87 | Zielony |
| 33 | 33 | 51 | Niebieski |
Każdy kanał idzie od 00 (0, brak koloru) do FF (255, maksymalna intensywność). Więc #FF5733 oznacza pełną czerwień, umiarkowaną zieleń, trochę niebieskiego — co daje ciepły pomarańczowo-czerwony.
Jak konwertować HEX na RGB
- Wprowadź swój kod HEX — wpisz lub wklej kod jak #FF5733 lub użyj próbnika kolorów.
- Sprawdź wartości RGB — zobacz odpowiedniki w czerwonym, zielonym i niebieskim (0-255 każdy).
- Skopiuj w dowolnym formacie — pobierz wartości w
rgb(255, 87, 51), indywidualnych kanałach lub innych formatach jak HSL.
Częste kody kolorów
| Kolor | HEX | RGB |
|---|---|---|
| Biały | #FFFFFF | rgb(255, 255, 255) |
| Czarny | #000000 | rgb(0, 0, 0) |
| Czerwony | #FF0000 | rgb(255, 0, 0) |
| Zielony | #00FF00 | rgb(0, 255, 0) |
| Niebieski | #0000FF | rgb(0, 0, 255) |
| Żółty | #FFFF00 | rgb(255, 255, 0) |
Wskazówki
- Używaj HEX w CSS —
color: #FF5733jest czystsze i częstsze niżcolor: rgb(255, 87, 51)w arkuszach stylów. - Używaj RGB do przezroczystości — gdy potrzebujesz półprzezroczystych kolorów, użyj
rgba(255, 87, 51, 0.5). Nie ma sposobu na dodanie alfy w standardowym HEX (chociaż 8-cyfrowy HEX istnieje, wsparcie przeglądarek się różni). - Skrót 3-cyfrowy —
#F00równa się#FF0000. Używaj go, gdy każda para ma identyczne cyfry, aby zaoszczędzić miejsce. - Próbnik kolorów jest szybszy — jeśli szukasz odpowiedniego koloru, użyj wizualnego próbnika zamiast zgadywać wartości HEX. Skopiuj kod, gdy będziesz zadowolony.
Najczęściej zadawane pytania
Jak konwertować HEX na RGB ręcznie?
Podziel kod hex na trzy pary (np. #FF8800 staje się FF, 88, 00). Konwertuj każdą parę z bazy 16 na bazę 10. FF = 255, 88 = 136, 00 = 0. Wynik to rgb(255, 136, 0).
A co z 3-cyfrowymi kodami HEX?
3-cyfrowy HEX to skrót, w którym każda cyfra jest podwojona. #F80 równa się #FF8800. Większość konwerterów obsługuje oba formaty automatycznie.
Kiedy używać HEX a kiedy RGB?
HEX jest bardziej kompaktowy i częstszy w CSS. RGB jest preferowany, gdy musisz manipulować kanałami indywidualnie w kodzie lub używać rgba() do przezroczystości. Oba reprezentują te same kolory.
Co reprezentuje symbol # w kodzie HEX?
Hash (#) to prefiks wskazujący, że wartość jest szesnastkowym kodem koloru. Nie jest częścią samej wartości. Niektóre narzędzia akceptują kody z hashem lub bez.