Let's make the WebPerfect.pl

Kolory możemy definiować na rozmaite sposoby. Najbardziej popularnym i najchętniej używanym sposobem określania koloru jest system HEX. Istnieją również inne sposoby na osiągnięcia takich samych lub podobnych rezultatów. Oprócz rozwiązań liczbowych istnieją jeszcze słowne oraz procentowe.

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ść).

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