Kolory w Internecie

Kolory w Internecie
Autorzy stron internetowych mają do dyspozycji różne metody określania kolorów w sieciowych
dokumentach. Barwy mogą być zapisane w formie szesnastkowej (heksadecymalnej; ang. hexadecimal)
notacji RGB, a niektóre z nich mogą być zapisane za pomocą ich nazw w języku angielskim. Zwykle do
wygenerowania zapisu heksadecymalnego używa się programów graficznych lub specjalnej palety kolorów
(ang. color picker).
Spis treści





Zapis szesnastkowy
Nazwy kolorów w HTML
Nazwy kolorów w systemie X11
Dostępność
Bezpieczna paleta 216 kolorów
Zapis szesnastkowy
Zapis heksadecymalny (ang. hex triplet) składa się z sześciu cyfr szesnastkowych (trzech bajtów). Zgodnie z
modelem RGB (ang. red, green, blue) bajty odpowiadają kolejno za barwę czerwoną, zieloną i niebieską.
Każdy bajt może przyjąć wartość od 00 (0) do FF (255), co oznacza, odpowiednio, najmniejszą i największą
intensywność danej barwy.
Nawet gdy intensywność którejś z barw jest mniejsza niż 16 (co w zapisie szesnastkowym daje jedną cyfrę),
zapis ma 6 cyfr. Na przykład, jeden z ciemnych odcieni niebieskiego, w którym intensywność czerwonego
ma wartość A, zielonego 2, a niebieskiego 66, zapisujemy 0A0266. Skracać zapis można jedynie wtedy, gdy
każdy bajt składa się z dwóch takich samych cyfr, np. przykład AABBCC można zapisać jako ABC.
W tym systemie można zapisać
różnych kolorów.
Zapis szesnastkowy jest używany w językach HTML i CSS, w formacie grafiki wektorowej SVG oraz w
innych aplikacjach.
Konwersja zapisu heksadecymalnego na zapis RGB jest intuicyjna. Polega po prostu na zapisywaniu
dziesiętnych wartości każdej pary cyfr, np. 0FAB40 = RGB(15, 171, 64).
Nazwy kolorów w HTML
Specyfikacja języka HTML 4.01 zawiera szesnaście nazwanych kolorów, zawartych w tabeli poniżej.
Kolor Nazwa po angielsku Zapis szesnastkowy Kolor Nazwa po angielsku Zapis szesnastkowy
cyjan
czarny
niebieski
fuksja
zielony
szary
limonka
wiśniowy
aqua
black
blue
fuchsia
green
grey
lime
maroon
#00FFFF
#000000
#0000FF
#FF00FF
#008000
#808080
#00FF00
#800000
granatowy
oliwkowy
fioletowy
czerwony
srebrny
morski
biały
żółty
navy
olive
purple
red
silver
teal
white
yellow
#000080
#808000
#800080
#FF0000
#C0C0C0
#008080
#FFFFFF
#FFFF00
Nazwy kolorów w systemie X11
Liczba kolorów jest definiowana przez przeglądarkę internetową. Niektóre przeglądarki mogą nie rozpoznać wszystkich tych kolorów, ale od
2005 wszystkie współczesne przeglądarki z nich korzystają. Wiele z nich pochodzi z listy nazw kolorów systemu X Window.
Nazwa HTML
Kod
Kod
szesnastko
dziesiętny
wy
R G B
R G B
Odcienie koloru
czerwonego
IndianRed
CD 5C 5C
LightCoral
F0 80 80
Salmon
FA 80 72
DarkSalmon
E9 96 7A
LightSalmon
FF A0 7A
Crimson
Red
FireBrick
DarkRed
DC 14 3C
FF 00 00
B2 22 22
8B 00 00
205 92 92
240 128 12
8
250 128 11
4
233 150 12
2
255 160 12
2
220 20 60
255 0 0
178 34 34
139 0 0
Odcienie koloru
różowego
Pink
FF C0 CB
LightPink
FF B6 C1
HotPink
FF 69 B4
DeepPink
MediumVioletRed
FF 14 93
C7 15 85
PaleVioletRed
DB 70 93
255 192 20
3
255 182 19
3
255 105 18
0
255 20 147
199 21 133
219 112 14
7
Odcienie koloru
pomarańczowego
LightSalmon
FF A0 7A
Coral
Tomato
OrangeRed
DarkOrange
Orange
FF 7F 50
FF 63 47
FF 45 00
FF 8C 00
FF A5 00
255 160 12
2
255 127 80
255 99 71
255 69 0
255 140 0
255 165 0
Nazwa HTML
Kod
Kod
szesnastko
dziesiętny
wy
R G B
R G B
Odcienie koloru
zielonego
GreenYellow
Chartreuse
LawnGreen
Lime
LimeGreen
AD FF 2F
7F FF 00
7C FC 00
00 FF 00
32 CD 32
PaleGreen
98 FB 98
LightGreen
90 EE 90
MediumSpringGre
en
SpringGreen
MediumSeaGreen
SeaGreen
ForestGreen
Green
DarkGreen
YellowGreen
OliveDrab
Olive
DarkOliveGreen
MediumAquamari
ne
173 255 47
127 255 0
124 252 0
0 255 0
50 205 50
152 251 15
2
144 238 14
4
00 FA 9A
0 250 154
00 FF 7F
3C B3 71
2E 8B 57
22 8B 22
00 80 00
00 64 00
9A CD 32
6B 8E 23
80 80 00
55 6B 2F
DarkSeaGreen
8F BC 8F
LightSeaGreen
DarkCyan
Teal
20 B2 AA
00 8B 8B
00 80 80
0 255 127
60 179 113
46 139 87
34 139 34
0 128 0
0 100 0
154 205 50
107 142 35
128 128 0
85 107 47
102 205 17
0
143 188 14
3
32 178 170
0 139 139
0 128 128
Odcienie koloru
niebieskiego
Aqua
Cyan
LightCyan
00 FF FF
00 FF FF
E0 FF FF
0 255 255
0 255 255
224 255 25
66 CD AA
Kod
Nazwa HTML szesnastkowy
R G B
Odcienie koloru
brązowego
Cornsilk
FF F8 DC
BlanchedAlmond FF EB CD
Bisque
FF E4 C4
NavajoWhite
FF DE AD
Wheat
F5 DE B3
BurlyWood
DE B8 87
Tan
D2 B4 8C
RosyBrown
BC 8F 8F
SandyBrown
F4 A4 60
Goldenrod
DA A5 20
DarkGoldenrod B8 86 0B
Peru
CD 85 3F
Chocolate
D2 69 1E
SaddleBrown
8B 45 13
Sienna
A0 52 2D
Brown
A5 2A 2A
Maroon
80 00 00
255 248 220
255 235 205
255 228 196
255 222 173
245 222 179
222 184 135
210 180 140
188 143 143
244 164 96
218 165 32
184 134 11
205 133 63
210 105 30
139 69 19
160 82 45
165 42 42
128 0 0
Odcienie koloru
białego
White
Snow
Honeydew
MintCream
Azure
AliceBlue
GhostWhite
WhiteSmoke
Seashell
Beige
OldLace
FloralWhite
Ivory
AntiqueWhite
255 255 255
255 250 250
240 255 240
245 255 250
240 255 255
240 248 255
248 248 255
245 245 245
255 245 238
245 245 220
253 245 230
255 250 240
255 255 240
250 235 215
FF FF FF
FF FA FA
F0 FF F0
F5 FF FA
F0 FF FF
F0 F8 FF
F8 F8 FF
F5 F5 F5
FF F5 EE
F5 F5 DC
FD F5 E6
FF FA F0
FF FF F0
FA EB D7
Kod
dziesiętny
R G B
Odcienie koloru
żółtego
Gold
Yellow
FF D7 00
FF FF 00
LightYellow
FF FF E0
LemonChiffon
FF FA CD
LightGoldenrodYell
FA FA D2
ow
PapayaWhip
FF EF D5
Moccasin
FF E4 B5
PeachPuff
FF DA B9
PaleGoldenrod
EE E8 AA
Khaki
F0 E6 8C
DarkKhaki
BD B7 6B
255 215 0
255 255 0
255 255 22
4
255 250 20
5
250 250 21
0
255 239 21
3
255 228 18
1
255 218 18
5
238 232 17
0
240 230 14
0
189 183 10
7
Odcienie koloru
fioletowego
Lavender
Thistle
Plum
Violet
Orchid
Fuchsia
Magenta
MediumOrchid
MediumPurple
BlueViolet
DarkViolet
DarkOrchid
DarkMagenta
Purple
Indigo
SlateBlue
DarkSlateBlue
MediumSlateBlue
230 230 25
0
216 191 21
D8 BF D8
6
221 160 22
DD A0 DD
1
238 130 23
EE 82 EE
8
218 112 21
DA 70 D6
4
FF 00 FF
255 0 255
FF 00 FF
255 0 255
BA 55 D3 186 85 211
147 112 21
93 70 DB
9
8A 2B E2
138 43 226
94 00 D3
148 0 211
99 32 CC
153 50 204
8B 00 8B
139 0 139
80 00 80
128 0 128
4B 00 82
75 0 130
6A 5A CD 106 90 205
48 3D 8B
72 61 139
123 104 23
7B 68 EE
8
PaleTurquoise
AF EE EE
Aquamarine
7F FF D4
Turquoise
MediumTurquoise
DarkTurquoise
CadetBlue
SteelBlue
40 E0 D0
48 D1 CC
00 CE D1
5F 9E A0
46 82 B4
LightSteelBlue
B0 C4 DE
PowderBlue
B0 E0 E6
LightBlue
AD D8 E6
SkyBlue
87 CE EB
LightSkyBlue
87 CE FA
DeepSkyBlue
DodgerBlue
00 BF FF
1E 90 FF
CornflowerBlue
64 95 ED
E6 E6 FA
MediumSlateBlue 7B 68 EE
RoyalBlue
Blue
MediumBlue
DarkBlue
Navy
MidnightBlue
41 69 E1
00 00 FF
00 00 CD
00 00 8B
00 00 80
19 19 70
5
175 238 23
8
127 255 21
2
64 224 208
72 209 204
0 206 209
95 158 160
70 130 180
176 196 22
2
176 224 23
0
173 216 23
0
135 206 23
5
135 206 25
0
0 191 255
30 144 255
100 149 23
7
123 104 23
8
65 105 225
0 0 255
0 0 205
0 0 139
0 0 128
25 25 112
Linen
LavenderBlush
MistyRose
FA F0 E6
FF F0 F5
FF E4 E1
250 240 230
255 240 245
255 228 225
Odcienie koloru
szarego
Gainsboro
LightGrey
Silver
DarkGray
Gray
DimGray
LightSlateGray
SlateGray
DarkSlateGray
Black
DC DC DC
D3 D3 D3
C0 C0 C0
A9 A9 A9
80 80 80
69 69 69
77 88 99
70 80 90
2F 4F 4F
00 00 00
220 220 220
211 211 211
192 192 192
169 169 169
128 128 128
105 105 105
119 136 153
112 128 144
47 79 79
000
Dostępność



Niektóre przeglądarki internetowe i urządzenia umożliwiające korzystanie z Internetu nie wspierają
kolorów;
Dla niewidomych bądź cierpiących na ślepotę barw użytkowników, witryny opierające się na
kolorach (np. zaznaczone na czerwono obowiązkowe pola formularza) mogą być trudne w użyciu, a
nawet niedostępne;
By uniknąć efektu czarne-na-czarnym (np. gdy witryna ma czarne tło i nie ma określonego
domyślnego koloru tekstu, a w przeglądarce użytkownika jest on ustawiony na czarny) twórcy
witryn internetowych powinni definiować zarówno kolor tła, jak i kolor tekstu;

W sieci WWW odnośniki tradycyjnie przedstawiane są w kolorze niebieskim. Niektórzy
użytkownicy negatywnie reagują na łamanie tego przyzwyczajenia.
Bezpieczna paleta 216 kolorów
W czasach, gdy powstały pierwsze graficzne przeglądarki internetowe, większość użytkowników
komputerów korzystała z 8-bitowej palety kolorów. Aby zapewnić jednakowe wyświetlanie kolorów na
różnych komputerach przy tak ograniczonych możliwościach sprzętowych, opracowano specjalną paletę
216 kolorów, która miała wyglądać na wszystkich komputerach identycznie. Jej szczególną cechą jest to, że
każda składowa koloru RGB może przyjąć tylko jedną z sześciu wartości szesnastkowych: 0x00, 0x33,
0x66, 0x99, 0xCC lub 0xFF.
Aktualnie bezpieczna paleta 216 kolorów ma głównie znaczenie historyczne, gdyż komputery bez problemu
radzą sobie z wyświetlaniem palet składających się z milionów kolorów. Paletę tę można jednak wciąż
spotkać w programach graficznych jako jedną z możliwych do wyboru.
Scalable Vector Graphics (w skrócie SVG) jest plikiem tekstowym, którego zawartość tworzy
zestaw znaczników XML opisujących pozycję, rozmiary, wygląd dwuwymiarowych kształtów, obrazów i
tekstu. Poszczególne podstawowe elementy możesz łączyć i wykorzystywać, tworząc dzięki temu bardziej
skomplikowane kształty.
Format SVG jest standardem, który rozwija się od 1999 roku przez World Wide Web Consortium. Do dziś
powstały jego trzy rekomendacje – czyli ukończone wersje standardu (SVG 1.1, SVG Tiny 1.2, SVG
Mobile 1.1) oraz kilka zarysów i planów następnych wersji – w tym kompletnie przepisanej wersji SVG 2.0,
która to wypchnęła wersję SVG 1.2. Mimo upublicznionej w 2003 roku rekomendacji SVG 1.1, na chwilę
obecną żadna z dostępnych na rynku przeglądarek nie wspiera jej w pełni, jednak większość podstawowych
funkcji jest wspierana już natywnie – to znaczy, bez instalowania dodatkowych rozszerzeń – we wszystkich
popularnych obecnie przeglądarkach, począwszy od Internet Explorer 9.
Grafika tworzona za pomocą składni SVG jest grafiką wektorową – oznacza to, że utworzone w ten sposób
obiekty można powiększać bez utraty jakości obrazu. Bardzo dobrze da się to zauważyć porównując
przykłady na rysunku Rys. 1. Po lewej stronie użyty został obraz w rastrowym formacie PNG o
oryginalnych rozmiarach 64x64 pikseli i jego powiększeniu 256x256 pikseli, natomiast po prawej stronie,
został użyty obraz w formacie wektorowym SVG. Można zauważyć, że mniejsze obrazki są identyczne,
jednak widać również różnice w ich powiększeniach.
Rys. 1. Porównanie jakości grafiki rastrowej z grafiką wektorową.
Grafika utworzona w formacie SVG, może być statyczna i przedstawiać różnego rodzaju elementy ozdobne,
gradienty, wykresy, tekst, plany, schematy i mapy, jak i dynamiczna, pozwalająca tworzyć animacje, gry,
efekty przejścia. Dodatkowo, wykorzystując język skryptowy JavaScript oraz Kaskadowe Arkusze Stylów
(CSS), można w dość prosty sposób tworzyć i zarządzać poszczególnymi elementami składowymi całego
obrazka, wprowadzając zdarzenia na kliknięcia myszką, czy też koloryzując SVG, zależnie od wyglądu
strony. Dzięki swojej prostocie, format ten znalazł miejsce nie tylko w przeglądarkach internetowych, ale
także w różnego rodzaju programach graficznych.
Zaletą formatu tekstowego, definiującego SVG jest to, że rozmiar pliku można zmniejszyć grupując często
powtarzające się i wykorzystywane obiekty, jak i kompresować jego zawartość, wykorzystując do tego celu
algorytm kompresji GZIP. Postać tekstowa pozwala także w dość prosty sposób analizować jej zawartość,
przez co dane mogą być indeksowane, przeszukiwane jak i edytowane przez najprostsze narzędzia tekstowe,
na przykład Notatnik.
Aby wyjaśnić sposób użycia i zasadę działania SVG, przygotowany został zestaw samouczków, które
przedstawiają, krok po kroku, poszczególne części SVG. Dzięki nim zdobędziesz podstawową wiedzę na
temat sposobu osadzania SVG na stronach internetowych, zapoznasz się z dostępnymi obiektami, utworzysz
ozdobny tekst oraz wykorzystasz CSS do definiowania kolorów dla pliku SVG, a na koniec utworzysz
interaktywną grę.
Modele i przestrzenie koloru
Pantone - międzynarodowy standard identyfikacji kolorów do celów
przemysłowych (w tym poligraficznych) opracowany i aktualizowany
przez amerykańską firmę Pantone Inc.
System Pantone standaryzuje w szczególności kolory dostępne w
procesie CMYK, tj. poligraficznej technice reprodukcji koloru przy
użyciu 4 podstawowych barw farby drukarskiej - Cyan, Magenta,
Yellow, blacK.
Jednak większość z zestawu 1114 kolorów opisanych w standardzie
Pantone nie daje się wiernie reprezentować w procesie CMYK.
Wymagają one zastosowania 15 bazowych pigmentów (wliczając biały i
czarny). Kolory identyfikowane są kodami literowo-cyfrowymi, np.
PMS134.
Wiele krajów używa standardu Pantone do precyzyjnego określania
barw swoich flag narodowych.
Model koloru - matematyczny system opisu koloru w przestrzeni
parametrów, w specyficznym układzie współrzędnych, np. RGB, gdzie
parametry R, G i B przyjmują wartości z ustalonego zakresu: jako
liczby ułamkowe od 0 do 1 lub, alternatywnie, jako liczby całkowite od
0 do 255.
Do określenia koloru potrzebne jest prócz samego parametrycznego
modelu - jego powiązanie z przestrzenią rzeczywistych kolorów, a więc
określenie jakiej fizycznej długości fali świetlnej odpowiada dany punkt
w układzie RGB.
Przestrzeń kolorów to pewien model koloru wraz z odwzorowaniem
tego modelu w ustalony "fizyczny" układ kolorów. Np. przestrzenie
"Adobe RGB" i "sRGB" to dwie różne przestrzenie kolorów bazujące
na tym samym modelu - różniące się ww. odwzorowaniem.
Gamut - obraz odwzorowania modelu, np. gamut CRT
Przestrzenie bazujące na modelach RGB i CMYK opisują zdolność
reprodukcji koloru przez fizyczne urządzenia - odp. monitory ekranowe
i urządzenia poligraficzne w procesie CMYK, natomiast ludzka
percepcja koloru lepiej modelowana jest przez system Lab.
Przestrzeń Lab
Isnieje wiele standardów Lab, np. CIE-Lab (Commission
Internationale d'Eclairage) używany jest jako fizyczna przestrzeń
odniesienia, w którą odwzorowywane są inne modele koloru. Standardy
Lab zbudowane są na bazie tzw. trójchromatycznego modelu percepcji
barw, CIE 1931 XYZ. Ponieważ Lab ma w zamierzeniu być
najwierniejszym modelem percepcji koloru przez człowieka, system ten
doskonalony jest wraz z postępem wiedzy neurofizjologicznej
dotyczącej wzroku.
Percepcja barw przez oko polega na jednoczesnej stymulacji komórek
nerwowych w siatkówce, tzw. czopków. Występują one w trzech
rodzajach, przy czym każdy z nich reaguje na inny zakres długości fal długie (barwa czerwona), średnie (barwa zielona) i krótkie (barwa
niebieska). Wykres poniżej pokazuje przybliżoną wrażliwość
poszczególnych rodzajów czopków na bodźce świetlne.
Odkrycie czopków w siatkówce i ich funkcji stało się podstawą
trójskładnikowej teorii postrzegania barw.
Jako parametry XYZ przyjęto
gdzie funkcja I jest spektralnym rozkładem mocy promieniowania
docierającego do siatkówki. Współrzędne w przestrzeni Lab są
nieliniowymi transformatami wielkości X, Y, Z, por. np.
http://en.wikipedia.org/wiki/Lab_color_space
Transformacje te dobierane są tak aby zwykła Euklidesowa odległość w
przestrzeni Lab odpowiadała możliwie wiernie różnicowaniu koloru
przez ludzkie oko. A więc jeśli |A-B|<|A-C| to kolory A i B powinny dla
nas być bardziej zbliżone niż A i C. Nie jest to na ogół prawdą w
przestrzeniach CIE XYZ, ani tym bardziej RGB.
L oznacza jasność (lightness) barwy, o zakresie wartości 0 (czarny) do
100 (biały). Parametr a przyjmuje wartości ujemne i dodatnie,
określając zmienność od zieleni do purpury, podobnie dla b,
oznaczającego zmienność od błękitu do żółtego.
Gamut ludzkiej percepcji nie wypełnia całej przestrzeni barw
opisywanych modelem Lab.
Przestrzenie RGB, CMYK i HSV
Red, Green, Blue - 3 składniki barwy, parametry modelujące powstawanie koloru na ekranach
monitorów kineskopowych i ciekłokrystalicznych. Nie jest to w ogólności model absolutny, odwzorowanie
3 liczb w przestrzeń kolorów zależy od rodzaju urządzenia reprodukującego i jego ustawień (jasność,
kontrast itp.). Model absolutny to np. Adobe RGB, który szczegółowo określa parametry czystych barw R,
G, B w odniesieniu do CIE XYZ, a także niektóre parametry techniczne monitora (w szczególności jego
luminancję dla punktu białego i czarnego - ilość światła emitowaną przez jednostkę pow. ekranu).
RGB jest addytywnym modelem barw, kolory powstają przez sumowanie sygnałów w poszczególnych
kanałach. Jasność wynikowego koloru zależy z grubsza od sumy sygnałów składowych.
Przestrzeń barw RGB jest często wizualizowana jako sześcian w przestrzeni parametrów R, G i B.
Cyan, Magenta, Yellow, blacK - model oparty o barwy dopełniające do podstawowych R, G, B:
C=W-R
M=W-G
Y=W-B
gdzie W oznacza kolor biały (White). Jest to model subtraktywny - barwy powstają prze odejmowanie
poszczególnych składników od światła białego.
Model ten odpowiada zjawisku powstawania barwy przez odbicie światła od powierzchni przedmiotów.
Powierzchnia przedmiotów barwnych pochłania część spektrum padającego na nie światła, światło odbite
docierające do obserwatora wywołuje w oku wrażenie koloru.
C, M, Y odpowiadają pigmentom nanoszonym w procesie poligraficznym na papier. Każdy z nich, odbijając
białe światło, pochłania odpowiednią cześć spektrum, a światło odbite tworzy w oku obserwatora wrażenie
barwy.
Nałożenie wszystkich 3 pigmentów produkuje kolor czarny (całe spektrum padającego światła jest
absorbowane). W praktyce jednak wygląda on jak brudny brąz. Dlatego używa się dodatkowego wyciągu
czarnego K: czarny tusz jest tańszy niż C, M i Y, a ponadto użycie 3 pigmentów powodowałoby wolniejsze
schnięcie wydrukowanego materiału, rozmazywanie szczegółów itp.
Intensywność poszczególnych pigmentów regulowana jest w druku gęstością siatki rastra - biały papier
wyzierający pomiędzy punktami rastra "rozrzedza" dany pigment. Każdy z wyciągów wykorzystuje inny kąt
nachylenia siatki rastra, tak aby uniknąć nakładania się pigmentów.
Różnice między reprodukcją barw w przestrzeniach RGB i CMYK są na ogół znaczne, bo istotnie różnią się
ich gamuty:
Adobe Photoshop przy wyborze kolorów ostrzega, gdy dany kolor leży poza gamutem CMYK
Dlatego też nie istnieje prosty mechanizm konwersji RGB - CMYK, w praktyce konwersje takie
realizowane są przez tzw. color management systems z wykorzystaniem profilów ICC (International Color
Consortium) właściwych dla konkretnych urządzeń graficznych.
Hue, Saturation, Value (czasem Brightness, Lightness, Intensity) - alternatywna reprezentacja przestrzeni
RGB, która lepiej oddaje relacje właściwe ludzkiej percepcji barwy, zachowując prostotę obliczeniową. H
określa numerycznie barwę (w skali kątowej 0-360º, w odniesieniu do koła barw), S - nasycenie, natomiast
V - jasność koloru (B, L, I to inne miary jasności)
Parametry jasności
V = max { R, G, B }
B=(R+G+B)/3
L = ( max { R, G, B } + min { R, G, B } ) / 2
Y = 0.3 R + 0.59 G + 0.11 B
Parametr Y, zwany też luminancją, odpowiada percepcji jasności koloru przez ludzkie oko - Przykład
Konwesja z RGB do HSV