Темно бордовий колір код. Підручник HTML
У HTML колір можна задавати трьома способами:
Завдання кольору в HTML за його назвою
Деякі кольори можна задавати за їх назвою, використовуючи як значення назву кольору на англійською. Найпоширеніші ключові слова: black (чорний), white (білий), red (червоний), green (зелений), blue (синій) та ін.
Колір тексту – червоний
Найбільш популярні кольори стандарту Консорціуму Всесвітньої павутини (World Wide Web Consortium, W3C):
Колір | Назва | Колір | Назва | Колір | Назва | Колір | Назва |
---|---|---|---|---|---|---|---|
Black | Gray | Silver | White | ||||
Yellow | Lime | Aqua | Fuchsia | ||||
Red | Green | Blue | Purple | ||||
Maroon | Olive | Navy | Teal |
Приклад використання різних колірних назв:
Приклад: завдання кольору за назвою
- Спробуй сам »
Заголовок на червоному тлі
Заголовок на помаранчевому фоні
Заголовок на фоні лайм
Білий текст на блакитному тлі
Заголовок на червоному тлі
Заголовок на помаранчевому фоні
Заголовок на фоні лайм
Білий текст на блакитному тлі
Завдання кольору за допомогою RGB
При відображенні різних кольорів на моніторі за основу береться палітра RGB. Будь-який колір отримують, змішуючи три основні: R - червоний (red), G - зелений (green), В - синій (blue). Яскравість кожного кольору задається одним байтом і, отже, може набувати значення від 0 до 255. Наприклад, RGB (255,0,0) відображається як червоний, так як червоний встановлюється в його найвище значення (255), а інші встановлені в 0 Також можна задавати колір у відсотковому відношенні. Кожен із параметрів позначає рівень яскравості відповідного кольору. Наприклад: значення rgb(127, 255, 127) і rgb(50%, 100%, 50%) будуть задавати однаковий зелений колір середньої насиченості:
Приклад: Завдання кольору за допомогою RGB
- Спробуй сам »
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Завдання кольору за шістнадцятковим значенням
Значення R G Bтакож можуть бути вказані за допомогою шістнадцяткових (HEX) значень кольору у формі: #RRGGBB, де RR (червоний), GG (зелений) та BB (синій) є шістнадцятковими значеннями від 00 до FF (так само, як десяткове 0-255) . Шістнадцяткова система, на відміну десяткової системи, базується, як випливає з її назви, на числі 16. Шістнадцяткова система використовує такі знаки: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, З, D, E, F. Тут цифри від 10 до 15 замінено латинськими літерами. Числа більше 15 в шістнадцятковій системіявляють собою об'єднання двох знаків в одне значення. Наприклад, найбільшому числу 255 у десятковій системі відповідає найвище значення FF у шістнадцятковій системі. На відміну від десяткової системи, перед шістнадцятковим числом ставлять символ решітки # , наприклад, #FF0000 відображається як червоний колір, оскільки червоний встановлюється у його найвище значення (FF), а решті кольорів встановлено мінімальне значення (00). Знаки після решітки символу # можна набирати як великими, так і малими. Шістнадцяткова система дозволяє використовувати скорочену форму виду #rgb, де кожен символ рівнозначний подвоєному. Так запис #f7O слід розцінювати як #ff7700.
Приклад: Колір HEX
- Спробуй сам »
червоний: #FF0000
зелений: #00FF00
синій: #0000FF
червоний: #FF0000
зелений: #00FF00
синій: #0000FF
червоний+зелений=жовтий: #FFFF00
червоний+синій=фіолетовий: #FF00FF
зелений+синій=блакитний: #00FFFF
Список широко поширених кольорів (назва, HEX та RGB):
Англійська назва | Російська назва | Зразок | HEX | RGB | ||
---|---|---|---|---|---|---|
Amaranth | Амарантовий | #E52B50 | 229 | 43 | 80 | |
Amber | Бурштиновий | #FFBF00 | 255 | 191 | 0 | |
Aqua | Синьо-зелений | #00FFFF | 0 | 255 | 255 | |
Azure | Блакитний | #007FFF | 0 | 127 | 255 | |
Black | Чорний | #000000 | 0 | 0 | 0 | |
Blue | Синій | #0000FF | 0 | 0 | 255 | |
Bondi Blue | Вода пляжу Бонді | #0095B6 | 0 | 149 | 182 | |
Brass | Латунний | #B5A642 | 181 | 166 | 66 | |
Brown | Коричневий | #964B00 | 150 | 75 | 0 | |
Cerulean | Блакитний | #007BA7 | 0 | 123 | 167 | |
Dark spring green | Темний весняно-зелений | #177245 | 23 | 114 | 69 | |
Emerald | Смарагдовий | #50C878 | 80 | 200 | 120 | |
Eggplant | Баклажановий | #990066 | 153 | 0 | 102 | |
Fuchsia | Фуксія | #FF00FF | 255 | 0 | 255 | |
Gold | Золотий | #FFD700 | 250 | 215 | 0 | |
Gray | Сірий | #808080 | 128 | 128 | 128 | |
Green | Зелений | #00FF00 | 0 | 255 | 0 | |
Indigo | Індіго | #4B0082 | 75 | 0 | 130 | |
Jade | Нефритовий | #00A86B | 0 | 168 | 107 | |
Lime | Лайм | #CCFF00 | 204 | 255 | 0 | |
Malachite | Малахітовий | #0BDA51 | 11 | 218 | 81 | |
Navy | Темно синій | #000080 | 0 | 0 | 128 | |
Ochre | Охра | #CC7722 | 204 | 119 | 34 | |
Olive | Оливковий | #808000 | 128 | 128 | 0 | |
Orange | Помаранчевий | #FFA500 | 255 | 165 | 0 | |
Peach | Персиковий | #FFE5B4 | 255 | 229 | 180 | |
Pumpkin | Гарбуз | #FF7518 | 255 | 117 | 24 | |
Purple | Фіолетовий | #800080 | 128 | 0 | 128 | |
Red | червоний | #FF0000 | 255 | 0 | 0 | |
Saffron | Шафрановий | #F4C430 | 244 | 196 | 48 | |
Sea Green | Зелене море | #2E8B57 | 46 | 139 | 87 | |
Swamp green | Болотяний | #ACB78E | 172 | 183 | 142 | |
Teal | Синьо-зелений | #008080 | 0 | 128 | 128 | |
Ultramarine | Ультрамариновий | #120A8F | 18 | 10 | 143 | |
Violet | Фіолетовий | #8B00FF | 139 | 0 | 255 | |
Yellow | Жовтий | #FFFF00 | 255 | 255 | 0 |
Коди кольорів (фон) за насиченістю та відтінком.
Для 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 сторінках.
Влад Мержевич
У HTML колір задається одним із двох шляхів: за допомогою шістнадцяткового коду і за назвою деяких кольорів. Переважно використовується спосіб, заснований на шістнадцятковій системі числення, як найбільш універсальний.
Шістнадцяткові кольори
Для завдання кольорів HTML використовуються числа в шістнадцятковому коді. Шістнадцяткова система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 16. Цифри будуть наступні: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Числа від 10 до 15 замінені латинськими літерами. У табл. 6.1 наведено відповідність десяткових та шістнадцяткових чисел.
Числа більше 15 у шістнадцятковій системі утворюються об'єднанням двох чисел в одне (табл. 6.2). Наприклад, числу 255 у десятковій системі відповідає число FF у шістнадцятковій.
Щоб не виникало плутанини у визначенні системи числення, перед шістнадцятковим числом ставиться символ ґрат #, наприклад #aa69cc. У цьому регістр значення немає, тому допустимо писати #F0F0F0 чи #f0f0f0.
Типовий колір, що використовується в HTML, виглядає так.
Тут колір фону веб-сторінки встановлено як #FA8E47. Символ грат # перед числом означає, що воно шістнадцяткове. Перші дві цифри (FA) визначають червону складову кольору, цифри третьої по четверту (8E) — зелену, а останні дві цифри (47) — синю. У результаті вийде такий колір.
FA | + | 8E | + | 47 | = | FA8E47 |
Кожен із трьох кольорів — червоний, зелений та синій — може набувати значень від 00 до FF, що у результаті утворює 256 відтінків. Таким чином, загальна кількість кольорів може бути 256х256х256 = 16777216 комбінацій. Колірна модель, заснована на червоній, зеленій та синій складовій, отримала назву RGB (red, green, blue; червоний, зелений, синій). Ця модель адитивна (від add - складати), при якій додавання всіх трьох компонентів утворює білий колір.
Щоб легше орієнтуватися в шістнадцяткових кольорах, зважте на деякі правила.
- Якщо значення компонента кольору однакові (наприклад: #D6D6D6), то вийде сірий відтінок. Чим більше число, тим світліший колір, значення змінюються від #000000 (чорний) до #FFFFFF (білий).
- Яскраво-червоний колір утворюється, якщо червоний компонент зробити максимальним (FF), а решту компонентів обнулити. Колір зі значенням #FF0000 найчервоніший із можливих червоних відтінків. Аналогічно з зеленим кольором (#00FF00) і синім (#0000FF).
- Жовтий колір (#FFFF00) виходить змішанням червоного із зеленим. Це добре видно на колірному колі (рис. 6.1), де представлені основні кольори (червоний, зелений, синій) та комплементарні чи додаткові. До них відносяться жовтий, блакитний та фіолетовий (ще званим пурпурним). Взагалі, будь-який колір можна отримати змішанням довколишніх кольорів. Так, блакитний (#00FFFF) виходить за рахунок поєднання синього та зеленого кольору.
Мал. 6.1. Колірний круг
Кольори за шістнадцятковими значеннями не обов'язково підбирати емпіричним шляхом. Для цієї мети підійде графічний редактор, що вміє працювати з різними колірними моделяминаприклад, Adobe Photoshop. На рис. 6.2 показано вікно для вибору кольору у цій програмі, лінією обведено отримане шістнадцяткове значенняпоточного кольору. Його можна скопіювати та вставити до себе в код.
Мал. 6.2. Вікно для вибору кольору у Photoshop
Веб-кольори
Якщо встановити якість кольору монітора в 8 біт (256 кольорів), то один і той же колір може відображатися в різних браузерахпо своєму. Це пов'язано зі способом відображення графіки, коли браузер працює зі своєю власною палітрою і не може показати колір, який у панелі немає. У цьому випадку колір замінюється поєднанням пікселів інших, близьких до нього, кольорів, що імітують заданий. Щоб колір залишався незмінним у різних браузерах, ввели палітру про веб-квітів. Веб-квітами називаються такі кольори, для кожної складової яких - червоної, зеленої та синьої - встановлюється одне з шести значень - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). У дужках вказано шістнадцяткове значення цієї компоненти. Загальна кількість кольорів з усіх можливих поєднань дає 6х6х6 – 216 кольорів. Приклад веб-кольору - #33FF66.
Основна особливість веб-кольору полягає в тому, що він відображається однаково у всіх браузерах. У Наразіактуальність веб-квітів дуже мала через підвищення якості моніторів та розширення їх можливостей.
Кольори за назвою
Щоб не запам'ятовувати сукупність цифр, замість них можна використовувати імена кольорів, що широко використовуються. У табл. 6.3 наведено імена найпопулярніших назв кольорів.
Ім'я кольору | Колір | Опис | Шістнадцяткове значення |
---|---|---|---|
black | Чорний | #000000 | |
blue | Синій | #0000FF | |
fuchsia | Світлофіолетовий | #FF00FF | |
gray | Темно-сірий | #808080 | |
green | Зелений | #008000 | |
lime | Світло зелений | #00FF00 | |
maroon | Темно червоний | #800000 | |
navy | Темно синій | #000080 | |
olive | Оливковий | #808000 | |
purple | Темно фіолетовий | #800080 | |
red | червоний | #FF0000 | |
silver | Світло сірий | #C0C0C0 | |
teal | Синьо-зелений | #008080 | |
white | Білий | #FFFFFF | |
yellow | Жовтий | #FFFF00 |
Не має значення, яким способом ви задаєте колір - на його ім'я або за допомогою шістнадцяткових чисел. По дії ці способи рівні. У прикладі 6.1 показано, як встановити колір тла та тексту веб-сторінки.
Приклад 6.1. Колір фону та тексту
Приклад тексту
У даному прикладі колір фону визначається за допомогою атрибуту bgcolor тега
а колір тексту через атрибут text . Для різноманітності значення атрибута text встановлено у вигляді шістнадцяткового числа, а у bgcolor за допомогою зарезервованого ключового слова teal .У web-дизайні існує кілька способів подання кольору
HEX – шістнадцяткова система представлення кольору на основі 16. Для даної системи використовуються арабські десяткові цифри від 0 до 9 та латинські літери від A до F для доповнення цифрової кількості до 16. Для web-дизайну взято 16 основних (ключових) кольорів, так званий шістнадцятковий код кольору #RRGGBB, де кожна пара відповідає за свою частку кольору: RR – червоний, GG – зелений та BB – синій. Кожна частка кольору в діапазоні від 00 до FF.
Два інших уявлення кольору в web-дизайні це: у вигляді RGB(*,*,*), де кожна «*» частка кольору представлена десятковими цифрами від 0 до 255 та за найменуваннями кольору англійською мовою.
При створенні кольорового зображення головною проблемою є правильна передача кольорів на різних типахкомп'ютерів, моніторів та браузерів. Якщо браузер не може правильно відобразити колір, він підбирає схожий або змішує кілька кольорів. А іноді може замінити якийсь зовсім інший колір.
Таблиця 16 основних кольорів, які використовуються у всіх браузерах
Назва | Колір | Hex | (RGB) |
Aqua (морська хвиля) | #00FFFF | (000,255,255) | |
Black (чорний) | #000000 | (000,000,000) | |
Blue (блакитний) | #0000FF | (000,000,255) | |
Fuchsia (фуксин) | #FF00FF | (255,000,255) | |
Gray (сірий) | #808080 | (128,128,128) | |
Green (зелений) | #008000 | (000,128,000) | |
Lime (яскраво-зелений) | #00FF00 | (000,255,000) | |
Maroon (темно-бордовий) | #800000 | (128,000,000) | |
Navy (темно-синій) | #000080 | (000,000,128) | |
Olive (оливковий) | #808000 | (128,128,000) | |
Purple (фіолетовий) | #800080 | (128,000,128) | |
Red (червоний) | #FF0000 | (255,000,000) | |
Silver (срібний) | #C0C0C0 | (192,192,192) | |
Teal (сіро-зелений) | #008080 | (000,128,128) | |
White (білий) | #FFFFFF | (255,255,255) | |
Yellow (жовтий) | #FFFF00 | (255,255,000) |
Таблиця пурпурногокольори та його відтінків
Назва | Колір | Hex | (RGB) |
Magenta (пурпуровий) | #FFCBDB | (255,203,219) | |
Magenta (пурпуровий) | #FF0099 | (255,000,153) | |
Magenta (маджента) | #F95A61 | (249,090,097) | |
Fuchsia (фуксія) | #FF00FF | (255,000,255) | |
Мовеїн (аніліновий пурпур) | #EF0097 | (239,000,151) | |
Salmon pink (оранжево-рожевий) | #FF91A4 | (255,145,164) | |
Cenise (відтінок пурпурового) | #DE3163 | (153,149,140) | |
Aubergine Eggplant (баклажановий) | #990066 | (153,000,132) | |
Lavender blush (рожево-лавандовий) |  #FFF0F5 | (255,240,245) | |
Lilac (бузковий) | #C8A2C8 | (200,162,200) | |
Magenta (маджента) | #FF008F | (255,000,143) | |
Orchid (орхідея) | #DA70D6 | (218,112,214) | |
Red-violet (фіолетово-червоний) | #C71585 | (199,021,133) | |
Sanguine (сангіновий) | #92000A | (146,000,010) | |
Thistle (відтінок пурпурового) | #D8BFD8 | (185,211,238) | |
Violet-eggplant (відтінок пурпурового) | #991199 | (153,017,153) | |
Rosa vivo (насичено рожевий) | #FF007F | (255,000,127) | |
Lavender-rose (відтінок пурпурового) | #FBA0E3 | (108,123,139) | |
Mountbatten pink (рожевий Маунбаттен) | #997ABD | (153,122,141) |
Таблиця сірогокольори та його відтінків
Назва | Колір | Hex | (RGB) |
Gray (Сірий) | #808080 | (128,128,128) | |
Gray (Сірий) | #bebebe | (190,190,190) | |
(Сірий-відтінок) | #858585 | (133,133,133) | |
Gray33 (Сірий-33) | #545454 | (084,084,084) | |
(Сірого шиферу) | #708090 | (112,128,144) | |
(Кварцовий) | # 99958с | (153,149,140) | |
(Світло сірий) | #bbbbbb | (187,187,187) | |
(Сріблястий) | #c0c0c0 | (192,192,192) | |
(Сіро-білий) | #f0f0f0 | (240,240,240) | |
(Бороди Абдель-Керіма) | #e0e0e0 | (224,224,224) | |
LightGray (Сірий світлий) | #d3d3d3 | (211,211,211) | |
LightStateGray () | #778899 | (119,136,153) | |
StateGray-1 (Блідо-васильковий1) | #c6e2ff | (198,226,255) | |
StateGray-2 (Блідо-васильковий2) | #b9d3ee | (185,211,238) | |
StateGray3 () | #9fb6cd | (159,182,205) | |
StateGray4 () | #6c7b8b | (108,123,139) |
Для завдання кольорів використовуються числа у шістнадцятковому коді. Шістнадцяткова система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 16. Цифри будуть наступні: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Цифри від 10 до 15 замінені латинськими літерами. Числа більше 15 у шістнадцятковій системі утворюються об'єднанням двох чисел в одне. Наприклад, числу 255 у десятковій системі відповідає число FF у шістнадцятковій системі. Щоб не виникало плутанини у визначенні системи числення, перед шістнадцятковим числом ставлять символ ґрат #, наприклад #666999. Кожен із трьох кольорів – червоний, зелений та синій – може приймати значення від 00 до FF. Таким чином, позначення кольору розбивається на три складові #rrggbb, де перші два символи відзначають червону компоненту кольору, два середні - зелену, а два останні - синю. Дозволяється використовувати скорочену форму #rgb, де кожен символ слід подвоювати. Так запис #fe0 слід розцінювати як #ffee00.
За назвою
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Браузери підтримують деякі кольори за їхньою назвою. У табл. 1 наведено назви, шістнадцятковий код, значення у форматі RGB, HSL та опис.
Ім'я | Колір | Код | RGB | HSL | Опис |
---|---|---|---|---|---|
white | #ffffff або #fff | rgb(255,255,255) | hsl(0,0%,100%) | Білий | |
silver | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Сірий | |
gray | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Темно-сірий | |
black | #000000 або #000 | rgb(0,0,0) | hsl(0,0%,0%) | Чорний | |
maroon | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Темно червоний | |
red | #ff0000 або #f00 | rgb(255,0,0) | hsl(0,100%,50%) | червоний | |
orange | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Помаранчевий | |
yellow | #ffff00 або #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Жовтий | |
olive | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Оливковий | |
lime | #00ff00 або #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Світло зелений | |
green | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Зелений | |
aqua | #00ffff або #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Блакитний | |
blue | #0000ff або #00f | rgb(0,0,255) | hsl(240,100%,50%) | Синій | |
navy | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Темно синій | |
teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Синьо-зелений | |
fuchsia | #ff00ff або #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Рожевий | |
purple | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Фіолетовий |
За допомогою RGB
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Можна визначити колір, використовуючи значення червоної, зеленої та синьої складової у десятковому численні. Кожна з трьох компонентів кольору набуває значення від 0 до 255. Також допустимо задавати колір у відсотковому відношенні, при цьому 100% буде відповідати числу 255. Спочатку вказується ключове слово rgb , а потім у дужках, через кому вказуються компоненти кольору, наприклад rgb(255, 128, 128) або rgb(100%, 50%, 50%).
RGBA
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Формат RGBA схожий по синтаксису на RGB, але включає альфа-канал, що задає прозорість елемента. Значення 0 відповідає повній прозорості, 1 – непрозорості, а проміжне значення на кшталт 0.5 – напівпрозорості.
RGBA доданий до CSS3, тому валідацію CSS-коду треба проводити саме за цією версією. Слід зазначити, що стандарт CSS3 ще у розробці і деякі можливості у ньому можуть змінитися. Наприклад, колір у форматі RGB доданий до якості background-color проходить валідацію, а доданий до якості background вже немає. При цьому браузери цілком коректно розуміють колір для тієї та іншої властивості.
HSL
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Назва формату HSLутворено від поєднання перших букв Hue (відтінок), Saturate (насиченість) та Lightness (світло). Відтінок це значення кольору на колі (рис. 1) і задається в градусах. 0 ° відповідає червоному кольору, 120 ° - зеленому, а 240 ° - синьому. Значення відтінку може змінюватись від 0 до 359.
Мал. 1. Колірний круг
Насиченістю називається інтенсивність кольору, що вимірюється у відсотках від 0% до 100%. Значення 0% означає відсутність кольору та відтінок сірого, 100% максимальне значення насиченості.
Світлона задає, наскільки колір яскравий і вказується у відсотках від 0% до 100%. Малі значення роблять колір темнішим, а високі світлішими, крайні значення 0% і 100% відповідають чорному та білому кольору.
HSLA
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Формат HSLA схожий по синтаксису на HSL, але включає альфа-канал, що задає прозорість елемента. Значення 0 відповідає повній прозорості, 1 – непрозорості, а проміжне значення на кшталт 0.5 – напівпрозорості.
Значення кольору в форматах RGBA, HSL і HSLA додані до CSS3, тому під час використання цих форматів перевіряйте код на валідність з урахуванням версії.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Попередження
Усі перелічені на сайті методи лову лева є теоретичними та базуються на обчислювальних методах. Автори не гарантують вашої безпеки при їх використанні та знімають із себе будь-яку відповідальність за результат. Пам'ятайте, лев це хижак та небезпечна тварина!
Результат даного прикладупоказано на рис. 2.
Мал. 2. Кольори на веб-сторінці