Як використовувати коди кольорів для квітів. Підручник HTML
Кольори HTML
HTML кольори та способи їх вказівки
У мові HTML, існує два способи вказати колір:
1. За допомогою імені кольору,
2. За допомогою системи RGB, де кольори задані у шістнадцятковому форматі.
Ім'я кольору
Ім'я кольори в HTMLвказується англійськими словами, наприклад, red або green . Ім'я кольору виступає як значення атрибута HTML-тегу. Імен квітів дуже багато, у цій статті ми розглянемо лише основні з них.
Зазвичай для завдання кольору, у мові HTML використовують два атрибути:
1. Атрибут color="ім'я_колір" - колір тексту,
2. Атрибут bgcolor="ім'я_колір" - колір фону.
Приклади використання атрибутів кольорів:
color="red" - призначаємо тексту червоний колір,
bgcolor = "green" - призначаємо фону зелений колір.
Таблиця основних імен кольорів HTML:
| Ім'я кольору | Його вигляд | Переклад |
|---|---|---|
| white | Білий | |
| ivory | Слонова кістка | |
| silver | Срібний | |
| gray | Сірий | |
| black | Чорний | |
| maroon | Темно-бордовий | |
| red | червоний | |
| orange | Помаранчевий | |
| gold | Золотий | |
| yellow | Жовтий | |
| olive | Оливковий | |
| lime | Лайм | |
| green | Зелений | |
| aqua | Морська хвиля | |
| blue | Синій | |
| navy | Наві | |
| teal | Бірюзовий | |
| fuchsia | Фуксиновий | |
| purple | Пурпурний |
Шістнадцяткова система числення
У повсякденному житті ми користуємося десятковою системою числення від 0 до 9 . Програмісти та дизайнери часто використовують шістнадцяткову систему числення від 0 до 15 де:
10 = A
11 = B
12 = C
13 = D
14 = E
15 = F
Практично кожен колір і відтінок видимий нашому зору можна записати в шістнадцятковій системі, наприклад червоний колір red (червоний) у шістнадцятковій системі дорівнюватиме ff0000
color="red" - червоний колір, на ім'я,
color="#ff0000" - червоний колір, в шістнадцятковій системі числення.
У мові HTML, перед шістнадцятковим числом, значення атрибута ставлять знак решітки #
RGB
Перед тим як почати вказувати кольори в HTML за допомогою шістнадцяткової системи числення, вам спочатку потрібно дізнатися про таке поняття як R G B
RGB- Це скорочення від слів R ed G reen B lue (Червоний Зелений Синій).
Колір в HTML, записаний у шістнадцятковій системі, складається з трьох блоків чисел 00 00 00 , де кожен блок відповідає за один із кольорів RGB, перший блок за червоний колір, другий за зелений колір, третій за синій колір. Числа можуть змінюватись від 00 до ff.
Де, ff - це 255 в десятковій системіобчислення.
Схема RGB:
Red - від 00 до ff
Green - від 00 до ff
Blue - від 00 до ff
У результаті отримуємо число із шести цифр 000000 , де перші два числа відповідають за червоний колір, другі два числа відповідають за зелений колір, треті два числа відповідають за синій колір.
Якщо ми хочемо отримати червоний колір, то пишемо ff0000, зелений колір 00ff00, синій колір 0000ff. Наприклад, якщо хочемо отримати темно-червоний колір, то потрібно зменшити перший блок чисел і замість ff (який дорівнює десятковій системі числення 255), записати наприклад 96 (який дорівнює десятковій системі числення 150).
Наведемо для наочності, приклади кольорів та їх шістнадцятковий код:
Змішуємо кольори в HTML
Якщо ви в школі не пропускали заняття з малювання, то пам'ятайте, що при рівномірному змішуванні червоного і зеленого кольору можна отримати жовтий,
при додаванні до червоного кольору трохи зеленого можна одержати помаранчевий і т.д.
Кольори, задані за допомогою шістнадцяткової системи числення та RGB, також можна змішувати:
Експериментуючи з шістнадцятковою системою числення і RGB, ви з часом освоїтеся і зможете підбирати собі колір, який тільки захочете.
Коди кольорів CSS використовуються для вказівки кольору. Як правило, коди кольору або значення кольору використовуються для встановлення кольору або для переднього плану елемента (наприклад, колір тексту, посилання), або для фону елемента (колір фону, блоку). Вони також можуть використовуватися для зміни кольору кнопки, меж, маркера, при наведенні та інших декоративних ефектів.
Ви можете встановити значення кольору в різних форматах. У наступній таблиці перелічені всі можливі формати:
Нижче докладно описані перелічені формати.
Кольори CSS - шістнадцяткові коди
Шістнадцятковий код кольору- це шестизначне уявлення кольору. Перші дві цифри (RR) – являють собою червоне значення, наступні дві – це зелене значення (GG), а останні – синє значення (BB).
Кольори CSS - короткі шістнадцяткові коди
Короткий шістнадцятковий код кольору- це коротша форма шестизначної нотації. У цьому форматі повторюється кожна цифра, щоб отримати еквівалентне шестизначне значення кольору. Наприклад: #0F0 стає #00FF00.
Шістнадцяткове значення може бути взято з будь-якого графічного програмного забезпечення, такого як Adobe Photoshop, Core Draw та ін.
Кожному шістнадцятковому коду кольору CSS передуватиме знак хеша «#». Нижче наведено приклади використання шістнадцяткових позначень.
Кольори CSS - RGB значення
RGB значення- це код кольору, який задається за допомогою rgb(). Ця властивість набуває трьох значень: по одному для червоного, зеленого та синього. Значення може бути цілим числом від 0 до 255 або відсотком.
Примітка:не всі браузери підтримують властивість кольору rgb(), тому не рекомендується його використовувати.
Нижче наведено приклад, який показує кілька кольорів з використанням значень RGB.
Генератор колірних кодів
Ви можете створювати мільйони колірних кодів за допомогою нашого сервісу.
Безпечні кольори браузера
Нижче представлена таблиця з 216 кольорів, які є найбільш безпечними та незалежними від комп'ютера. Ці кольори в CSS варіюються від 000000 до FFFFFF шістнадцяткового коду. Вони безпечні у використанні, оскільки гарантують, що всі комп'ютери будуть правильно відображати колір під час роботи з 256 палітрою кольорів.
| Таблиця «безпечних» кольорів у CSS | |||||
| #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 |
>>Управління кольором
Шістнадцяткові значення кольору RGB
Способи опису та обробки кольору відрізняються один від одного тим, для якого кінцевого уявлення призначаються. Порівняємо, наприклад, уявлення кольорів для поліграфії та моніторів комп'ютерів. У першому випадку за основу береться білийколір паперу, на який наносяться три основні кольори: блакитний, пурпурнийі жовтий. Змішуючись між собою і з білим кольором паперу в різних пропорціях, ці три основні кольори дають різні колірні відтінки, крім чистого чорного, або за повної відсутності фарб дають білий колір паперу. Якщо до них додати ще й чорний колір, то отримаємо CMYK-Спосіб передачі кольору, коли необхідний колір виходить шляхом віднімання з білого відсутніх кольорів.
У другому випадку за основу приймається чорнийколір екрану монітора, кожен осередок якого світиться одним із трьох кольорів: red-червоний, green-зелений та blue-синій. Тоді при повній відсутності будь-якого світіння ми отримуємо чистий чорний колір екрану, а будь-який із потрібних кольорів задається співвідношенням кожного із трьох кольорів. У цьому випадку ми отримаємо RGB-Спосіб передачі кольору. Основні кольори можуть мати значення від 0
до 255
, або від 0%
до 100%
або можуть бути представлені у вигляді шістнадцяткового значення. На малюнку нижче можна побачити результати змішування основних кольорів.
Шістнадцяткова система числення, на відміну від десяткової у ряді цифр має десять знаків, а шістнадцять - звідси й назва. Відповідно не повторюваних варіантів поєднань з двох цифр може бути тільки - 256 , для продовження ряду цифр після 9 використовуються літери від Aдо F, отже, ряд виглядатиме так -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
У цьому випадку колір визначається трьома шістнадцятковими числами, кожне з яких складається з двох цифр. Перше число визначає інтенсивність червоногокольору, середнє- зеленого, останнє- синьогокольору. Всі числа можуть набувати значення в діапазоні від 00 до FF(Від 0 до 255). Наприклад: зелений колір задається як #00FF00, червоний - як #FF0000, синій - як #0000FF, білий - як #FFFFFF, повна відсутність кольору або чорний задається як #000000 .
У нижченаведеній формі Ви зможете задати будь-які шістнадцяткові значення кожного з трьох кольорів і подивитися результат їх змішування, клікнувши в полі виведення.
Приклади деяких шістнадцяткових значень кольорів RGB: градації червоного, синього та зеленого кольорів.
| вигляд | код | вигляд | код | вигляд | код | вигляд | код | вигляд | код | вигляд | код |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | # B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Завдання кольору за допомогою малих літералів
Для зручності користування деяким кольорам та їх поєднанням були присвоєні імена, які розпізнаються всіма браузерами та з'явилася можливість задавати багато з них на ім'я. У таблиці нижче наведено деякі з назв кольорів:
| вигляд | ім'я | вигляд | ім'я | вигляд | ім'я | вигляд | ім'я |
| White | Red | Orange | Yellow | ||||
| Green | Blue | Purple | Black | ||||
| Aliceblue | Antiquewhite | Aqua | Aquamarine | ||||
| Azure | Beige | Bisque | Blanchedalmond | ||||
| Blueviolet | Brown | Burlywood | Cadetblue | ||||
| Chartreuse | Chocolate | Coral | Cornflowerblue | ||||
| Cornsilk | Crimson | Cyan | Darkblue | ||||
| Darkcyan | Darkgoldenrod | Darkgray | Darkgreen | ||||
| Darkkhaki | Darkmagenta | Darkoliegreen | Darkorange | ||||
| Darkorchid | Darkred | Darksalmon | Darkseagreen | ||||
| Darkslateblue | Darkslategray | Darkturquoise | Darkviolet | ||||
| Deeppink | Deepskyblue | Dimgray | Dodgerblue | ||||
| Firebrick | Floralwhite | Forestgreen | Fuschia | ||||
| Gainsboro | Ghostwhite | Gold | Goldenrod | ||||
| Gray | Greenyellow | Honeydew | Hotpink | ||||
| Indianred | Indigo | Ivory | Khaki | ||||
| Lavender | Lavenderblush | Lemonchiffon | Lightblue | ||||
| Lightcoral | Lightcyan | Lightcoldenrodyellow | Lightgreen | ||||
| Lightgray | Lightpink | Lightsalmon | Lightseagreen | ||||
| Lightskyblue | Lightslategray | Lightsteelblue | Lightyellow | ||||
| Lime | Limegreen | Linen | Magenta | ||||
| Maroon | Mediumaquamarine | Mediumblue | Mediumorchid | ||||
| Mediumpurple | Mediumseagreen | Mediumslateblue | Mediumspringgreen | ||||
| Mediumturquoise | Mediumvioletred | Midnightblue | Mintcream | ||||
| Mistyrose | Navajowhite | Navy | Oldlace | ||||
| Olive | Olivedrab | Orangered | Orchid | ||||
| Palegoldenrod | Palegreen | Paleturquoise | Palevioletred | ||||
| Papayawhip | Peachpuff | Peru | Pink | ||||
| Plum | Powderblue | Rosybrown | Royalblue | ||||
| Saddlebrown | Seagreen | Seashell | Sienna | ||||
| Silver | Skyblue | Slateblue | Slategray | ||||
| Snow | Springgreen | Steelblue | Tan | ||||
| Teal | Thistle | Tomato | Turquoise | ||||
| Violet | Wheat | Whitesmoke | Yellowgreen |
Використання безпечної палітри кольорів
На жаль, на різних платформах з різними системними налаштуваннями правильна передача кольору є проблемою. Вся справа в тому, що браузер завжди намагається підлаштувати палітру кольору документа під системні налаштуваннята можливості монітора, шляхом самостійного змішування кольорів та їх заміщення. Як наслідок – іноді користувач бачить не зовсім те, що хотів йому показати web-майстер. Вихід із цієї ситуації було знайдено у застосуванні палітри, кожен колір якої гарантовано передається однаково всіма браузерами на різних платформах. Це так звана гарантованапалітра, ще її називають безпечноюпалітрою. У цю палітру входять кольори, колірні складові яких приймають такі значення: 00 ,33 ,66 ,99 , CC,FF, у всіх можливих 216 їх поєднаннях.
| вигляд | код | вигляд | код | вигляд | код | вигляд | код | вигляд | код | вигляд | код |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
Кольори html позначаються шістьма символами після символу слєш - наприклад #000000. Ці шість символів позначають частки різних кольорів (Червоного, Зеленого та Синього кольорів (Red, Green, Blue)) у підсумковому кольорі. У моніторі вашого ком'ютера зображення формується з величезної кількості точок, які називаються пікселями. Кожен піксел – це маленьке джерело світла, назвемо його "ліхтарик", який у свою чергу складається з трьох ліхтариків – червоного, зеленого та синього кольору. Зменшуючи або збільшуючи інтенсивність свічення окремих кольорових ліхтариків, ми отримуємо потрібний колір.
Коди кольорів html
Кольори в HTML позначаються шістнадцятковим (HEX) позначенням поєднання червоного, синього та зеленого кольору (RGB).
Найменшим значенням кольору є 0 (шістнадцяткове 00). Найбільшим значенням кольору є 255 (шістнадцяткове FF).
Шістнадцяткове значення кольору є три цифри, що починаються зі знака #.
Коди (значення) кольорів
| Колір | Код HEX | Код RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #00FF00 | rgb(0,255,0) | |
| #0000FF | rgb(0,0,255) | |
| #FFFF00 | rgb(255,255,0) | |
| #00FFFF | rgb(0,255,255) | |
| #FF00FF | rgb(255,0,255) | |
| #C0C0C0 | rgb(192,192,192) | |
| #FFFFFF | rgb(255,255,255) |
16 мільйонів відтінків
Поєднання червоного, синього та зеленого кольорів із значеннями з часткою кожного кольору від 0 до 255 дають у сумі понад 16 мільйонів відтінків (256 x 256 x 256).
Більшість сучасних моніторів здатні відобразити не менше 16384 різних відтінків (ЖК-монітори, в основному, здатні відображати 262 тисячі 16 мільйонів (оновлено у жовтні 2013 р.)кольорів, а ЕПТ-монітори здатні відображати практично необмежену кількість кольорів).
У таблиці нижче наведено зміну частки червоного кольору з 0 до 255 при нульових значеннях синього і зеленого кольорів:
| червоний | Код HEX | Код RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080000 | rgb(8,0,0) | |
| #100000 | rgb(16,0,0) | |
| #180000 | rgb(24,0,0) | |
| #200000 | rgb(32,0,0) | |
| #280000 | rgb(40,0,0) | |
| #300000 | rgb(48,0,0) | |
| #380000 | rgb(56,0,0) | |
| #400000 | rgb(64,0,0) | |
| #480000 | rgb(72,0,0) | |
| #500000 | rgb(80,0,0) | |
| #580000 | rgb(88,0,0) | |
| #600000 | rgb(96,0,0) | |
| #680000 | rgb(104,0,0) | |
| #700000 | rgb(112,0,0) | |
| #780000 | rgb(120,0,0) | |
| #800000 | rgb(128,0,0) | |
| #880000 | rgb(136,0,0) | |
| #900000 | rgb(144,0,0) | |
| #980000 | rgb(152,0,0) | |
| #A00000 | rgb(160,0,0) | |
| #A80000 | rgb(168,0,0) | |
| # B00000 | rgb(176,0,0) | |
| #B80000 | rgb(184,0,0) | |
| #C00000 | rgb(192,0,0) | |
| #C80000 | rgb(200,0,0) | |
| #D00000 | rgb(208,0,0) | |
| #D80000 | rgb(216,0,0) | |
| #E00000 | rgb(224,0,0) | |
| #E80000 | rgb(232,0,0) | |
| #F00000 | rgb(240,0,0) | |
| #F80000 | rgb(248,0,0) | |
| #FF0000 | rgb(255,0,0) |
Відтінки сірого
Для отримання відтінків сірого кольору використовуються рівні частки всіх кольорів. Для полегшення вибору потрібного кольору ми наводимо вам коди відтінків сірого кольору
| Відтінки сірого | Код HEX | Код RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080808 | rgb(8,8,8) | |
| #101010 | rgb(16,16,16) | |
| #181818 | rgb(24,24,24) | |
| #202020 | rgb(32,32,32) | |
| #282828 | rgb(40,40,40) | |
| #303030 | rgb(48,48,48) | |
| #383838 | rgb(56,56,56) | |
| #404040 | rgb(64,64,64) | |
| #484848 | rgb(72,72,72) | |
| #505050 | rgb(80,80,80) | |
| #585858 | rgb(88,88,88) | |
| #606060 | rgb(96,96,96) | |
| #686868 | rgb(104,104,104) | |
| #707070 | rgb(112,112,112) | |
| #787878 | rgb(120,120,120) | |
| #808080 | rgb(128,128,128) | |
| #888888 | rgb(136,136,136) | |
| #909090 | rgb(144,144,144) | |
| #989898 | rgb(152,152,152) | |
| #A0A0A0 | rgb(160,160,160) | |
| #A8A8A8 | rgb(168,168,168) | |
| #B0B0B0 | rgb(176,176,176) | |
| #B8B8B8 | rgb(184,184,184) | |
| #C0C0C0 | rgb(192,192,192) | |
| #C8C8C8 | rgb(200,200,200) | |
| #D0D0D0 | rgb(208,208,208) | |
| #D8D8D8 | rgb(216,216,216) | |
| #E0E0E0 | rgb(224,224,224) | |
| #E8E8E8 | rgb(232,232,232) | |
| #F0F0F0 | rgb(240,240,240) | |
| #F8F8F8 | rgb(248,248,248) | |
| #FFFFFF | rgb(255,255,255) |
Крос-браузерні (для всіх браузерів) назви кольорів
Колекція зі 150 назв кольорів у html, що підтримуються у всіх браузерах.
Стандартизовані назви кольорів
Консорціум W3C перераховує 16 валідних назв кольорів для HTML і CSS: aqua (аквамарин), black (чорний), blue (синій), fuchsia (фуксиновий), gray (сірий), green (зелений), lime (лайм або салатовий), maroon (каштановий), navy (ультрамарин), olive (оливковий), purple (пурпурний), red (червоний), silver (сріблястий), teal (сизий), white (білий) та yellow (жовтий).
При використанні кольорів, які не входять до цього списку, правильніше буде використовувати їх шістнадцятковий код (HEX) або RGB.
Безпечні кольори
Кілька років тому, коли комп'ютери могли підтримувати максимум 256 різних кольорів, було запропоновано список із 216 «Безпечних web-квітів» із 40 кольорами, зарезервованими для системи.
Ця 216-кольорова палітра була створена для того, щоб правильно відобразити кольори у режимі 256-кольорової палітри.
Тепер це не важливо, тому що більшість комп'ютерів у всьому світі підтримують мільйони кольорів. У будь-якому випадку ось список цих кольорів:
| 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 |
Для html сторінок кольору позначаються переважно у шістнадцятковій системі. Для цього використовують два види запису коду - повне або скорочене. Щоб правильно вказати html колір повним записом, необхідно прописати шість знаків (цифри та/або англійські літери) після решітки, наприклад, чорний записується так: #000000. Скорочений запис вказівки html кольорів складається з решітки та трьох цифр та/або букв за нею. При цьому цей вид запаси можна використовувати тільки в тому випадку, якщо повний запис даного кольору складається з однакових символів після решітки. Наприклад, цей чорний колір можна записати так: #000. Вказувати html кольори можна як великими, і маленькими символами, оскільки де вони чутливі до регістру.
Кожен символ, записаний після "#", відповідає певній частині червоного, зеленого та синього кольорів. У свою чергу всі монітори складаються з величезної кількості пікселів (мікроскопічних точок), кожен з яких включає 3 так званих "ліхтарика" (джерела світла): червоні, зелений і синій. Потім, регулюючи інтенсивність світла, що випромінюється цими "ліхтариками", монітор відображає потрібний нам колір.
Поєднуючи інтенсивність випромінювання червоного, синього та зеленого світла (від 0 до 256), монітори можуть відображати 16.000.000 різних відтінків.
Також кольори для сайтів можуть вказуватися словесно або в коді RGB.
На сьогоднішній день словесно можна прописати 147 кольорів. При цьому важливо знати, що деякі різні назви можуть позначати однакові кольори, наприклад, Gray і Grey - це сірий колір (#808080).
Безпечні кольори для сайтів.
Не кожен монітор та браузер може правильно відображати всі 16 мільйонів html кольорів.
Якщо, наприклад, трапляється колір, який браузер неспроможна правильно відобразити, то:
- Браузер замінює його на той, який найбільше на нього схожий і може бути успішно відтворений;
- Для правильного відображення браузер може змішати кілька кольорів та відтворити результат.
Щоб гарантовано отримати на виході в будь-якому браузері та на будь-якому моніторі колір, який Ви прописали в коді, рекомендується використовувати "Безпечні кольори". Вони були визначені не вручну або за чиїмось бажанням, а математично. Таких на 100% безпечних кольорів для HTML документів існує 216. І хоча сьогоднішні технології дійшли до того, що сучасні монітори та браузери розпізнають мільйони відтінків, ми рекомендуємо для гарантії кольору використовувати саме ці безпечні кольори.
| Шістнадцяткова система кольорів. | Коди кольорів у RGB (Red, Green, Blue). |
| Код html кольору: #000000 | Колір RGB: 0 0 0 |
| Код html кольору: #333333 | Колір RGB: 51 51 51 |
| Код html кольору: #666666 | Колір RGB: 102 102 102 |
| Код html кольору: #999999 | Колір RGB: 153 153 153 |
| Код html кольору: #CCCCCC | Колір RGB: 204 204 204 |
| Код html кольору: #FFFFFF | Колір RGB: 255 255 255 |
| Код html кольору: #666600 | Колір RGB: 102 102 0 |
| Код html кольору: #999900 | Колір RGB: 153 153 0 |
| Код html кольору: #999933 | Колір RGB: 153 153 51 |
| Код html кольору: #999966 | Колір RGB: 153 153 102 |
| Код html кольору: #CCCC33 | Колір RGB: 204 204 51 |
| Код html кольору: #CCCC66 | Колір RGB: 204 204 102 |
| Код html кольору: #333300 | Колір RGB: 51 51 0 |
| Код html кольору: #666633 | Колір RGB: 102 102 51 |
| Код html кольору: #CCCC99 | Колір RGB: 204 204 153 |
| Код html кольору: #CCFF33 | Колір RGB: 204 255 51 |
| Код html кольору: #CCFF00 | Колір RGB: 204 255 0 |
| Код html кольору: #CCFF66 | Колір RGB: 204 255 102 |
| Код html кольору: #669900 | Колір RGB: 102 153 0 |
| Код html кольору: #99CC33 | Колір RGB: 153 204 51 |
| Код html кольору: #99CC00 | Колір RGB: 153 204 0 |
| Код html кольору: #99CC66 | Колір RGB: 153 204 102 |
| Код html кольору: #99FF33 | Колір RGB: 153 255 51 |
| Код html кольору: #99FF00 | Колір RGB: 153 255 0 |
| Код html кольору: #336600 | Колір RGB: 51 102 0 |
| Код html кольору: #669933 | Колір RGB: 102 153 51 |
| Код html кольору: #66CC33 | Колір RGB: 102 204 51 |
| Код html кольору: #66CC00 | Колір RGB: 102 204 0 |
| Код html кольору: #99FF66 | Колір RGB: 153 255 102 |
| Код html кольору: #CCFF99 | Колір RGB: 204 255 153 |
| Код html кольору: #009900 | Колір RGB: 0 153 0 |
| Код html кольору: #339900 | Колір RGB: 51 153 0 |
| Код html кольору: #33CC00 | Колір RGB: 51 204 0 |
| Код html кольору: #33FF00 | Колір RGB: 51 255 0 |
| Код html кольору: #66FF33 | Колір RGB: 102 255 51 |
| Код html кольору: #66FF00 | Колір RGB: 102 255 0 |
| Код html кольору: #00CC33 | Колір RGB: 0 204 51 |
| Код html кольору: #33CC33 | Колір RGB: 51 204 51 |
| Код html кольору: #00CC00 | Колір RGB: 0 204 0 |
| Код html кольору: #00FF00 | Колір RGB: 0 255 0 |
| Код html кольору: #00FF33 | Колір RGB: 0 255 51 |
| Код html кольору: #33FF33 | Колір RGB: 51 255 51 |
| Код html кольору: #003300 | Колір RGB: 0 51 0 |
| Код html кольору: #336633 | Колір RGB: 51 102 51 |
| Код html кольору: #669966 | Колір RGB: 102 153 102 |
| Код html кольору: #66CC66 | Колір RGB: 102 204 102 |
| Код html кольору: #99CC99 | Колір RGB: 153 204 153 |
| Код html кольору: #CCFFCC | Колір RGB: 204 255 204 |
| Код html кольору: #006600 | Колір RGB: 0 102 0 |
| Код html кольору: #339933 | Колір RGB: 51 153 51 |
| Код html кольору: #00FF66 | Колір RGB: 0 255 102 |
| Код html кольору: #33FF66 | Колір RGB: 51 255 102 |
| Код html кольору: #66FF66 | Колір RGB: 102 255 102 |
| Код html кольору: #99FF99 | Колір RGB: 153 255 153 |
| Код html кольору: #009933 | Колір RGB: 0 153 51 |
| Код html кольору: #00CC66 | Колір RGB: 0 204 102 |
| Код html кольору: #33CC66 | Колір RGB: 51 204 102 |
| Код html кольору: #00FF99 | Колір RGB: 0 255 153 |
| Код html кольору: #33FF99 | Колір RGB: 51 255 153 |
| Код html кольору: #66FF99 | Колір RGB: 102 255 153 |
| Код html кольору: #006633 | Колір RGB: 0 102 51 |
| Код html кольору: #009966 | Колір RGB: 0 153 102 |
| Код html кольору: #339966 | Колір RGB: 51 153 102 |
| Код html кольору: #00CC99 | Колір RGB: 0 204 153 |
| Код html кольору: #33CC99 | Колір RGB: 51 204 153 |
| Код html кольору: #66CC99 | Колір RGB: 102 204 153 |
| Код html кольору: #009999 | Колір RGB: 0 153 153 |
| Код html кольору: #33CCCC | Колір RGB: 51 204 204 |
| Код html кольору: #00FFCC | Колір RGB: 0 255 204 |
| Код html кольору: #33FFCC | Колір RGB: 51 255 204 |
| Код html кольору: #66FFCC | Колір RGB: 102 255 204 |
| Код html кольору: #99FFCC | Колір RGB: 153 255 204 |
| Код html кольору: #00CCCC | Колір RGB: 0 204 204 |
| Код html кольору: #00FFFF | Колір RGB: 0 255 255 |
| Код html кольору: #33FFFF | Колір RGB: 51 255 255 |
| Код html кольору: #66FFFF | Колір RGB: 102 255 255 |
| Код html кольору: #99FFFF | Колір RGB: 153 255 255 |
| Код html кольору: #CCFFFF | Колір RGB: 204 255 255 |
| Код html кольору: #336666 | Колір RGB: 51 102 102 |
| Код html кольору: #006666 | Колір RGB: 0 102 102 |
| Код html кольору: #669999 | Колір RGB: 102 153 153 |
| Код html кольору: #339999 | Колір RGB: 51 153 153 |
| Код html кольору: #66CCCC | Колір RGB: 102 204 204 |
| Код html кольору: #99CCCC | Колір RGB: 153 204 204 |
| Код html кольору: #003333 | Колір RGB: 0 51 51 |
| Код html кольору: #0099CC | Колір RGB: 0 153 204 |
| Код html кольору: #3399CC | Колір RGB: 51 153 204 |
| Код html кольору: #00CCFF | Колір RGB: 0 204 255 |
| Код html кольору: #33CCFF | Колір RGB: 51 204 255 |
| Код html кольору: #66CCFF | Колір RGB: 102 204 255 |
| Код html кольору: #006699 | Колір RGB: 0 102 153 |
| Код html кольору: #336699 | Колір RGB: 51 102 153 |
| Код html кольору: #6699CC | Колір RGB: 102 153 204 |
| Код html кольору: #0099FF | Колір RGB: 0 153 255 |
| Код html кольору: #3399FF | Колір RGB: 51 153 255 |
| Код html кольору: #99CCFF | Колір RGB: 153 204 255 |
| Код html кольору: #003366 | Колір RGB: 0 51 102 |
| Код html кольору: #003399 | Колір RGB: 0 51 153 |
| Код html кольору: #0033FF | Колір RGB: 0 51 255 |
| Код html кольору: #3366CC | Колір RGB: 51 102 204 |
| Код html кольору: #0066CC | Колір RGB: 0 102 204 |
| Код html кольору: #0066FF | Колір RGB: 0 102 255 |
| Код html кольору: #000033 | Колір RGB: 0 0 51 |
| Код html кольору: #0033CC | Колір RGB: 0 51 204 |
| Код html кольору: #0000CC | Колір RGB: 0 0 204 |
| Код html кольору: #0000FF | Колір RGB: 0 0 255 |
| Код html кольору: #3366FF | Колір RGB: 51 102 255 |
| Код html кольору: #6699FF | Колір RGB: 102 153 255 |
| Код html кольору: #000066 | Колір RGB: 0 0 102 |
| Код html кольору: #000099 | Колір RGB: 0 0 153 |
| Код html кольору: #3333CC | Колір RGB: 51 51 204 |
| Код html кольору: #3300CC | Колір RGB: 51 0 204 |
| Код html кольору: #3300FF | Колір RGB: 51 0 255 |
| Код html кольору: #3333FF | Колір RGB: 51 51 255 |
| Код html кольору: #333366 | Колір RGB: 51 51 102 |
| Код html кольору: #333399 | Колір RGB: 51 51 153 |
| Код html кольору: #666699 | Колір RGB: 102 102 153 |
| Код html кольору: #6666CC | Колір RGB: 102 102 204 |
| Код html кольору: #6666FF | Колір RGB: 102 102 255 |
| Код html кольору: #9999CC | Колір RGB: 153 153 204 |
| Код html кольору: #330066 | Колір RGB: 51 0 102 |
| Код html кольору: #330099 | Колір RGB: 51 0 153 |
| Код html кольору: #6600FF | Колір RGB: 102 0 255 |
| Код html кольору: #6633FF | Колір RGB: 102 51 255 |
| Код html кольору: #9999FF | Колір RGB: 153 153 255 |
| Код html кольору: #CCCCFF | Колір RGB: 204 204 255 |
| Код html кольору: #330033 | Колір RGB: 51 0 51 |
| Код html кольору: #663399 | Колір RGB: 102 51 153 |
| Код html кольору: #6633CC | Колір RGB: 102 51 204 |
| Код html кольору: #6600CC | Колір RGB: 102 0 204 |
| Код html кольору: #9966FF | Колір RGB: 153 102 255 |
| Код html кольору: #9966CC | Колір RGB: 153 102 204 |
| Код html кольору: #663366 | Колір RGB: 102 51 102 |
| Код html кольору: #660099 | Колір RGB: 102 0 153 |
| Код html кольору: #9900FF | Колір RGB: 153 0 255 |
| Код html кольору: #9933FF | Колір RGB: 153 51 255 |
| Код html кольору: #9933CC | Колір RGB: 153 51 204 |
| Код html кольору: #CC99FF | Колір RGB: 204 153 255 |
| Код html кольору: #660066 | Колір RGB: 102 0 102 |
| Код html кольору: #996699 | Колір RGB: 153 102 153 |
| Код html кольору: #9900CC | Колір RGB: 153 0 204 |
| Код html кольору: #CC00FF | Колір RGB: 204 0 255 |
| Код html кольору: #CC33FF | Колір RGB: 204 51 255 |
| Код html кольору: #CC66FF | Колір RGB: 204 102 255 |
| Код html кольору: #993399 | Колір RGB: 153 51 153 |
| Код html кольору: #990099 | Колір RGB: 153 0 153 |
| Код html кольору: #CC33CC | Колір RGB: 204 51 204 |
| Код html кольору: #CC00CC | Колір RGB: 204 0 204 |
| Код html кольору: #CC66CC | Колір RGB: 204 102 204 |
| Код html кольору: #CC99CC | Колір RGB: 204 153 204 |
| Код html кольору: #CC3399 | Колір RGB: 204 51 153 |
| Код html кольору: #FF00FF | Колір RGB: 255 0 255 |
| Код html кольору: #FF33FF | Колір RGB: 255 51 255 |
| Код html кольору: #FF66FF | Колір RGB: 255 102 255 |
| Код html кольору: #FF99FF | Колір RGB: 255 153 255 |
| Код html кольору: #FFCCFF | Колір RGB: 255 204 255 |
| Код html кольору: #990066 | Колір RGB: 153 0 102 |
| Код html кольору: #CC0099 | Колір RGB: 204 0 153 |
| Код html кольору: #CC6699 | Колір RGB: 204 102 153 |
| Код html кольору: #FF33CC | Колір RGB: 255 51 204 |
| Код html кольору: #FF00CC | Колір RGB: 255 0 204 |
| Код html кольору: #FF66CC | Колір RGB: 255 102 204 |
| Код html кольору: #660033 | Колір RGB: 102 0 51 |
| Код html кольору: #993366 | Колір RGB: 153 51 102 |
| Код html кольору: #CC0066 | Колір RGB: 204 0 102 |
| Код html кольору: #FF0099 | Колір RGB: 255 0 153 |
| Код html кольору: #FF3399 | Колір RGB: 255 51 153 |
| Код html кольору: #FF99CC | Колір RGB: 255 153 204 |
| Код html кольору: #663333 | Колір RGB: 102 51 51 |
| Код html кольору: #996666 | Колір RGB: 153 102 102 |
| Код html кольору: #CC3366 | Колір RGB: 204 51 102 |
| Код html кольору: #FF0066 | Колір RGB: 255 0 102 |
| Код html кольору: #FF3366 | Колір RGB: 255 51 102 |
| Код html кольору: #FF6699 | Колір RGB: 255 102 153 |
| Код html кольору: #330000 | Колір RGB: 51 0 0 |
| Код html кольору: #990033 | Колір RGB: 153 0 51 |
| Код html кольору: #993333 | Колір RGB: 153 51 51 |
| Код html кольору: #CC3333 | Колір RGB: 204 51 51 |
| Код html кольору: #CC6666 | Колір RGB: 204 102 102 |
| Код html кольору: #CC9999 | Колір RGB: 204 153 153 |
| Код html кольору: #CC0033 | Колір RGB: 204 0 51 |
| Код html кольору: #FF0033 | Колір RGB: 255 0 51 |
| Код html кольору: #FF3333 | Колір RGB: 255 51 51 |
| Код html кольору: #FF6666 | Колір RGB: 255 102 102 |
| Код html кольору: #FF9999 | Колір RGB: 255 153 153 |
| Код html кольору: #FFCCCC | Колір RGB: 255 204 204 |
| Код html кольору: #990000 | Колір RGB: 153 0 0 |
| Код html кольору: #CC0000 | Колір RGB: 204 0 0 |
| Код html кольору: #FF0000 | Колір RGB: 255 0 0 |
| Код html кольору: #FF3300 | Колір RGB: 255 51 0 |
| Код html кольору: #CC3300 | Колір RGB: 204 51 0 |
| Код html кольору: #FF6633 | Колір RGB: 255 102 51 |
| Код html кольору: #660000 | Колір RGB: 102 0 0 |
| Код html кольору: #993300 | Колір RGB: 153 51 0 |
| Код html кольору: #CC6633 | Колір RGB: 204 102 51 |
| Код html кольору: #FF6600 | Колір RGB: 255 102 0 |
| Код html кольору: #FF9966 | Колір RGB: 255 153 102 |
| Код html кольору: #FFCC99 | Колір RGB: 255 204 153 |
| Код html кольору: #663300 | Колір RGB: 102 51 0 |
| Код html кольору: #996633 | Колір RGB: 153 102 51 |
| Код html кольору: #CC6600 | Колір RGB: 204 102 0 |
| Код html кольору: #CC9966 | Колір RGB: 204 153 102 |
| Код html кольору: #FF9933 | Колір RGB: 255 153 51 |
| Код html кольору: #FF9900 | Колір RGB: 255 153 0 |
| Код html кольору: #996600 | Колір RGB: 153 102 0 |
| Код html кольору: #CC9933 | Колір RGB: 204 153 51 |
| Код html кольору: #CC9900 | Колір RGB: 204 153 0 |
| Код html кольору: #FFCC33 | Колір RGB: 255 204 51 |
| Код html кольору: #FFCC00 | Колір RGB: 255 204 0 |
| Код html кольору: #FFCC66 | Колір RGB: 255 204 102 |
| Код html кольору: #CCCC00 | Колір RGB: 204 204 0 |
| Код html кольору: #FFFF00 | Колір RGB: 255 255 0 |
| Код html кольору: #FFFF33 | Колір RGB: 255 255 51 |
| Код html кольору: #FFFF66 | Колір RGB: 255 255 102 |
| Код html кольору: #FFFF99 | Колір RGB: 255 255 153 |
| Код html кольору: #FFFFCC | Колір RGB: 255 255 204 |
Ця таблиця включає 216 кодів безпечних html кольорів. Кожен колір має значення RGB для визначення кольору в графічних редакторах і HEX для вказівки кольору на html сторінках.
