Kody kolorów HEX: jak działa #RRGGBB

Jak działa kod koloru HEX

Każdy kolor na ekranie powstaje z czerwonego, zielonego i niebieskiego światła. Kod HEX zapisuje natężenie każdego z nich jako dwa znaki po znaku #: najpierw czerwony, potem zielony, na końcu niebieski. To właśnie wzorzec #RRGGBB.

Znaki są szesnastkowe: to system liczenia z 16 cyframi, od 0 do 9, a dalej a (10), b (11), c (12), d (13), e (14) i f (15). Jedna para obejmuje 256 wartości, od 00 (0) do ff (255), czyli dokładnie zakres rgb().

Aby zamienić parę na zwykłą liczbę, pomnóż pierwszą cyfrę przez 16 i dodaj drugą. Poniżej #1e90ff, czyli kolor CSS dodgerblue, w czterech formatach, a dalej rozpisany para po parze.

Zatem #1e90ff to rgb(30, 144, 255): trochę czerwonego, sporo zielonego i pełny niebieski, co razem daje jasny błękit nieba. Trzy pary po 256 wartości dają 16 777 216 możliwych kolorów.

Skrócony zapis HEX: 3 i 4 cyfry

Gdy obie cyfry w każdej parze są takie same, możesz zapisać każdą parę jedną cyfrą. #ffcc00 zmienia się w #fc0, a przeglądarka z powrotem podwaja każdą cyfrę. #1e90ff nie ma krótkiej formy, bo 1e i 90 nie są parami powtórzonych cyfr.

Krótka forma obejmuje tylko 4096 z 16,7 mln kolorów. Wersja czterocyfrowa w ten sam sposób dodaje krycie, więc #f008 oznacza #ff000088.

Przezroczystość w HEX: 8-cyfrowy kod z kanałem alfa

Kod ośmiocyfrowy dodaje czwartą parę dla kanału alfa, czyli krycia: #RRGGBBAA. 00 oznacza pełną przezroczystość, a ff pełne krycie. Każda aktualna przeglądarka obsługuje go w CSS, podobnie jak czterocyfrowy skrót #RGBA.

Aby uzyskać parę, pomnóż krycie przez 255, zaokrąglij do liczby całkowitej i zamień na HEX. 50% daje 127,5, co po zaokrągleniu daje 128, zapisane jako 80. Oto pełna tabela dla #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Są dwa haczyki. Po pierwsze, 80 to 128 z 255, czyli 50,2%, a nie dokładnie 50%: alfa w HEX ma tylko 256 kroków, więc większość okrągłych wartości procentowych to przybliżenia. Po drugie, Android stawia alfę na początku. W zasobie koloru w Androidzie #801e90ff oznacza to samo co #1e90ff80 w CSS.

Jak odczytać kod HEX na oko

Kolor da się odgadnąć bez żadnej konwersji. Patrz na pierwszą cyfrę każdej pary, bo niesie prawie całą informację.

• Największa pierwsza cyfra wskazuje dominujące światło. #d2691e ma d w czerwonym, 6 w zielonym i 1 w niebieskim, więc to pomarańczowy brąz.
• Dwa wysokie kanały się mieszają: czerwony i zielony dają żółty, zielony i niebieski dają cyjan, a czerwony i niebieski magentę lub fiolet.
• Trzy równe pary dają szarość. #333333 to ciemna szarość, #999999 jasna. Prawie równe pary, jak w #708090, dają stonowany, szarawy kolor.
• Wysokie cyfry ogólnie oznaczają jasny kolor, niskie ciemny. Gdy wszystkie trzy pary mają wartość c0 lub wyższą, kolor jest blady. Gdy wszystkie mają 30 lub mniej, jest bardzo ciemny.
• Zielony przy tej samej liczbie wygląda na znacznie jaśniejszy niż niebieski. #00ff00 ma jasność OKLCH 0,866, a #0000ff tylko 0,452.

Dlaczego #808080 to nie środkowa szarość

#808080 leży dokładnie w połowie skali liczb: 128 z 255 w każdym kanale. Nie wygląda jednak na kolor w połowie drogi między czernią a bielą. Jego jasność OKLCH wynosi 0,600, więc odbieramy go jako 60% drogi do bieli.

Wartości HEX są już zakodowane krzywą sRGB, która w przybliżeniu, ale nie dokładnie, odpowiada oku. #808080 emituje około 21,6% światła bieli, a modele percepcyjne umieszczają wizualny środek niżej: OKLCH przy #636363, CIELAB przy #777777.

Ma to znaczenie dla tekstu. Szary #808080 na białym daje 3,95:1 i nie spełnia WCAG AA dla tekstu głównego. #767676 to najjaśniejsza szarość, która osiąga 4,5:1, a #777777, o jeden krok jaśniejszy, już nie przechodzi z wynikiem 4,48:1.

Wielkie czy małe litery, z # czy bez

W kodach HEX wielkość liter nie ma znaczenia. #1E90FF, #1e90ff i #1E90ff to ten sam kolor w CSS, SVG i narzędziach projektowych. Wybierz jeden styl i trzymaj się go wszędzie, żeby wyszukiwanie w kodzie znajdowało każde użycie. W CSS najczęściej wybiera się małe litery.

Znak # należy do składni CSS, a nie do koloru. Figma i wiele narzędzi projektowych pokazuje kod bez niego, a języki programowania często zapisują go jako liczbę z prefiksem 0x, jak we Flutterze, gdzie Color(0xFF1E90FF) zaczyna się od pary alfa.

Jak znaleźć kod HEX koloru na ekranie

Użyj pipety: narzędzia, które odczytuje kolor pod kursorem i pokazuje jego kod. Takie narzędzia są darmowe i zwykle już zainstalowane.

• Chrome i Edge: otwórz DevTools klawiszem F12, kliknij dowolny kwadrat koloru w panelu Styles i użyj ikony pipety, aby pobrać kolor ze strony.
• PickShade: próbnik kolorów na stronie głównej ma w Chrome i Edge przycisk pipety, który pobiera kolor z dowolnego miejsca na ekranie.
• Windows: zainstaluj Microsoft PowerToys i naciśnij Win + Shift + C, aby otworzyć Color Picker.
• macOS: otwórz Kolorymetr cyfrowy (Digital Color Meter) z folderu Aplikacje, Narzędzia. Przełącz go na sRGB, a potem w menu Widok ustaw wyświetlanie wartości szesnastkowo.
• Figma, Photoshop i większość aplikacji graficznych: naciśnij I, aby włączyć pipetę.
• Na zdjęciu lub zrzucie ekranu: otwórz je w próbniku kolorów z obrazu i kliknij dowolny piksel. Obraz zostaje na twoim urządzeniu.

Pobrana wartość może się różnić od oryginału o kilka jednostek, bo ekrany stosują profile kolorów, a obrazy są kompresowane. Gdy potrzebujesz dokładnej wartości, skopiuj ją z pliku projektu lub z CSS, a nie ze zrzutu ekranu.

Pytania i odpowiedzi