Kolory HTML – czyli pełny przewodnik po kolorach i paletach kolorów w Internecie
Internet odzwierciedla wiele aspektów współczesnego świata i jest coraz bardziej jego nierozerwalną częścią. Kluczowym elementem, zarówno cyberprzestrzeni jak i świata rzeczywistego – są kolory. Tak samo, jak ich postrzeganie przez nas świata wokół nas, tak samo wpływa na świat wirtualny. Przyjrzyjmy się więc bliżej procesowi powstawania kolorów w internecie. Poznajcie najważniejsze informacje o kolorach HTML, a jest tego trochę.
Określenie palety kolorów dla ludzi bywa trudnym zadaniem. Przykładową sytuacją problemów w jej rozróżnianiu, może być taka sytuacja – gdy przed dziesięcioma różnymi osobami postawimy planszę na której znajdziemy cytrynę i poprosimy je, aby opisać jej kolor, bardzo możliwe że otrzymamy dziesięć różnych określeń na jej kolor. Ludzka zdolność do myślenia abstrakcyjnego sprawia, że dwoje ludzi używając różnych określeń będzie mogło się porozumieć co do koloru przykładowej cytryny.
Język internetu – kolory html – jak nim mówić o kolorach?
Komputery jednak takiej zdolności nie posiadają. Nie są w stanie używać zdolności kojarzenia i wnioskowania, więc nie są zdolne do procesu poznawczego, słowem – nie myślą. Wymagają bardzo precyzyjnych informacji, które przetwarzają. W przypadku stron internetowych, językiem jakim mówią, będzie HTML (ang. HyperText Markup Language – Hipertekstowy język znaczników). Przez to posługiwanie się kodami kolorów będzie zdecydowanie bardziej wygodne.
rgb – Zmieszaj je, czyli jak uzyskać każdy kolor?
Dla komputerów najłatwiej kolor jest określić metodą RGB. Ten skrót pochodzi od angielskich nazw trzech kolorów: czerwonego (Red), zielonego (Green) i niebieskiego (Blue). Mieszając te kolory możemy uzyskać wszystkie inne. Dlatego też i w języku HTML można stosować zapis typu RGB. Taki zapis, określany jest mianem 24 – bitowego, albowiem każdemu kolorowi podstawowemu daje się po osiem bitów informacji, aby go określić. Dlatego mnożąc trzy razy osiem otrzymujemy dwadzieścia cztery, stąd nazwa tego systemu zapisu. Za jego przykład niech posłuży nam sytuacja, w której chcemy uzyskać żółty kolor czcionki. Krój czcionki już wybraliśmy, teraz chcemy uzyskać kolor. Żeby otrzymać żółty kolor musimy zmieszać kolor czerwony z zielonym więc kolor żółty będzie mieć kod HTML wyglądający tak: rgb(255, 255, 0). W ten sposób możemy bardzo precyzyjnie określić odcień każdego koloru za pomocy wartości liczbowych.
Zobacz także Kurs UX.
kolory HEX – czyli kolory html w kodzie szesnastkowym
Inną metodą, jest system szesnastkowy, lub inaczej heksadecymalny – a nazywany w skrócie HEX. W takim zapisie również stosujemy mieszanie się trzech wspomnianych wcześniej podstawowych kolorów. Zapis ich jednak będzie wyglądać inaczej. Zamiast dłuższej wartości zapisanej jak powyżej, używa się skróconego zapisu, który niezmiernie ułatwia pracę osobom projektującym stronę internetową. Za przykład niech znów nam posłuży kolor żółty. Jego zapis w formie szesnastkowej będzie wyglądać następująco – #FFFF00. W systemie HEX, wartością maksymalną będzie FF, natomiast najmniejszą – 00.
generator kolorów (Color Picker) – wybierz swój kolor HTML
Poniżej udostępniamy narzędzie, za pomocą którego możesz wygenerować kod swojego koloru HTML.
Paleta 256 kolorów bezpiecznych
Oto zestaw 256 kolorów. Korzystając z zestawu poniżej mamy pewność, że niezależnie od urządzenia i obsługiwanych kolorów, będą one wyświetlane w poprawny sposób dla wszystkich użytkowników.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Kolory HTML mają także swoje nazwy
Co równie ciekawe, nie jesteście zmuszeni korzystać z kodów HEX do wywołania koloru. Okazuje się że dla kilkudziesięciu kolorów, możecie wywoływać je po ich nazwie, bez wpisywania kodu HEX lub RGB. Pełne i pogrupowane zestawienie według grupy kolorów znajdziecie poniżej. Przykład poniżej:
<font color="lightsalmon"></font>
Odcienie koloru czerwonego
| Kolor | HTML / CSS nazwa |
Kod Hex #RRGGBB |
Kod RGB (R,G,B) |
|---|---|---|---|
| lightsalmon | #FFA07A | rgb(255,160,122) | |
| salmon | #FA8072 | rgb(250,128,114) | |
| darksalmon | #E9967A | rgb(233,150,122) | |
| lightcoral | #F08080 | rgb(240,128,128) | |
| indianred | #CD5C5C | rgb(205,92,92) | |
| crimson | #DC143C | rgb(220,20,60) | |
| firebrick | #B22222 | rgb(178,34,34) | |
| red | #FF0000 | rgb(255,0,0) | |
| darkred | #8B0000 | rgb(139,0,0) |
Odcienie koloru pomarańczowego
| Kolor | HTML / CSS nazwa |
Kod Hex #RRGGBB |
Kod RGB (R,G,B) |
|---|---|---|---|
| coral | #FF7F50 | rgb(255,127,80) | |
| tomato | #FF6347 | rgb(255,99,71) | |
| orangered | #FF4500 | rgb(255,69,0) | |
| gold | #FFD700 | rgb(255,215,0) | |
| orange | #FFA500 | rgb(255,165,0) | |
| darkorange | #FF8C00 | rgb(255,140,0) |
Odcienie koloru żółtego
| Kolor | HTML / CSS nazwa |
Kod Hex #RRGGBB |
Kod RGB (R,G,B) |
|---|---|---|---|
| lightyellow | #FFFFE0 | rgb(255,255,224) | |
| lemonchiffon | #FFFACD | rgb(255,250,205) | |
| lightgoldenrodyellow | #FAFAD2 | rgb(250,250,210) | |
| papayawhip | #FFEFD5 | rgb(255,239,213) | |
| moccasin | #FFE4B5 | rgb(255,228,181) | |
| peachpuff | #FFDAB9 | rgb(255,218,185) | |
| palegoldenrod | #EEE8AA | rgb(238,232,170) | |
| khaki | #F0E68C | rgb(240,230,140) | |
| darkkhaki | #BDB76B | rgb(189,183,107) | |
| yellow | #FFFF00 | rgb(255,255,0) |
Odcienie koloru zielonego
| Kolor | HTML / CSS nazwa koloru |
Kod HEX #RRGGBB |
Kod RGB (R,G,B) |
|---|---|---|---|
| lawngreen | #7CFC00 | rgb(124,252,0) | |
| chartreuse | #7FFF00 | rgb(127,255,0) | |
| limegreen | #32CD32 | rgb(50,205,50) | |
| lime | #00FF00 | rgb(0.255.0) | |
| forestgreen | #228B22 | rgb(34,139,34) | |
| green | #008000 | rgb(0,128,0) | |
| darkgreen | #006400 | rgb(0,100,0) | |
| greenyellow | #ADFF2F | rgb(173,255,47) | |
| yellowgreen | #9ACD32 | rgb(154,205,50) | |
| springgreen | #00FF7F | rgb(0,255,127) | |
| mediumspringgreen | #00FA9A | rgb(0,250,154) | |
| lightgreen | #90EE90 | rgb(144,238,144) | |
| palegreen | #98FB98 | rgb(152,251,152) | |
| darkseagreen | #8FBC8F | rgb(143,188,143) | |
| mediumseagreen | #3CB371 | rgb(60,179,113) | |
| seagreen | #2E8B57 | rgb(46,139,87) | |
| olive | #808000 | rgb(128,128,0) | |
| darkolivegreen | #556B2F | rgb(85,107,47) | |
| olivedrab | #6B8E23 | rgb(107,142,35) |
Odcienie koloru błękitnego
| Kolor | HTML / CSS nazwa koloru |
Kod Hex #RRGGBB |
Kod RGB (R,G,B) |
|---|---|---|---|
| lightcyan | #E0FFFF | rgb(224,255,255) | |
| cyan | #00FFFF | rgb(0,255,255) | |
| aqua | #00FFFF | rgb(0,255,255) | |
| aquamarine | #7FFFD4 | rgb(127,255,212) | |
| mediumaquamarine | #66CDAA | rgb(102,205,170) | |
| paleturquoise | #AFEEEE | rgb(175,238,238) | |
| turquoise | #40E0D0 | rgb(64,224,208) | |
| mediumturquoise | #48D1CC | rgb(72,209,204) | |
| darkturquoise | #00CED1 | rgb(0,206,209) | |
| lightseagreen | #20B2AA | rgb(32,178,170) | |
| cadetblue | #5F9EA0 | rgb(95,158,160) | |
| darkcyan | #008B8B | rgb(0,139,139) | |
| teal | #008080 | rgb(0,128,128) |
Odcienie koloru niebieskiego
| Kolor | HTML / CSS nazwa koloru |
Kod Hex #RRGGBB |
Kod RGB (R,G,B) |
|---|---|---|---|
| powderblue | #B0E0E6 | rgb(176,224,230) | |
| lightblue | #ADD8E6 | rgb(173,216,230) | |
| lightskyblue | #87CEFA | rgb(135,206,250) | |
| skyblue | #87CEEB | rgb(135,206,235) | |
| deepskyblue | #00BFFF | rgb(0,191,255) | |
| lightsteelblue | #B0C4DE | rgb(176,196,222) | |
| dodgerblue | #1E90FF | rgb(30,144,255) | |
| cornflowerblue | #6495ED | rgb(100,149,237) | |
| steelblue | #4682B4 | rgb(70,130,180) | |
| royalblue | #4169E1 | rgb(65,105,225) | |
| blue | #0000FF | rgb(0,0,255) | |
| mediumblue | #0000CD | rgb(0,0,205) | |
| darkblue | #00008B | rgb(0,0,139) | |
| navy | #000080 | rgb(0,0,128) | |
| midnightblue | #191970 | rgb(25,25,112) | |
| mediumslateblue | #7B68EE | rgb(123,104,238) | |
| slateblue | #6A5ACD | rgb(106,90,205) | |
| darkslateblue | #483D8B | rgb(72,61,139) |
Odcienie koloru fioletowego
| Kolor | HTML / CSS nazwa koloru |
Kod Hex #RRGGBB |
Kod RGB (R,G,B) |
|---|---|---|---|
| lavender | #E6E6FA | rgb(230,230,250) | |
| thistle | #D8BFD8 | rgb(216,191,216) | |
| plum | #DDA0DD | rgb(221,160,221) | |
| violet | #EE82EE | rgb(238,130,238) | |
| orchid | #DA70D6 | rgb(218,112,214) | |
| fuchsia | #FF00FF | rgb(255,0,255) | |
| magenta | #FF00FF | rgb(255,0,255) | |
| mediumorchid | #BA55D3 | rgb(186,85,211) | |
| mediumpurple | #9370DB | rgb(147,112,219) | |
| blueviolet | #8A2BE2 | rgb(138,43,226) | |
| darkviolet | #9400D3 | rgb(148,0,211) | |
| darkorchid | #9932CC | rgb(153,50,204) | |
| darkmagenta | #8B008B | rgb(139,0,139) | |
| purple | #800080 | rgb(128,0,128) | |
| indigo | #4B0082 | rgb(75,0,130) |
Odcienie koloru różowego
| Kolor | HTML / CSS nazwa koloru |
Kod Hex #RRGGBB |
Kod RGB (R,G,B) |
|---|---|---|---|
| pink | #FFC0CB | rgb(255,192,203) | |
| lightpink | #FFB6C1 | rgb(255,182,193) | |
| hotpink | #FF69B4 | rgb(255,105,180) | |
| deeppink | #FF1493 | rgb(255,20,147) | |
| palevioletred | #DB7093 | rgb(219,112,147) | |
| mediumvioletred | #C71585 | rgb(199,21,133) |
Odcienie koloru białego
| Kolor | HTML / CSS nazwa koloru |
Kod Hex #RRGGBB |
Kod RGB (R,G,B) |
|---|---|---|---|
| white | #FFFFFF | rgb(255,255,255) | |
| snow | #FFFAFA | rgb(255,250,250) | |
| honeydew | #F0FFF0 | rgb(240,255,240) | |
| mintcream | #F5FFFA | rgb(245,255,250) | |
| azure | #F0FFFF | rgb(240,255,255) | |
| aliceblue | #F0F8FF | rgb(240,248,255) | |
| ghostwhite | #F8F8FF | rgb(248,248,255) | |
| whitesmoke | #F5F5F5 | rgb(245,245,245) | |
| seashell | #FFF5EE | rgb(255,245,238) | |
| beige | #F5F5DC | rgb(245,245,220) | |
| oldlace | #FDF5E6 | rgb(253,245,230) | |
| floralwhite | #FFFAF0 | rgb(255,250,240) | |
| ivory | #FFFFF0 | rgb(255,255,240) | |
| antiquewhite | #FAEBD7 | rgb(250,235,215) | |
| linen | #FAF0E6 | rgb(250,240,230) | |
| lavenderblush | #FFF0F5 | rgb(255,240,245) | |
| mistyrose | #FFE4E1 | rgb(255,228,225) |
Odcienie koloru szarego
| Kolor | HTML / CSS nazwa koloru |
Kod Hex #RRGGBB |
Kod RGB (R,G,B) |
|---|---|---|---|
| gainsboro | #DCDCDC | rgb(220,220,220) | |
| lightgray | #D3D3D3 | rgb(211,211,211) | |
| silver | #C0C0C0 | rgb(192,192,192) | |
| darkgray | #A9A9A9 | rgb(169,169,169) | |
| gray | #808080 | rgb(128,128,128) | |
| dimgray | #696969 | rgb(105,105,105) | |
| lightslategray | #778899 | rgb(119,136,153) | |
| slategray | #708090 | rgb(112,128,144) | |
| darkslategray | #2F4F4F | rgb(47,79,79) | |
| black | #000000 | rgb(0,0,0) |
Odcienie koloru Brązowego
| Kolor | HTML / CSS nazwa koloru |
Kod Hex #RRGGBB |
Kod RGB (R,G,B) |
|---|---|---|---|
| cornsilk | #FFF8DC | rgb(255,248,220) | |
| blanchedalmond | #FFEBCD | rgb(255,235,205) | |
| bisque | #FFE4C4 | rgb(255,228,196) | |
| navajowhite | #FFDEAD | rgb(255,222,173) | |
| wheat | #F5DEB3 | rgb(245,222,179) | |
| burlywood | #DEB887 | rgb(222,184,135) | |
| tan | #D2B48C | rgb(210,180,140) | |
| rosybrown | #BC8F8F | rgb(188,143,143) | |
| sandybrown | #F4A460 | rgb(244,164,96) | |
| goldenrod | #DAA520 | rgb(218,165,32) | |
| peru | #CD853F | rgb(205,133,63) | |
| chocolate | #D2691E | rgb(210,105,30) | |
| saddlebrown | #8B4513 | rgb(139,69,19) | |
| sienna | #A0522D | rgb(160,82,45) | |
| brown | #A52A2A | rgb(165,42,42) | |
| maroon | #800000 | rgb(128,0,0) |
Podsumowując
Takie oznaczenie kolorów które zapewnia paleta HTML, jedne lub drugie – sprawia, że można precyzyjnie oddać dany kolor, zgodnie z życzeniem osoby projektującej stronę. Pamiętajmy jednak, że nawet najlepsze oddanie barwy za pomocą liczb, może być przekłamane w sposób jaki wyświetlamy je na monitorze. Każdy monitor jest bowiem inny i odrobinę inaczej oddaje kolory. Dla wielu osób jest to różnica niezauważalna, dla niektórych jednak jest istotna. Weźmy to pod uwagę projektując stronę internetową, czy też zlecając to komuś – w ten sposób można uniknąć wielu nieporozumień.
