Kolory HEX

Kolory używane do wyświetlania stron internetowych można zapisać na kilka sposobów. Najpopularniejszy jest zapis w formie szesnastkowej (heksadecymalnej) notacji RGB. Obejmuje ona symbol (#), po którym następuje 6 lub 8 cyfr oraz liter z zakresu A-F. Kolor taki jest określany zgodnie z intensywnością jego składowych: czerwonego, zielonego i niebieskiego, z których każdy jest reprezentowany przez osiem bitów. Oznacza to, że do pełnego zapisu koloru używa się 24 bitów, które pozwalają na zapisanie 16 777 216 kolorów.

Losowe nazwy kolorów HEX

Co to jest system szesnastkowy?

System szesnastkowy używa 16 znaków, którym przypisane są odpowiednie wartości systemu dziesiętnego. Symbole używane w systemie szesnastkowym to cyfry 0..9 oraz ltery A..F, gdzie: A = 10, B = 11, C = 12, D = 13, E = 14, F = 15

Jaki to kolor szesnastkowo?

Zapis heksadecymalny (ang. hexadecimal) używany jest w HTML, CSS, SVG. W notacji szesnastkowej jeden bajt reprezentuje liczbę z zakresu od 00 (0 w notacji dziesiętnej) do FF (255 w notacji dziesiętnej). Jeśli wartość jednego z trzech kolorów jest mniejsza niż 10 heksadecymalnie (16 dziesiętnie), musi być przedstawiona z zerem wiodącym, tak aby zapis heksadecymalny miał zawsze dokładnie sześć cyfr. Przykładowy zapis szesnastkowy koloru #33FFCC wygląda następująco:
Bajt 1: wartość koloru czerwonego (dziesiętnie = 51; szesnastkowo = 33)
Bajt 2: wartość koloru zielonego (dziesiętnie = 255; szesnastkowo = FF)
Bajt 3: wartość koloru niebieskiego (dziesiętnie = 204; szesnastkowo = CC)
Bajt 4 (opcjonalny): wartość alfa

Skrócona forma szesnastkowa

Jeśli kolejne cyfry w danym bajcie są takie same jak widać to w powyższym przypadku, można je zapisać w skróconej formie, czyli zamiast #33FFCC zapisujemy #3FC. Należy jednak pamiętać, że niektóre aplikacje mogą błędnie wyświetlać tak zapisany kolor w CSS:
.trzycyfrowy { color: #3FC; } .szesciocyfrowy { color: #33FFCC; }

Ta skrócona forma redukuje paletę do 4096 kolorów, co odpowiada 12-bitowemu kolorowi w przeciwieństwie do 24-bitowego koloru przy użyciu całej sześciocyfrowej formy (16 777 216 kolorów).

Jak wyliczyć kody kolorów hex?

Aby obliczyć liczbę szesnastkową, należy wykonać trzy kroki:
1. Pomnóż pierwszą liczbę (lub liczbę przeliczoną z litery) przez 16.
2. Pomnóż drugą liczbę (lub liczbę przeliczoną z litery) przez 1.
3. Zsumuj te dwie wartości, żeby uzyskać pojedynczą wartość.

Przykład obliczenia kodu koloru szesnastkowego

Na przykład dla liczby dziesiętnej 33 wartość szesnastkowa wynosi 51. Wyliczamy to w następujący sposób:
Mnożąc 3 z 33 przez 16 (3x16=48).
Mnożąc kolejną cyfrę 3 z 33 przez 1 (3x1=3).
Dodając do siebie uzyskane wyniki (48+3=51).

Podobnie sytuacja wygląda w przypadku liter. Pamiętać należy tylko, żeby najpierw przekształcić literę w odpowiadającą jej wartość liczbową. W przypadku litery C będzie to 12.
Dlatego najpierw mnożymy 12x16, a następnie kolejne C czyli 12x1 i sumujemy otrzymując wynik 204.

Kolor zielony w HEX

W zapisie heksadecymalnym (ang. hex triplet) mimo tego, że #00FF00 to czysta zieleń, taka, jaką monitor wyświetla zielone światło, to odcień #008000 daje zieleń bardziej naturalną, odpowiadającą temu, jak zieleń wygląda w naturze. Dlatego też w specyfikacji WC3 wśród 16 kolorów podstawowych kolor #00FF00 jest oznaczony jako lime (limonkowy), a jako green (zielony) występuje kolor #008000

Nazwy kolorów

W specyfikacji W3C dla HTML4 jest lista 140 nazw kolorów, w tym 16 kolorów podstawowych. Po co nazwy kolorów dla HTMLa? Odpowiedź wydaje się oczywista - łatwiej jest zapamiętać i używać nazwy koloru np. pink (różowy) niż jego kodu hex #ffc0cb. Warto jednak pamiętać, że w specyfikacji niektóre kolory różnią się nazwą to jednak dotyczą tego samego koloru. Tak jest w przypadku koloru Cyan (Aqua), Fuchsia (Magenta) oraz Grey (Gray)

Pozostałe zduplikowane nazwy kolorów:
• Dimgray / Dimgrey - hex #696969, rgb(105,105,105)
• Lightgray / Lightgrey - hex #D3D3D3, rgb(211,211,211)
• Darkgray / Darkgrey - hex #A9A9A9, rgb(169,169,169)
• Slategray / Slategrey - hex #708090, rgb(112,128,144)
• Lightslategray / Lightslategrey - hex #778899, rgb(119,136,153)
• Darkslategray / Darkslategrey - hex #2F4F4F, rgb(47,79,79)