Для завдання кольорів на веб-сторінці застосовується три способи: перша використовує позначення кольорів в шістнадцятковому коді, другий – десятковому, а третій – за назвою деяких кольорів. Переважно використовується метод, заснований на шістнадцятковій системі числення, як найбільш універсальний. Десяткова система, хоча і більш звична для представлення, знаходить застосування тільки за допомогою CSS.
Шістнадцяткові кольори
Для завдання кольорів в HTML використовуються числа в шістнадцятковому коді. Шістнадцяткова система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 16. Цифри будуть наступні: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Цифри від 10 до 15 замінені латинськими літерами. У табл. 1 наведено відповідність десяткових і шістнадцяткових чисел.
Табл. 1. Десяткові і шістнадцяткові числа менше 16
Десяткові | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
---|---|---|---|---|---|---|---|---|---|---|
Шістнадцяткові | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A |
Десяткові | 11 | 12 | 13 | 14 | 15 |
---|---|---|---|---|---|
Шістнадцяткові | B | C | D | E | F |
Числа більше 15 в шістнадцятковій системі утворюються об’єднанням двох чисел в одне. Наприклад, числу 255 в десятковій системі відповідає число FF в шістнадцятковій (табл. 2).
Табл. 2. Десяткові і шістнадцяткові числа більше 16
Десяткові | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
---|---|---|---|---|---|---|---|---|---|
Шістнадцяткові | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
Десяткові | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
---|---|---|---|---|---|---|---|
Шістнадцяткові | 19 | 1A | 1B | 1C | 1D | 1E | 1F |
Щоб не виникало плутанини у визначенні системи числення, перед шістнадцятковим числом ставлять символ ришітки #, наприклад #666999.
Типовий колір, використовуваний в HTML, виглядає наступним чином.
<body bgcolor=”#FA8E47″>
Колір фону заданий як #FA8E47. Символ решітки # перед числом означає, що воно шістнадцяткове. Перші дві цифри (FA) визначають червону складову кольору, цифри з третьою за четверту (8E) – зелену, а останні дві цифри (47) – синю. У підсумку вийде такий колір.
FA + 8E + 47 = FA8E47
Кожен з трьох кольорів – червоний, зелений і синій – може приймати значення від 00 до FF, що в підсумку утворює 256 відтінків. Таким чином, в моделі RGB кількість кольорів може бути 256 х 256 х 256 = 16.777.216 комбінацій.
Веб-кольори
Якщо встановити кольори дисплея у 8 біт (256 кольорів), то один і той же колір може показуватися в різних браузерах по-своєму. Це пов’язано зі способом відображення графіки, коли браузер працює зі своєю власною палітрою і не може показати колір, який у нього в палітрі відсутній. У цьому випадку колір замінюється поєднанням пікселів інших, близьких до нього, кольорів, що імітують заданий. Щоб колір залишався незмінним в різних браузерах, ввели палітру, так званих, веб-кольорів. Веб-кольорами називаються такі кольори, для кожної складової яких – червоної, зеленої та синьої – встановлюється одне з шести значень – 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). У дужках вказано шістнадцяткове значення даної компоненти. Загальна кількість кольорів з усіх можливих поєднань дає 6х6х6 – 216 кольорів. Приклад веб-кольору – # 33FF66.
Основна особливість веб-кольору полягає в тому, що він показується однаково у всіх браузерах. В даний момент актуальність веб-кольорів вельми мала через підвищення якості моніторів і розширення їхніх можливостей.
Назви кольорів
Щоб не запам’ятовувати сукупність цифр, замість них можна використовувати імена широко використовуваних кольорів.
<body bgcolor = “navy”>
Нижче в таблиці наведені 16 основних назв кольорів, використовуваних у всіх браузерах.
Назва | Колір | Hex | Червоний (R) | Зелений (G) | Синій (B) |
---|---|---|---|---|---|
aqua | #00FFFF | 00 | 255 | 255 | |
black | #000000 | 00 | 00 | 00 | |
blue | #0000FF | 00 | 00 | 255 | |
fuchsia | #FF00FF | 255 | 00 | 255 | |
gray | #808080 | 128 | 128 | 128 | |
green | #008000 | 00 | 128 | 00 | |
lime | #00FF00 | 00 | 255 | 00 | |
maroon | #800000 | 128 | 00 | 00 | |
navy | #000080 | 00 | 00 | 128 | |
olive | #808000 | 128 | 128 | 00 | |
purple | #800080 | 128 | 00 | 128 | |
red | #FF0000 | 255 | 00 | 00 | |
silver | #C0C0C0 | 192 | 192 | 192 | |
teal | #008080 | 00 | 128 | 128 | |
white | #FFFFFF | 255 | 255 | 255 | |
yellow | #FFFF00 | 255 | 255 | 00 |