- Зміст
В 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, виглядає так.
<code class="no-buttons"><body bgcolor="#fa8e47">
Тут колір фону веб-сторінки заданий як #fa8e47. Символ ґрат # перед числом означає, що воно шістнадцяткове. Перші дві цифри (fa) визначають червону складову кольору, цифри з третьої до четвертої (8e) — зелену, а останні дві цифри (47) — синю. В результаті вийде такий колір.
| + | 8e | + | 47 | = | fa8e47 |
Кожен із трьох кольорів — червоний, зелений та синій— може приймати значення від 00 до FF, що у результаті утворює 256 відтінків. Таким чином, загальна кількість кольорів може бути 256х256х256=16777216 комбінацій. Колірна модель, заснована на червоній, зеленій та синій складовій, отримала назву RGB (red, green, blue; червоний, зелений, синій). Ця модель адитивна (від англ. add — складати), при якій додавання всіх трьох компонент утворює білий колір.
Щоб легше орієнтуватися в шістнадцяткових кольорах, прийміть до уваги деякі правила.
- Якщо значення компонента кольору однакові (наприклад: #d6d6d6), вийде сірий відтінок. Чим більше число, тим світліший колір, значення при цьому змінюються від #000000 (чорний) до #ffffff (білий). Яскраво-червоний колір утворюється, якщо червоний компонент зробити максимальним (ff), а решта компонентів обнулити. Колір зі значенням #ff0000 найчервоніший із можливих червоних відтінків. Аналогічно з зеленим кольором (#00ff00) і синім (#0000ff).
- Жовтий колір (#ffff00) виходить змішанням червоного із зеленим. Це добре видно на колірному колі (рис. 1), де представлені основні кольори (червоний, зелений, синій) та компліментарні або додаткові. До них відносяться жовтий, блакитний та фіолетовий (ще званим пурпурним). Взагалі, будь-який колір можна отримати змішанням прилеглих до нього кольорів. Так, блакитний (#00ffff) виходить за рахунок об'єднання синього та зеленого кольору.
Мал. 1. Колірне коло
Кольори за шістнадцятковими значеннями не обов'язково підбирати емпіричним шляхом. Для цього підійде графічний редактор, який вміє працювати з різними колірними моделями, наприклад, Adobe Photoshop. На мал. 2 показано вікно для вибору кольору у цій програмі, лінією обведено отримане шістнадцяткове значення поточного кольору. Його можна скопіювати та вставити до себе в код.
Мал. 2. Вікно для вибору кольору у програмі Photoshop
Веб-колір
Якщо встановити якість кольору передачі монітора в 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 |
Браузери
| 1 | 12 | 1 | 2.1 | 1 | 1 |
| 1 | 1 | 6 | 1 |
Браузери
У таблиці браузерів застосовуються наступні позначення.
- — елемент повністю підтримується браузером;
- — елемент браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або елемент підтримується з застереженнями.
Число вказує версію браузреа, починаючи з якої елемент рживается.