O kolorach w systemie heksadecymalnym pisałem już w tym artykule: Kolory HEX. Jak je tworzyć i odczytywać?

Paleta 16 kolorów podstawowych

Na potrzeby WWW określono 16 kolorów, które określono słowami. Poniżej nazwy kolorów (w nawiasie ich heksadecymalne odpowiedniki), które możemy użyć w CSS:

• black(#000000)
• silver(#C0C0C0)
• gray(#808080)
• white(#FFFFFF)
• maroon(#800000) red(#FF0000)
• purple(#800080)
• fuchsia(#FF00FF)
• green(#008000)
• lime(#00FF00)
• olive(#808000)
• yellow(#FFFF00)
• navy(#000080)
• blue(#0000FF)
• teal(#008080)
• aqua(#00FFFF)

W raz z rozwojem wersji CSS pula tych nazw trochę się zwiększyła i tak w przypadku CSS 2.1 mamy jeden dodatkowy kolor orange(#FFA500), natomiast w CSS 3 dodano jeszcze 130 nazw.

Kolory dziesiętne RGB

W bardzo łatwy sposób możemy za pomocą liczb dziesiętnych zakodować odpowiedni kolor. Podobnie jak w systemie heksadecymalnym mamy 16 777 216 kombinacji, po 256 dla każdego koloru (czerwony, zielony, niebieski).  Dla każdego koloru możemy zatem wybrać liczbę z zakresu od 0 do 255 i użyć w przykładowy sposób (CSS):

body{
color: rgb(0,0,255);
...
}

W powyższy sposób otrzymamy kolor już wiadomo chyba jaki.

Jak zamienić HEX na dziesiętny RGB?

Możesz potraktować to jako ciekawostkę, bo o ile nie napiszesz własnej palety koloru to raczej nie wiele Ci się to przyda, no ale może warto wiedzieć.

A więc tak: przypominam, że przedział systemu szesnastkowego przyjmuje znaki od 0-F (liczbowo byłoby to 0-15) . Aby zamienić HEX na dziesiętne odczytujemy wartość HEX i mnożymy x16 do odpowiedniej potęgi każdą liczbę, następnie wszystko dodajemy. Żeby było łatwiej pokaże to na przykładzie:

HEX F = DEC 15, bo 15*16^0 = 15
HEX FF = DEC 255, bo 15*16^1  + 15*16^0 = 255
HEX FFF = DEC 4095, bo 15*16^2 + 15*16^1 + 15*16^0 = 4095

Potęgi liczymy od 0 do ilości znaków kodu heksadecymalnego, w taki sposób, że jedności będą miały potęgę 0, dziesiątki potęgę 1, setki potęgę 2 itd…  Prościej mówiąc lecimy z potęgami od prawej do lewej strony (licząc od 0).

Zamiana w drugą stronę jest już nieco bardziej skomplikowana, więc na razie sobie ją darujemy.

Procentowy RGB

Kolor RGB możemy zapisać w postaci procentowej. Po prostu nadajemy tutaj wartości od 0 do 255, tyle, że w procentach (100% = 255):

body{
    background: rgb(0%,100%,0%);
...
}

W ten oto sposób otrzymaliśmy zielone tło. Należy pamiętać, że pomiędzy wartością liczbową a znakiem procentu nie może być żadnych odstępów i wszystkie wartości muszą być określane w procentach.

Nie jest to idealne rozwiązanie dla kogoś, kto chce dopasować kolor pod grafikę.

Dosyć ciekawego rozwiązania dostarcza nam CSS w wersji 3, a konkretnie chodzi o określanie koloru RGB ze stopniem przezroczystości alpha. Wygląda to następująco:

div{
   background: rgba(100%,0%,0%,0.5);
...
}

Wartość alpha mieści się w przedziale 0 (pełna przezroczystość) do 1 (wartość domyślna – brak przezroczystości).

Sposób ten akceptują przeglądarki, które obsługują przezroczystość (IE ma z tym problemy).

Model HSL

Jest to dosyć ciekawe rozwiązanie. Wybieramy barwę (ang. Hue), następnie określamy nasycenie (ang. Saturation) oraz jasność (ang. Lightness). Jednym słowem nie mieszamy  bezpośrednio kolorów, jak w przypadku RGB. Określamy go tak: hsl(H, S%, L%).

Barwa (H) określana jest  jako liczba całkowita w stopniach z przedziału 0 do 360 (koło barw). I tak oto wartość 0 daje nam barwę czerwoną, w kierunku do 120 jest coraz bardziej zielona, natomiast 240 to już barwa niebieska, a kolejne wyższe wartości kierują nas coraz bardziej w barwę czerwoną. Następnie procentowo określamy nasycenie oraz jasność. System ten określany jest również jako HSB (ang. Brightness – jasność).

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..