HTML i XHTML


Kolory HEX. Jak je tworzyć i odczytywać?

Nie ma możliwości określenia wszystkich kolorów słowami. Nic w tym dziwnego skoro można uzyskać miliony ich odcieni. Można je określić jednak liczbami i bardzo przydatny może okazać się tutaj system heksadecymalny...

Na wstępie zaznaczę, że w większości przypadków, używanie skomplikowanej kompozycji kolorów i tak okaże się uciążliwe. O wiele lepszym sposobem będzie użycie dowolnego generatora. Zdarzają się jednak również takie sytuacje, w których to generator staje się zbędny.

System heksadecymalny - HEX

System heksadecymalny to alternatywny system liczbowy. W normalnym życiu używamy systemu dziesiętnego (decymalnego). W komputerach stosowany jest system binarny (dwójkowy). Znanym systemem używanym w komputerach jest też system oktalny (ósemkowy).

O co tutaj chodzi?

Oczywiście o zapis liczb. Ponieważ nie jest to artykuł nt. systemów liczbowych przedstawię tylko podstawową charakterystykę - mianowicie zakresy.

Systemy liczbowe wykorzystują pewne zakresy. Po przekroczeniu danego zakresu następuje swojego rodzaju pętla (cyfry się powtarzają).

Oto zakresy dla przykładowych systemów liczbowych:

  • DECIMAL (dziesiętny) - 0-9
  • OCTAL (ósemkowy) - 0-7
  • BINARY (dwójkowy) - 0-1
  • HEXADECIMAL (szesnastkowy) - 0-15

W pierwszych trzech systemach wykorzystywane są wyłącznie cyfry. System heksadecymalny jest inny. Ponieważ cyfr mamy tylko od 0 do 9, a zakres HEX-ów jest do 15 - pięć cyfr trzeba czymś zastąpić.

W systemie heksadecymalnym liczby od 10 do 15 zastąpiono literami alfabetu łacińskiego

Zatem w systemie tym mamy do wyboru znaki 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 oraz A, B, C, D, E, F. Prawidłowy więc zakres mieści się w przedziale 0 - F.

Na pewno zwróciłeś uwagę na nazewnictwo powyższych systemów. Przytoczę tutaj kolejną regułkę:

Nazwa systemu liczbowego oznacza ilość wykorzystywanych znaków, a nie ostatnią liczbę zakresu

W systemie dziesiętnym wykorzystujemy 10 cyfr, czyli 10 znaków. Numerację zaczynamy od zera. W systemie heksadecymalnym wykorzystujemy 16 znaków - tutaj również zaczynamy numerację od zera, kończymy na dziewiątce i rozpoczynamy od pierwszej litery alfabetu łacińskiego.

Aby operować kolorami w trybie HEX powyższe wiadomości na temat liczb w zupełności Ci wystarczą. Możesz być jednak pewien, że w portalu pojawi się artykuł odnoszący się to tego zagadnienia...

Kolory HEX, czyli #XXYYZZ

Format kolorów heksadecymalnych opiera się o trzy kolory podstawowe: czerwony, zielony i niebieski (Red, Green, Blue). Powyższe oznaczenie #XXYYZZ określa się jako #RRGGBB (pierwsze litery angielskich nazw kolorów).

Numer koloru (0-F) oznacza jasność, gdzie 0 to kolor najciemniejszy, natomiast F to kolor najjaśniejszy. Można też uznać, że niższa cyfra oznacza poziom zaniku koloru (0 - brak koloru, F- kolor rzeczywisty). W ten sposób można mieszać kolory.

Aby uzyskać kolor czerwony można użyć #FF0000 (dwa F oznaczają pełny kolor czerwony, pozostałe kolory - brak zielonego i niebieskiego). Analogicznie do tego przykładu możemy uzyskać kolor zielony (LIME) - #00FF00 oraz niebieski - #0000FF.

Są to oczywiście najjaśniejsze odcienie podanych kolorów. Jeżeli wartości będą mniejsze - dany kolor będzie ciemniejszy. Wartości każdego koloru określa się mianem nasycenia.

Możemy zmieszać kolory w powyższy sposób (np. czerwony + zielony = żółty lub czerwony + niebieski = fioletowy).

Nieco bardziej fachowe tłumaczenie

Kolor uzyskujemy ustalając trzy parametry: barwa, nasycenie, jaskrawość. Określa to model HSB (ang. Hue, Saturation, Brightness). Każdy parametr mieści się w zakresie od 0 do 255, czyli od 00 do FF w heksach.

Nie wszystkie kolory możemy zauważyć - ograniczeniem jest tutaj układ wzrokowy człowieka. Komputer potrafi te kolory rozpoznać, a dzięki rozwiązaniu heksadecymalnemu, można uzyskać, aż 16 777 216 kolorów.

Inny format: #RGB

Istnieje też nieco uproszczony format tworzenia kolorów w systemie heksadecymalnym. Ma on postać #RGB i można w nim uzyskać 4096 możliwości kolorów.

Nasycenie każdego koloru mieści się w zakresie od 0 do 15, czyli od 0 do F (HEX) dla każdego z kolorów.

Skala szarości

Skala szarości mieści się w przedziale od #000000 do #FFFFFF, czyli pomiędzy czarnym, a białym kolorem. Aby w miarę łatwo utworzyć kolor szary należy ustawiać wartości w taki sposób, aby barwa, nasycenie oraz jaskrawość był takie same.

Przykładowy kolor szary to: #AAAAAA.

Aby kolor był ciemniejszy należy zmieniać wartości w stronę zera, aby był jaśniejszy - odwrotnie.

Paleta bezpiecznych kolorów

Niestety wykorzystując wszystkie kombinacje nie uzyskamy kompatybilności z wszystkimi systemami i komputerami. Dzieje się tak ponieważ nie każdy komputer czy system operuje na takiej samej palecie.

Istnieje jednak pewien format gwarantujący kompatybilność. Jest to paleta 216 bezpiecznych kolorów, które powinny wyświetlać się tak samo na każdym komputerze. Rozwiązanie to zostało opracowane niegdyś przez firmę Netscape dla kompatybilności z monitorami 8-bitowymi.

Paleta 216 bezpiecznych kolorów określana jest mianem Web-Safe (Colours). Można ją znaleźć w większości programów oferujących palety kolorów oraz w programach graficznych (Photoshop od wersji 3.0).

Podsumowanie

Idea wyliczania kolorów heksadecymalnych jest dosyć prosta w zrozumieniu. Zastosowano podział na trzy podstawowe kolory, których nasycenie można zmieniać od 0 do 255 każdy.

W łatwy sposób możemy wygenerować odcienie kolorów podstawowych (jaśniejszy-ciemniejszy). Kolory w skali szarości otrzymamy podając te same wartości nasycenia dla wszystkich. Inne kolory otrzymamy poprzez mieszanie kolorów podstawowych.

Istnieją dwa formaty zapisu: #RRGGBB oraz #RGB - różnią się one ilością kombinacji. Na potrzeby stron internetowych oraz dla zapewnienia kompatybilności należy posługiwać się bezpieczną paletą 216 kolorów, która powinna znajdywać się w każdym programie graficznym (Web-Safe).

Zastosowany znak # (ang. hash) oznacza, że przedstawiony dalej ciąg będzie miał postać heksadecymalny.

Dodał: Paweł​Dzedzej
Dział: HTML i XHTML


 

ComputerSun.pl na FaceBooku
Polecamy lekturę:

Excel 2007 PL. Pierwsza pomoc
# MAGAZYNY

Tańsze e-wydania:

e-prasa: Computerworld - e-wydanie

Zobacz wszystkie:
e-wydania: Internet i komputery




X

Zapisz się na biuletyn serwisu ComputerSun.pl, aby otrzymać poradnik:

Zabezpieczanie sieci bezprzewodowych. Przydatne wskazówki jak chronić sieć domową przed intruzami

Imię:  
Email:
Tak, akceptuję Politykę Prywatności