Archiwum tagu: bezpieczne zestawy barw

Dobór kolorów na stronie internetowej

Projektując wygląd strony, warto zwrócić uwagę na dobór kolorów. Każda przeglądarka stron www pozwala uzyskać na ekranie jednocześnie 256 różnych kolorów, jednak tylko 216 z nich poprawnie wyświetlają wszystkie przeglądarki internetowe. Używając “bezpiecznego” zestawu barw masz pewność, że kolor zostanie pokazany tak samo w każdym systemie operacyjnym (paleta 256 kolorów w systemie Windows nie odpowiada tym samym kolorom systemowym w komputerze Macintosh). Jeżeli użyjesz większej ilości kolorów, mogą one zostać zamienione do podobnych kolorów z podstawowego zestawu barw, czyli wspomnianych, “bezpiecznych” 216 kolorów.

Dowolny kolor składa się z trzech podstawowych barw: czerwonej, zielonej i niebieskiej, czyli tzw. RGB (R - red, G - green, B - blue). Do dyspozycji mamy 256 odcieni każdego z tych kolorów i poprzez ich mieszanie otrzymujemy dowolny inny kolor. Kolor RGB zapisywany jest w postaci #RRGGBB, gdzie RR to zapisany szesnastkowo (heksadecymalnie) kolor czerwony (red), GG to kolor zielony (green), a BB to kolor niebieski (blue). Oznacza to, że każdy kolor może przyjmować wartości od 00 do FF. W stylach CSS pojawia się jeszcze zapis dziesiętny koloru RGB w postaci rgb(RR,GG,BB), gdzie każda składowa może przyjmować wartości od 0 do 255. Bezpieczne kolory operują wielokrotnością liczby 33 w systemie szesnastkowym (00, 33, 66, 99, CC, FF) i 51 w systemie dziesiętnym (0, 51, 102, 153, 204, 255).

Można też używać nazw kolorów. Obecnie dostępnych nazw jest 140, niektóre z nich to: white (kolor biały - #FFFFFF), black (kolor czarny - #000000), green, blue, fuchsia, yellow, lime, olive, purple, teal, silver, red, navy, maroon, gray, aqua. Należy jednak pamiętać, że nie w pełni odpowiadają one bezpiecznej palecie, np. zapis szesnastkowy koloru maroon to #800000. Oczywiście, nie ma takiego w tablicy bezpiecznych kolorów!

Można nie zwracać uwagi na różnicę jeśli umieszczamy tylko zielony napis lub zieloną tabelę. Wtedy nawet lepiej stosować nazwy, bo nie trzeba zastanawiać się, jak zapisać kolor zielony za pomocą #RRGGBB. Informacja ta zaczyna nabierać znaczenia wyłącznie przy łączeniu bitmapy (GIF, JPEG) z kolorami na stronie www wprowadzonymi np. takimi instrukcjami:

color: #00ff66; - ustala kolor czcionki za pomocą stylu,
background-color: #00ff66; - ustala kolor tła za pomocą stylu.

Obecnie nie zaleca się stosowania atrybutów HTML. Powinno się je zamieniać na style CSS. W stylach, w miejsce #RRGGBB można wpisać kolor w postaci szesnastkowej (np. #CCFFCC), nazwy angielskiej (np. maroon) lub wartości RGB - rgb(20,20,99). Oto odpowiedniki:

alink - a:active { color: #RRGGBB; }
bgcolor - background-color: #RRGGBB;
color - color: #RRGGBB;
link - a:link { color: #RRGGBB; }
text - color: #RRGGBB;
vlink - a:visited { color: #RRGGBB; }

Projektując wygląd strony można również skorzystać ze znajdujących się w internecie serwisów wspomagających dobieranie kolorów i projektujących bezpieczne zestawy barw dla tabel, linków, tekstu czy tła.