Formaty Kolorów Wyjaśnione: HEX, RGB i HSL
Szybka odpowiedź
HEX (#RRGGBB) i RGB (0–255 na kanał) bezpośrednio kodują intensywności czerwonego, zielonego i niebieskiego. HSL (odcień 0–360°, nasycenie/jasność 0–100%) koduje kolor w sposób zgodny z ludzką percepcją. Konwertuj między wszystkimi trzema używając naszego Color Converter.
Wstęp
Kolory web są określane w trzech dominujących formatach: HEX (base-16 czerwony, zielony, niebieski), RGB (dziesiętnie 0–255 na kanał) i HSL (odcień, nasycenie, jasność). Wszystkie trzy opisują tę samą przestrzeń kolorów sRGB ale ujawniają różne osie: HEX i RGB są zorientowane na sprzęt, podczas gdy HSL jest zorientowany na człowieka. Nowoczesny CSS obsługuje też alpha przez HEX8, rgba() i hsla().
Krok po kroku
-
Zapoznaj się z notacją HEX
HEX zapisuje każdy kanał jako dwucyfrowy numer o podstawie 16: #RRGGBB. 00 jest wyłączone, FF (255) ma pełną intensywność. #FF0000 to czysta czerwień, #00FF00 czysta zieleń, #0000FF czysty niebieski, #FFFFFF biały, #000000 czarny. 4-cyfrowy skrót #RGB rozwija się do #RRGGBB, a #RRGGBBAA dodaje alfa (np. #FF573380 to 50% alfa).
-
Zapoznaj się z notacją RGB
RGB używa wartości dziesiętnych 0–55 na kanał: rgb(255, 87, 51) jest takie samo jak #FF5733. Funkcja rgba() dodaje 0 — alfa: rgba(255, 87, 51, 0.5) jest nieprzezroczysty w 50%. RGB jest odpowiednikiem HEX — jest to po prostu liczba dziesiętna, a nie podstawa-16.
-
Zapoznaj się z notacją HSL
HSL wykorzystuje odcień (0–60° na kole kolorów: 0=czerwony, 120=zielony, 240=niebieski), nasycenie (0% = szary, 100% = pełny kolor) i jasność (0% = czarny, 50% = normalny, 100% = biały). hsl(11, 100%, 60%) to żywy pomarańczowy. HSL sprawia, że tworzenie odcieni (zwiększenie jasności) i odcieni (zmniejszenie jasności) tego samego odcienia jest proste.
-
Konwertuj między formatami
HEX → RGB: analizuj każdą parę jako bazę 16. RGB → HEX: konwertuj każdy kanał na 2-cyfrowy format base-16. RGB → HSL: oblicz maks./min znormalizowanych kanałów, jasność = (maks.+min)/2, nasycenie zależy od jasności, odcień to kąt dominującego kanału. Skorzystaj z naszego Konwertera kolorów, aby zrobić to wszystko natychmiast.
-
Wybierz odpowiedni format zadania
Użyj HEX, aby uzyskać zwartość tokenów projektowych i zasobów. Użyj RGB/rgba(), jeśli chcesz interpolować lub animować kanały. Użyj HSL/HSLA podczas generowania palet, odcieni lub odmian motywów — dostosowanie jasności o 10% jest znacznie łatwiejsze niż rozumowanie o deltach RGB.
Przykłady
Czysta czerwień we wszystkich trzech formatach
Wejście: #FF0000
Wyjście: rgb(255, 0, 0) = hsl(0, 100%, 50%)
Żywy pomarańcz
Wejście: #FF5733
Wyjście: rgb(255, 87, 51) = hsl(11, 100%, 60%)
Biały i czarny
Wejście: #FFFFFF i #000000
Wyjście: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Budowanie odcienia w 5 krokach z jednego HSL odcienia
Wejście: hsl(210, 70%, 50%) — zmieniaj jasność 30/40/50/60/70%
Wyjście: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8 — spójna paleta błękitu
Typowe problemy
- Mieszanie 3-cyfrowego i 6-cyfrowego HEX: #F00 i #FF0000 mają ten sam kolor, ale niektóre parsery akceptują tylko jeden formularz. Normalizuj kod do 6 cyfr, aby uniknąć niespodzianek.
- Zapominając, że HSL jasność 50% nie jest „połową jasności”: przy 100% nasyceniu 50% jasności to czysty odcień; powyżej 50% zabarwia się w kierunku bieli, poniżej 50% zabarwia się w kierunku czerni. „50% szarości” to hsl(0, 0%, 50%).
- Zamieszanie w kanale alfa: #RRGGBBAA (HEX8) jest obsługiwane w nowoczesnych przeglądarkach, ale nie w starszych; rgba()/hsla() ma szerszą obsługę. Zawsze testuj środowisko docelowe.
- Niedopasowanie przestrzeni kolorów: HEX, RGB i HSL opisują sRGB. Jeśli dokonasz konwersji do/z P3 lub Lab/OKLCH (używanego przez nowoczesne wyświetlacze), naiwna kopia kanału będzie generować nieprawidłowe kolory — użyj odpowiedniej biblioteki kolorów.
Porady
- Użyj HSL podczas projektowania palety: wybierz jeden odcień, następnie różnicuj jasność (np. 30/50/70%) i nasycenie (np. 60/80/100%), aby uzyskać spójne odcienie i odcienie.
- Aby zapewnić dostępność, sprawdź współczynnik kontrastu w stosunku do tła — WCAG AA wymaga 4,5:1 dla normalnego tekstu, AAA 7:1. Skorzystaj z naszego Konwertera kolorów, aby obliczyć względną luminancję i kontrast.
- Preferuj nowoczesną metodę CSS color-mix() lub oklch() w celu uzyskania percepcyjnie jednolitej interpolacji — interpolacja RGB może przechodzić przez zabłocone szarości podczas mieszania kolorów dopełniających.
- Generując gradienty, najpierw przekonwertuj punkty końcowe do tego samego formatu — zmieszanie HEX i HSL w jednej deklaracji gradientu może spowodować nieoczekiwane punkty środkowe.