⤺ próbnik kolorów
0
Reddit

Co to jest kod koloru? Kompletny przewodnik po kolorach hex

18-01-2022, opublikowano przez ColorsData Team


Hex colors table

Heksadecymalny kod koloru (hex) to bardzo popularny format prezentowania kolorów w palecie barw RGB. Używany jest między innymi HTML, CSS oraz programach graficznych.

Szesnastkowy kod koloru

Zapis szesnastkowy koloru składa się z sześciu cyfr szesnastkowych - #123ABC. Każda cyfra szesnastkowa może przyjmować wartości od 0 do 15, gdzie cyfry reprezentują wartości od 0 do 9, a litery odpowiednio:
A – 10,
B – 11,
C – 12,
D – 13,
E – 14,
F – 15.

Sześć cyfr szesnastkowych tworzy trzy bajty, które zgodnie z modelem RGB prezentują barwy: czerwoną, zieloną i niebieską. Każdy bajt składa się z dwóch cyfr szesnastkowych i może przyjąć wartość od 00 (0) do FF (255).
Zapis możemy skrócić tylko jeśli każdy z bajtów składa się z dwóch takich samych cyfr, na przykład:
kolor fuksja (#FF00FF) może zostać zapisany jako #F0F.

Konwersja zapisu szesnastkowego (hex) do wartości RGB

Aby uzyskać wartość RGB w zakresie od 0 do 255 należy dla każdego z bajtów:

  • Pierwszą cyfrę szesnastkową pomnożyć razy 16
  • Odczytać wartość drugiej cyfry
  • Zsumować obie liczby

Example of converting hex color code to rgb values

Do przykładu użyjemy pięknego zielonego koloru #6DC415.
Początkowo kod hex musimy podzielić na trzy bajty reprezentujące każdą z barw RGB: # 6D | C4 | 15.

Pierwszy bajt 6D (Red/Czerwony):
6 -> 6 × 16 = 96
D -> 13
Kolor czerwony -> 96 + 13 = 109

Drugi bajt C4 (Green/Zielony):
C -> 12 × 16 = 192
4 -> 4
Kolor zielony ->  192 + 4 = 196

Trzeci bajt 15 (Blue/Niebieski):
1 -> 1 × 16
5 -> 5
Kolor niebieski -> 16 + 5 = 21

Podsumowując:
#6DC415 => czerwony: 109, zielony: 196, niebieski: 21.

Ile kolorów możemy przedstawić w kodach hex?

Ponieważ każdy z bajtów może być reprezentowany przez 256 wartości (od 0 do 255) w systemie szesnastkowym możemy zapisać: 256 × 256 × 256 kolorów, czyli 16 777 216. Co ciekawe popularny staje się zapis szesnastkowy uwzględniający przezroczystość w formacie #AARRGGBB, gdzie AA oznacza "Alpha", czyli przezroczystość (FF = 100%, 00 = 0% przezroczystości). W tym przypadku ilość kolorów to 256 × 256 × 256 × 256, czyli aż 4 294 967 296.

Przykładowe kody hex w palecie barw HTML:

Red = #FF0000 = RGB(255, 0, 0)
Green = #008000 = RGB(1, 128, 0)
Blue = #0000FF = RGB(0, 0, 255)
White = #FFFFFF = RGB(255,255,255)
Black = #000000 = RGB(0,0,0)

Przykład użycia kodu szesnastkowego HTML i CSS

Dla każdego przykładu otrzymamy ten sam czerwony kolor tła:

  • Hex: <div style=”background-color:#FF0000″></div>
  • RGB: <div style=”background-color:rgb(255, 0, 0)”></div>
  • Name (nazwa): <div style=”background-color:red”></div>

Należy zauważyć, że nazwy można używać tylko w ponad 100 z 16 777 216 kolorów.


18-01-2022, opublikowano przez ColorsData Team