Co to jest kod szesnastkowy? Wszystko co musisz wiedzieć

Praca z kolorami w HTML jest stosunkowo prosta. Za pomocą kilku prostych deklaracji CSS możesz zmienić kolor dowolnego tekstu lub tła na swojej stronie internetowej. Ale jak określić kolor? Odpowiedź na to pytanie zaprowadzi nas do króliczej nory, która ostatecznie doprowadzi nas do koncepcji szesnastkowych kodów kolorów.

Jeśli pracowałeś wcześniej z HTML lub CSS, prawdopodobnie słyszałeś termin kod szesnastkowy. Ale czym właściwie jest kod szesnastkowy? Jakie są przykłady kodów szesnastkowych? Jaka jest różnica między kodem szesnastkowym a kodem koloru RGB?

Co to jest kod szesnastkowy?

Kiedy po raz pierwszy zaczynasz pracę z kolorem, możesz użyć interfejsu graficznego, aby wybrać kolory do zastosowania do elementów na stronie. Kiedy zaczynasz patrzeć na podstawowy kod, a nie tylko na edytor graficzny, okazuje się, że kolory wyglądają jak dziwnie wyglądające sekwencje znaków. Takie sekwencje są znane jako kody szesnastkowe; wyglądają mniej więcej tak:

#FF0092

Związane z: Podstawowe terminy dotyczące projektowania graficznego, które musisz znać

Możesz określić kolory w CSS na kilka różnych sposobów. Możesz użyć nazw niektórych wstępnie zdefiniowanych kolorów, takich jak czerwony oraz ciemnomagenta. Aby jednak określić dokładne odcienie koloru, musisz użyć bardziej precyzyjnego pomiaru: czegoś liczbowego.

CSS oferuje dwie główne opcje: RGB i hex. W obu formatach określasz ilości czerwonego, zielonego i niebieskiego, które składają się na ostateczny kolor. RGB używa trzech liczb z zakresu od 0 do 255. Hex robi dokładnie to samo, tylko z inną podstawą (16) niż przecinek (10), do którego jesteś przyzwyczajony.

Hex używa liter A-F, oprócz cyfr 0-9, co daje w sumie 16 symboli. A w szesnastce jest odpowiednikiem 10 w postaci dziesiętnej. F w szesnastce to 15 w systemie dziesiętnym.

Jak działają kody kolorów szesnastkowych?

W swojej najbardziej podstawowej formie kod szesnastkowy jest reprezentacją tego, ile czerwonego, zielonego i niebieskiego występuje w kolorze. Kod szesnastkowy składa się z sześciu znaków. Pierwsze dwie odnoszą się do ilości czerwonego w mieszance, kolejne dwie odnoszą się do ilości zieleni, a dwie ostatnie cyfry odzwierciedlają ilość niebieskiego. Kody szesnastkowe odnoszą się do określonych kolorów, umożliwiając projektantom i programistom łatwe komunikowanie się na temat schematów kolorów.

Przy 16 × 16 (256) wartościach dla każdego składnika koloru, istnieje zatem 256 × 256 × 256 możliwych kombinacji. W szesnastce ich zakres wynosi od #000000 (czysta czerń) do #FFFFFF (czysta biel).

Jak czytać kody kolorów szesnastkowych

Zrozumienie kodów kolorów szesnastkowych jest łatwe. Weźmy przykład #FF5733. Najpierw podziel sześć znaków na trzy części zawierające po dwa znaki. Jak wiecie, dwie pierwsze części reprezentują kolor czerwony, dwie drugie części reprezentują kolor zielony, a dwie trzecie reprezentują kolor niebieski. Tak więc w naszym przykładzie:

• Składnik czerwony, RR, ma wartość FF.
• Zielony składnik, GG, to 57.
• Niebieski składnik, BB, to 33.

Teraz, aby znaleźć intensywność tych segmentów koloru, musisz obliczyć liczbę szesnastkową, wykonując te trzy kroki:

1. Pomnóż pierwszy znak szesnastkowy RR przez 16. Jeśli znak jest literą, przekonwertuj go na odpowiednią wartość. W tym przypadku pierwszym znakiem jest F, czyli 15. Tak więc dla naszego przykładu mnożysz 15 × 16, co daje 240.
2. Następnie dodaj drugi znak RR. Ponownie przekonwertuj literę na odpowiadającą jej wartość, jeśli zajdzie taka potrzeba. W naszym przykładzie drugim znakiem jest F, które jest równe 15.
3. Po zakończeniu dodaj sumy, aby uzyskać pojedynczą wartość. Jeśli dodasz 240 i 15 z naszego przykładu, zobaczysz, że wartość FF wynosi 255.

Powtórz tę samą formułę dla pozostałych dwóch segmentów, GG oznaczoną przez 57 i BB oznaczoną przez 33. Jeśli ręczne obliczenia wydają się zbyt przytłaczające, zawsze możesz użyć narzędzia do konwersji szesnastkowego na RGB (np. Konwerter binarny szesnastkowy), aby odczytać kolor. Powinieneś odkryć, że wartość szesnastkowa #FF5733 jest równa rgb (255, 87, 51).

Dlaczego kod koloru szesnastkowego jest tak popularny?

Chociaż istnieje kilka różnych modeli kolorów (RGB, CMYK, HSL), kody kolorów szesnastkowych są prawdopodobnie najszerzej stosowanym przedstawieniem. Dzieje się tak, ponieważ są proste i łatwe do zrozumienia.

Bardzo przydatny jest również format o stałej szerokości. Kolory szesnastkowe o pełnej długości zawsze składają się z siedmiu znaków, łącznie z wiodącym # symbol.

Kolory szesnastkowe są bardzo wydajne, używając tylko tych siedmiu znaków do reprezentowania ponad 16 milionów kolorów. A rozróżnianie między tymi kolorami jest prostym procesem.

Klątwa kontra RGB: czy jest jakaś różnica?

System kodowania kolorów RGB wykorzystuje trzy liczby dziesiętne do wskazania względnej intensywności koloru czerwonego, zielonego i niebieskiego. Używa cyfr 0-9.

Hex używa również trzech liczb do reprezentowania czerwonego, zielonego i niebieskiego, ale używa dodatkowych cyfr (A-F), aby zaspokoić podstawę 16. Nie ma różnicy w powstałych kolorach, są to po prostu różne formaty do przekazywania tych samych informacji.

Związane z: Podstawy CSS: praca z kolorami

Do czego służy kod szesnastkowy?

Wiele różnych aplikacji korzysta z RGB, od ekranów telewizyjnych po urządzenia mobilne, gry i znaki. Kody kolorów szesnastkowych zobaczysz głównie w projektach stron internetowych i innych programach graficznych.

Możesz również postrzegać kody szesnastkowe jako uniwersalny sposób identyfikacji kolorów. Wiele stron internetowych używa ich do identyfikacji konkretnego koloru, ponieważ są krótkie i zazwyczaj jednoznaczne w kontekście.

Kod koloru szesnastkowego nie jest nauką o rakietach

Więc masz podstawy kodów kolorów szesnastkowych. Nie są to dokładnie nauki ścisłe, ale służą określonemu celowi w projektowaniu (i w świecie technologii). Jeśli szukasz narzędzia, które pomoże Ci zrozumieć, jak działają kolory szesnastkowe, lub takiego, które nauczy Cię teorii miksów RGB, w Internecie jest mnóstwo. Pamiętaj, że kluczem do uczenia się czegoś nowego jest robienie tego krok po kroku.

Kody kolorów szesnastkowych nie są najbardziej ekscytującą rzeczą na świecie, ale ważne jest, aby je zrozumieć, jeśli pracujesz w projektowaniu stron internetowych. Możliwość pracy z kodami kolorów szesnastkowych znacznie ułatwi pracę projektową.

Jak znaleźć wartość szesnastkową dowolnego koloru na ekranie?

Dowiedz się, jak w kilka sekund wybrać dowolną wartość koloru z ekranu. Szczególnie przydatne dla projektantów stron internetowych!

Czytaj dalej

O autorze