|


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