Jesteś tutaj: webmade.org >> porady >> pozostałe
autor: Paweł 'lisek' Lis, ostatnia modyfikacja: 2008-01-08
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.
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...
Odcienie szarości można uzyskać po prostu stosując identyczne pary kodów, np. #A1A1A1, #000000 (kolor czarny), #FFFFFF (kolor biały).
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.
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.
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 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.
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
szukaj: kolory szesnastkowe kolory heksadecymalne
Osoby czytające tę publikację przeglądały również:
© 2004-2008 copyright by webmade.org