webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> porady >> pozostałe

Zrozumieć kolory szesnastkowe (heksadecymalne)

autor: Paweł 'lisek' Lis, ostatnia modyfikacja: 2008-01-08

szukaj: kolory szesnastkowe kolory szesnastkowe  kolory heksadecymalne kolory heksadecymalne

Większość webmasterów gdy chce uzyskać jakiś niestandardowy kolor, włącza GIMP'a lub zagląda na jakąś stronę z tabelą kolorów. Moja chęć zrozumienia kodów kolorów narodziła się, gdy kolega spytał mnie jak w HTML'u uzyskać czerwień gnijącego koperku... W tym artykule pokażę jak zrozumieć kolory szesnastkowe.

Składniki kodu

Kod składa się z dwóch elementów: znaku # (hash), oraz cyfr i liter np. A1B2C3. Razem dają #A1B2C3. Ten drugi element można rozbić na kolejne trzy elementy:

Cyfry od 0-9 wiadomo co oznaczają, litery od A do F to liczby od 10 do 15. Nie ma znaczenia wielkość liter. W artykule piszę wielkimi dla zapewnienia lepszej czytelności, ale jeśli ktoś chce, może pisać małymi (można wtedy uniknąć takiego zapisu: #A!B@C#).

Każdy z tych trzech elementów można rozbić na kolejne 2:

Jak łatwo się domyślić, każda para określa ilość danego składnika od 0 do 255 w kolorze wyjściowym. Warto zauważyć, że im więcej składników tym kolor wyjściowy jest jaśniejszy. Aby obliczyć wartość dziesiętną koloru mnożymy liczbę szesnastek przez 16 i dodajemy jedności, np. DB = D*16 + B = 13*16 + 11 = 208 + 11 = 219. Jest to raczej ciekawostka, bo webmaster nie musi przeliczać kodów żeby wiedzieć jaki chce otrzymać kolor...

Szarości

Odcienie szarości można uzyskać po prostu stosując identyczne pary kodów, np. #A1A1A1, #000000 (kolor czarny), #FFFFFF (kolor biały).

Kolory skrócone

Kiedy wszystkie pary składają się z dwóch identycznych znaków, można taki zapis skrócić pisząc tylko jeden znak z każdej pary, np. #AAAAAA => #AAA, #11BB55 => #1B5.

Mieszanie składników

Aby otrzymać kolor żółty, po prostu mieszamy kolor czerwony i zielony - #FFFF00. Analogicznie postępując można otrzymać kolor błękitny (#00FFFF), i różowy (#FF00FF). Jeśli chcemy, by żółty był „bardziej czerwony”, to po prostu dodajemy czerwonego. Gdy osiągnie wartość FF, trzeba odjąć zielonego. Jeśli chcemy dodać jeszcze odrobinkę niebieskiego, po prostu go dodajemy, np. #FFFF40.

Rozjaśnianie i przyciemnianie

Na początku ustalamy kolor wyjściowy (w przykładzie ciemnozielony). Mamy więc #00A000. Aby go rozjaśnić dodajemy trochę do głównego składnika i mamy: #00AF00. Kiedy kończą się nam jedności dodajemy do szesnastek: #00B000. Jeśli i to za mało dodajemy znowu do jedności. A co jeśli już dojdziemy do #00FF00? Wtedy trzeba dodać do pozostałych składników (po równo), np. #33FF33. Aby jeszcze rozjaśnić kolor, trzeba dodawać do pozostałych składników tak jak do składnika głównego (jedności, potem szesnastki, jeśli chcesz bardzo rozjaśnić to od razu dodaj do szesnastek). Jeśli dojdziesz do #FFFFFF, otrzymasz kolor biały.

Aby przyciemnić kolor trzeba postępować odwrotnie niż przy rozjaśnianiu, czyli odejmować po równo od pozostałych składników, potem od głównego koloru.

Bezpieczne kolory

Bezpieczne kolory to takie które wszystkie przeglądarki wyświetlają tak samo. Takich kolorów jest 216. Jest więc szansa jedna na 6,5 że na taki trafisz. Do kolorów bezpiecznych nie należą także niektóre kolory, które można zapisać po angielsku, np. maroon.

Pisanie koloru w 3 krokach

Sens kodów szesnastkowych

Kolory można zapisywać za pomocą angielskich nazw (red, green, black...). Kiedy więc pisanie kodów szesnastkowych ma sens? Wtedy, kiedy nie istnieje nazwa angielska koloru, lub jej nie pamiętamy. Bo szukanie angielskiego odpowiednika koloru którego mamy kod jest tylko stratą czasu.

Taki zapis najczęściej stosuję, gdyż można z dokładnością do 1/255. Być może tobie przypadną do gustu inne metody zapisu kolorów. Zobacz: Zapis kolorów w CSS

Paweł 'lisek' Lis

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org