Колір

Колір в стилях можна задавати різними способами: по шістнадцятиричним значенням, за назвою, в форматі RGB, RGBA, HSL, HSLA.

За шістнадцятиричним значенням

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0 +	1.0 +	3.5 +	1.3 +	1.0 +	1.0 +	1.0 +

Для завдання кольорів використовуються числа в шістнадцятковому коді . Шістнадцяткова система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 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 і опис.

Табл. 1. Назви кольорів

Ім'я	Колір	Код	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.

Насиченістю називається інтенсивність кольору, вимірюється у відсотках від 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

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>
 Кольори </title>
 <style>
 body {background-color: #F9F2E3; } h2 {background-color: rgb (214,86,43); color: rgba (255,255,255, .9); padding: 10px; } P {color: green; } Div {background-color: hsl (60,100%, 25%); color: hsla (120,100%, 50%, 0.1); } </style>
 </head>
 <body>
 <h2>
 Попередження </h2>
 <p>
 Всі перераховані на сайті методи лову лева є теоретичними і базуються на обчислювальних методах. Автори не гарантують вашої безпеки при їх використанні і знімають з себе будь-яку відповідальність за результат. Пам'ятайте, лев це хижак і небезпечна тварина! </p>
 <div>
 Арррргх! </div>
 </body>
 </html>
 

Результат даного прикладу показаний на рис. 2.