Колір
Оновлено: 05.12.2022
Колір
У HTML колір задається одним із двох шляхів: за допомогою шістнадцяткового коду та за назвою деяких кольорів. Переважно використовується спосіб, заснований на шістнадцятковій системі числення, як найбільш універсальний.
Шістнадцяткові кольори
Для завдання кольорів у HTML використовуються числа в шістнадцятковому коді. Шістнадцяткова система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 16. Цифри будуть такі: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа від 10 до 15 замінено латинськими літерами. У табл. 1 наведено відповідність десяткових і шістнадцяткових чисел.
| Десяткові | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Шістнадцяткові | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
Числа, більші за 15 у шістнадцятковій системі, утворюються об'єднанням двох чисел в одне (табл. 2). Наприклад, числу 255 у десятковій системі відповідає число FF у шістнадцятковій.
| Десяткові | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Шістнадцяткові | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 1A | 1B | 1C |
Щоб не виникало плутанини у визначенні системи числення, перед шістнадцятковим числом ставиться символ решітки #, наприклад #aa69cc.
Типовий колір, який використовується в HTML, має такий вигляд.
<body bgcolor="#fa8e47">Тут колір фону веб-сторінки задано як #fa8e47. Символ решітки # перед числом означає, що воно шістнадцяткове. Перші дві цифри (fa) визначають червону складову кольору, цифри з третьої по четверту (8e) - зелену, а останні дві цифри (47) - синю. У підсумку вийде такий колір.
| fa | + | 8e | + | 47 | = | fa8e47 |
Кожен із трьох кольорів - червоний, зелений і синій - може набувати значень від 00 до FF, що в підсумку утворює 256 відтінків. Таким чином, загальна кількість кольорів може бути 256х256х256 = 16.777.216 комбінацій. Колірна модель, заснована на червоній, зеленій і синій складовій, отримала назву RGB (red, green, blue; червоний, зелений, синій). Ця модель адитивна (від англ. add - складати), за якої додавання всіх трьох компонент утворює білий колір.
Щоб легше орієнтуватися в шістнадцяткових кольорах, візьміть до уваги деякі правила.
- Якщо значення компонент кольору однакові (наприклад: #d6d6d6d6), то вийде сірий відтінок. Що більше число, то світліший колір, значення при цьому змінюються від #000000 (чорний) до #ffffff (білий).
- Яскраво-червоний колір утворюється, якщо червоний компонент зробити максимальним (ff), а інші компоненти обнулити. Колір зі значенням #ff0000 найчервоніший із можливих червоних відтінків. Аналогічно з зеленим кольором (#00ff00) і синім (#0000ff).
- Жовтий колір (#ffff00) виходить змішанням червоного із зеленим. Це добре видно на колірному колі (мал. 1), де представлено основні кольори (червоний, зелений, синій) і компліментарні або додаткові. До них належать жовтий, блакитний і фіолетовий (який ще називають пурпуровим). Взагалі, будь-який колір можна отримати змішанням прилеглих до нього кольорів. Так, блакитний (#00ffff) отримують завдяки об'єднанню синього та зеленого кольору.
Кольори за шістнадцятковими значеннями не обов'язково підбирати емпіричним шляхом. Для цієї мети підійде графічний редактор, що вміє працювати з різними колірними моделями, наприклад, Adobe Photoshop. На рис. 2 показано вікно для вибору кольору в цій програмі, лінією обведено отримане шістнадцяткове значення поточного кольору. Його можна скопіювати і вставити до себе в код.
Веб-кольори
Якщо встановити якість передачі кольору монітора у 8 біт (256 кольорів), то один і той самий колір може показуватися в різних браузерах по-своєму. Це пов'язано зі способом відображення графіки, коли браузер працює зі своєю власною палітрою і не може показати колір, який у нього в палітрі відсутній. У цьому разі колір замінюється поєднанням пікселів інших, близьких до нього, кольорів, що імітують заданий. Щоб колір залишався незмінним у різних браузерах, ввели палітру так званих веб-кольорів. Веб-кольорами називаються такі кольори, для кожної складової - червоної, зеленої та синьої, встановлюється одне з шести значень - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). У дужках вказано шістнадцяткове значення цієї компоненти. Загальна кількість кольорів з усіх можливих поєднань дає 6х6х6 - 216 кольорів. Приклад веб-кольору - #33ff66.Основна особливість веб-кольору полягає в тому, що він показується однаково у всіх браузерах. Наразі актуальність веб-кольорів вельми мала через підвищення якості моніторів і розширення їхніх можливостей.
Кольори за назвою
Щоб не запам'ятовувати сукупність цифр, замість них можна використовувати імена широко використовуваних кольорів. У табл. 3 наведено імена популярних назв кольорів
| Им'я кольору | Колір | Опис | Шістнадцяткове значення |
|---|---|---|---|
| aqua | Блакитний | #00ffff | |
| 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 |