Kaila Studio

Poradnik webdesignera



Strona główna
Uwagi ogólne
Błędy
Przykazania
Artykuły
Linki
Słowo od autorki
Email
  Jak widać kolory na sieci

Numerkowanie kolorów, czyli tajemnicze RGB

Każdy z kolorów, który widzisz na ekranie powstaje z pomieszania odcieni kolorów czerwonego, zielonego i niebieskiego (ang: red, green, blue - RGB). Mamy do dyspozycji 255 odcieni czerwonego, 255 odcieni zielonego i 255 odcieni niebieskiego, z których możemy komponować żądany kolor. Każdemu z kolorów odpowiada określony kod liczbowy. W przypadku zapisu komputerowego do numerowania kolorów używany jest system szesnastkowy. System szesnastkowy polega na tym, że dopiero z liczby 15 przeskakujemy na 0. Wszystkie liczby powyżej 9 symbolizowane są literami. Tak więc A=10, B=11 (...) F=15. Czyli przykładowo AC=172 (10*16+12), FF=255 (15*16+15).

Kod koloru składa się z sześciu znaków: pierwsze dwa reprezentują kolor czerwony, dwa środkowe - kolor zielony, a pozostałe - kolor niebieski.

  • czerwony (red) #FF0000
  • zielony (green) #00FF00
  • niebieski (blue) #0000FF
Im większa (wyższa) jest liczba reprezentująca dany kolor - tym kolor jest jaśniejszy - gdy dodamy maksymalną możliwą ilość każdego z kolorów otrzymamy kolor biały (#FFFFFF). Łatwo się więc domyślić, że kod koloru czarnego to #000000. Jeżeli zestawimy jednakowe wartości każdego z kolorów otrzymamy kolor szary. 

Bezpieczna paleta kolorów  

Ilość kolorów na sieci ograniczona jest ilością odcieni, które mogą być wyświetlone przez przeglądarkę jest ich 256. Pochodzi to z czasów gdy większość komputerów obsługiwała jedynie 256 kolorów i Netscape zaproponował adekwatny do tego sześcian kolorów (6x6x6). Tak już niestety zostało. 

Bezpieczna paleta kolorów to ta, która jest używana przez najbardziej popularne przeglądarki (Netscape i Internet Explorer) oraz pokrywająca się dla systemów Windows oraz Macintosh. Kiedy wyeliminujemy 40 kolorów, które się różnią na tych dwóch platformach, pozostanie nam bezpieczna paleta 216 kolorów, co do których mamy gwarancję, że będą się poprawnie wyświetlać niezależnie od używanego sprzętu i oprogramowania.

Projektując grafikę na stronę internetową warto o tym fakcie pamiętać, ponieważ jeżeli użyjemy koloru, który nie będzie występował w palecie używanej przez przeglądarkę zostanie on przez nią zasymulowany. Proces ten nazywa się dithering i polega na mieszaniu dostępnych kolorów i wyświetlaniu obok siebie pikseli o różnych odcieniach, żeby stworzyć jak najlepsze wrażenie żądanego koloru. 

Oglądając obraz z pewnej odległości nasze oko uśrednia sobie intensywność poszczególnych pikseli, ponieważ nie skupia się na każdym z nich osobna. Jeżeli jednak nieistniejący w palecie kolor znacznie odbiega od dostępnych barw, możemy zauważyć 'ziarnistość' obrazu lub niezbyt płynne przechodzenie kolorów. 

Bezpieczna paleta powinna być stosowana w do kolorów tła (bardzo ciężko czyta się tekst zamieszczony na tle z symulowanego koloru), tekstu oraz grafiki gdzie występują duże jednookolorowe powierzchnie. Pamiętaj, że grafika wykonana przy użyciu przypadkowo dobranej palety kolorów może się zupełnie inaczej wyświetlać w zależności od platformy sprzętowej, rodzaju monitora czy też przeglądarki internetowej.

Do fotografii można zastosować paletę z większą ilością kolorów, gdyż dithering w tym przypadku dobrze się sprawdza.

Prawo 20%  

Żeby uzyskać 'bezpieczne kolory' należy używać kombinacji poszczególnych składników będących liczbami, których wartości zwiększają się o 20% (poczynając od zera), co daje nam wielokrotność 51 w systemie dziesiętnym oraz 33 w systemie szesnastkowym. W tabelce poniżej zamieszczone są wszystkie liczby, których kombinacji można używać.

procent 0% 20% 40% 60% 80% 100%
0 - 255 (system dziesiętny) 0 51 102 153 204 255
00 - FF (system szesnastkowy) 00 33 66 99 CC FF


Bezpieczna paleta 216 kolorów:

FF9900 FFCC00 FFFF00
CC9900 CCCC00 CCFF00
999900 99CC00 99FF00
669900 66CC00 66FF00
339900 33CC00 33FF00
009900 00CC00 00FF00
FF9933 FFCC33 FFFF33
CC9933 CCCC33 CCFF33
999933 99CC33 99FF33
669933 66CC33 66FF33
339933 33CC33 33FF33
009933 00CC33 00FF33
FF9966 FFCC66 FFFF66
CC9966 CCCC66 CCFF66
999966 99CC66 99FF66
669966 66CC66 66FF66
339966 33CC66 33FF66
009966 00CC66 00FF66
FF9999 FFCC99 FFFF99
CC9999 CCCC99 CCFF99
999999 99CC99 99FF99
669999 66CC99 66FF99
339999 33CC99 33FF99
009999 00CC99 00FF99
FF99CC FFCCCC FFFFCC
CC99CC CCCCCC CCFFCC
9999CC 99CCCC 99FFCC
6699CC 66CCCC 66FFCC
3399CC 33CCCC 33FFCC
0099CC 00CCCC 00FFCC
FF99FF FFCCFF FFFFFF
CC99FF CCCCFF CCFFFF
9999FF 99CCFF 99FFFF
6699FF 66CCFF 66FFFF
3399FF 33CCFF 33FFFF
0099FF 00CCFF 00FFFF
FF00FF FF33FF FF66FF
CC00FF CC33FF CC66FF
9900FF 9933FF 9966FF
6600FF 6633FF 6666FF
3300FF 3333FF 3366FF
0000FF 0033FF 0066FF
FF00CC FF33CC FF66CC
CC00CC CC33CC CC66CC
9900CC 9933CC 9966CC
6600CC 6633CC 6666CC
3300CC 3333CC 3366CC
0000CC 0033CC 0066CC
FF0099 FF3399 FF6699
CC0099 CC3399 CC6699
990099 993399 996699
660099 663399 666699
330099 333399 336699
000099 003399 006699
FF0066 FF3366 FF6666
CC0066 CC3366 CC6666
990066 993366 996666
660066 663366 666666
330066 333366 336666
000066 003366 006666
FF0033 FF3333 FF6633
CC0033 CC3333 CC6633
990033 993333 996633
660033 663333 666633
330033 333333 336633
000033 003333 006633
FF0000 FF3300 FF6600
CC0000 CC3300 CC6600
990000 993300 996600
660000 663300 666600
330000 333300 336600
000000 003300 006600

 

Agnieszka Richter  
 

Artykuł został napisany dla Optimus Pascal S.A. Publikowanie całości lub fragmentów niniejszego artykułu jest zabronione bez zgody właściciela.
  



[ Strona główna ] [ Uwagi ogólne ] [ Błędy przy tworzeniu stron ]
[ Przykazania webdesignera ] [ Artykuły ] [ Linki ] [ Słowo od autorki ]

Copyright © 1999-2001, Kaila Studio. Wszelkie prawa zastrzeżone.
Agnieszka 'Kaila' Richter - aga@kailastudio.com.pl
Ostatnia aktualizacja: 28 maja 2000