Blastboy

Sposoby zapisu kolorów w HTML/CSS

Przy pisaniu stron internetowych wykorzystuje się nadawanie kolorów dla różnych elementów strony. Karta graficzna wyświetla kolory w standardzie RGB, najczęściej w przestrzeni barw 24 bitowej. Każdy kolor składa się z trzech barw: czerwonej (Red), zielonej (Green) oraz niebieskiej (Blue). Z tego wniosek, że przestrzeń barw 24 bit podzielona jest na 8 bitów dla każdej barwy (24/3=8). 8 bitów to 28 czyli 256 - aż tyle jest odcieni dla każdej z trzech podstawowych barw. Mieszając ze sobą te odcienie można uzyskać aż 16777216 kolorów (2563).

W kodzie CSS i nie tylko nim, kolor można zapisać na 3 sposoby:

  1. Podstawowe 140 kolorów można zapisać używając ich angielskich nazw, np.:

    color: red;

  2. Pełną 24 bitową przestrzeń barw można zapisać w postaci kodu RGB w systemie dziesiętnym, np.:

    color: rgb(123,45,67);

    Kolory zapisujemy od 0 do 255

  3. Najczęściej spotykany sposób zapisywania koloru to zapis kodu RGB w systemie szesnastkowym, np.:

    color: #9A3F1C;

    Kolory zapisujemy od 00 do FF. Można stosować zarówno małe jak i duże litery w kodzie koloru.

Skrócony zapis szesnastkowy

Ostatni zapis można stosować w skróconej formie, jeżeli znaki grup 8 bitowych są takie same. Czyli kod: color: #AA1155; można zapisać jako:

color: #A15;

Ograniczenia skróconego zapisu szesnastkowego

Wykorzystując ten zapis dla każdej z trzech podstawowych barw można zapisać tylko 16 odcieni zamiast 256. W ten sposób mieszając odcienie możemy uzyskać tylko 12 bitowy kolor czyli 4096 kolory (163). Nie jest to jednak dużą przeszkodą, ponieważ w większości wypadków wystarczy taka paleta barw. Poszczególne odcienie są łatwo rozróżnialne tylko gdy są obok siebie.

Poniżej przedstawione jest przejście od koloru czarnego do białego. W pierwszej linijce wykorzystanych jest tylko 16 kolorów, a w drugiej 256. Kolor pośredni to różne odcienie szarego. Czysty szary jest tylko wtedy, kiedy trzy podstawowe barwy są takie same.


Jak widać różnica jest spora, lecz tak jak pisałem zauważalne jest to tylko dla podobnych odcieni tego samego koloru gdy ze sobą sąsiadują.

Bezpieczne kolory

W czasach gdy korzystało się z 256 kolorowych monitorów projektanci stron stosowali bezpieczne kolory. Są to kolory, dla których każda barwa może być zapisana tylko jako 00, 33, 66, 99, CC lub FF. Oczywiście można stosowac krótki zapis tych kolorów. Dla tylu barw można było uzyskać tylko 216 kolorów (63). Gdy projektant użył na swojej stronie koloru innego niż bezpieczny, to żeby go wyświetlić na 256 kolorowym monitorze przeglądarka stosowała dwa kolory. Jeden służył jako tło, a drugi był rozproszony (dithering). W ten sposób dany element nie miał jednolitego koloru, co wyglądało gorzej, niż jakby miał jeden ale w innym odcieniu. Bardzo dobrze jest to wytłumaczone po angielsku na msdn.microsoft.com. Ponieważ teraz nawet telefony komórkowe wyświetlają więcej niż 256 kolorów, to nie ma potrzeby ich stosowania. Mimo to nadal można spotkać "internetowe palety kolorów" w programach graficznych.

Jako, że stosowanie się teraz do tych barw nie jest już konieczne, to nie będę ich przedstawiał. Mimo to można je znaleźć w poniższym przedstawieniu 4096 kolorów zapisanych w skróconym zapisie szesnastkowym.

Zapis słowny

Zapis słowny jest najbardziej przyjazny dla człowieka, szczególnie dla osób dobrze znających język angielski. W zapisie tym początkowo było tylko 16 kolorów, gdy jeszcze korzystano z kart graficznych pracujących w trybie VGA. Poniżej opisane kolory wraz z zapisem szesnastkowym po najechaniu na dany kolor.

White Silver Gray Black
Aqua Blue Navy Teal
Lime Green Olive Yellow
Maroon Red Fuchsia Purple

Wraz z popularyzacją monitorów wyświetlających więcej kolorów jak 256 (8 bit) czy 65536 (16 bit) podstawowa paleta 16 kolorów okazała się być za mała. Dlatego rozbudowano ją do 140 kolorów. Zarówno podstawowa paleta jak i rozszerzona zawiera kolory nie spełniające zasady bezpiecznych kolorów. Poniżej wyświeltone są pozostałe 124 kolory.

Snow Ghostwhite Azure Aliceblue
Mintcream Mistyrose Khaki Wheat
Floralwhite Lavenderblush Honeydew Oldlace
Seashell Linen Cornsilk Beige
Papayawhip Antiquewhite Blanchedalmond Bisque
Ivory Lightyellow Lightgoldenrodyellow Lemonchiffon
Cyan Lavender Darkkhaki Lightcyan
Aquamarine Mediumturquoise Mediumaquamarine Darkseagreen
Darkturquoise Lightseagreen Cadetblue Darkcyan
Paleturquoise Powderblue Lightblue Lightsteelblue
Skyblue Lightskyblue Deepskyblue Steelblue
Slateblue Mediumslateblue Blueviolet Mediumpurple
Mediumblue Royalblue Dodgerblue Cornflowerblue
Indigo Midnightblue Darkblue Darkslateblue
Darkslategray Dimgray Slategrey Lightslategray
Darkolivegreen Darkgreen Olivedrab Forestgreen
Seagreen Mediumseagreen Limegreen Yellowgreen
Greenyellow Chartreuse Lawngreen Turquoise
Mediumspringgreen Springgreen Lightgreen Palegreen
Darkgray Lightgrey Gainsboro Whitesmoke
Pink Lightpink Hotpink Deeppink
Tomato Orangered Crimson Firebrick
Lightsalmon Lightcoral Salmon Darksalmon
Moccasin Peachpuff Navajowhite Sandybrown
Gold Orange Darkorange Coral
Palegoldenrod Goldenrod Rosybrown Darkgoldenrod
Burlywood Tan Peru Chocolate
Sienna Brown Darkred Saddlebrown
Palevioletred Indianred Mediumvioletred Magenta
Thistle Plum Violet Orchid
Mediumorchid Darkorchid Darkviolet Darkmagenta