Let's make the WebPerfect.pl

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 chciałbym zaznaczyć, że w większości przypadków, używanie skomplikowanej kompozycji kolorów i tak może okazać 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 chodzi o zapis liczb. Ponieważ nie jest to artykuł nt. systemów liczbowych przedstawię tylko jedną ich cechę  – zakres liczbowy (inaczej przestrzeń znakową, w której możemy operować). Otóż 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 zakres mieści się więc 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. 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 (A), a kończymy na literze szóstej (F).

Aby operować kolorami w trybie HEX powyższe wiadomości na temat liczb można uznać za wystarczające.

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.

Przykładowo, 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 też zmieszać kolory w powyższy sposób (np. czerwony + zielony = żółty lub czerwony + niebieski = fioletowy).

Nieco bardziej fachowe tłumaczenie

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 takiemu rozwiązaniu (dwa znaki systemu heksadecymalne na kolor) można uzyskać aż 16 777 216 kolorów (proste obliczenie – dla każdego koloru mamy 256 możliwości – tak jak wyżej napisałem od 0 do 255 – i mamy 3 kolory, czyli 256³ daje nasz wynik).

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. Ta skrócona paleta umożliwia nam uzyskanie 4096 kolorów (16³)

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.

System heksadecymalny jest jednym z kilku sposobów na określanie kolorów. Na potrzeby WWW możemy posłużyć się również notacją dziesiętną, procentową lub za pomocą modelu HSB (ang. Hue, Saturation, Brightness – Barwa, Nasycenie, Jaskrawość) określany też jako HSL..

Tagi: format kolorów, grafika, heksadecymalny, hex, HSB, kolory, RGB, system liczbowy.