Колір у стилях можна задавати різними способами : за шістнадцятковим значенням, за назвою, у форматі RGB, RGBA, HSL, HSLA.
За шістнадцятковим значенням
Для завдання кольорів використовуються числа в шістнадцятковому коді. Шістнадцяткова система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 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.
За назвою
Браузери підтримують деякі кольори за їхньою назвою. У табл. 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
Можно визначити колір, використовуючи значення червоної, зеленої та синьої складової у десятковому численні. Кожна з трьох компонент кольору набуває значення від 0 до 255. Також допустимо задавати колір у відсотковому відношенні, при цьому 100% буде відповідати числу 255. Спочатку вказується ключове слово rgb, а потім у дужках, через кому вказуються компоненти кольору, наприклад rgb(255, 128, 128) або rgb(100%, 50%, 50%).
RGBA
Формат RGBA схожий по синтаксису на RGB, але включає альфа-канал, що задає прозорість елемента. Значення 0 відповідає повній прозорості, 1 — непрозорості, а проміжне значення на кшталт 0.5 — напівпрозорості.
HSL
Назва формату HSL утворена від поєднання перших літер Hue (відтінок), Saturate (насиченість) та Lightness (світлота). Відтінок це значення кольору на колірному колі (мал. 1) і задається в градусах. 0 ° відповідає червоному кольору, 120 ° — зеленому, а 240 ° — синьому. Значення відтінку може змінюватися від 0 до 359.
Мал. 1. Колірне коло
Насиченістю називається інтенсивність кольору, що вимірюється у відсотках від 0% до 100%. Значення 0% означає відсутність кольору та відтінок сірого, 100% максимальне значення насиченості.
Світлота визначає, наскільки колір яскравий і вказується у відсотках від 0% до 100%. Малі значення роблять колір темнішим, а високі світлішими, крайні значення 0% і 100% відповідають чорному та білому кольору.
HSLA
Формат HSLA схожий за синтаксисом на HSL, але включає в себе альфа-канал задає прозорість елемента. Значення 0 відповідає повній прозорості, 1 — непрозорості, а проміжне значення на кшталт 0.5 — напівпрозорість.
Приклад
<!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.
Мал. 2. Кольори на веб-сторінці
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Color Module Level 4 | Робочий проект |
| CSS Color Module Level 3 | Рекомендація |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендація |
| CSS Level 1 | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| #RRGGBB | #RGB | 3 | 12 | 1 | 3.5 | 1 | 1 |
| Назви | 3 | 12 | 1 | 3.5 | 1 | 1 |
| rgb() | 4 | 12 | 1 | 3.5 | 1 | 1 |
| hsl() | 9 | 12 | 1 | 9.5 | 3.1 | 1 |
| rgba() | 9 | 12 | 1 | 10 | 3.1 | 3 |
| hsla() | 9 | 12 | 1 | 10 | 3.1 | 3 |
| #RRGGBB | #RGB | 1 | 1 | 1 | 1 |
| Назви | 1 | 1 | 1 | 1 |
| rgb() | 1 | 1 | 1 | 1 |
| hsl() | 1 | 1 | 10 | 4 |
| rgba() | 4 | 4 | 10 | 4 |
| hsla() | 4 | 4 | 10 | 4 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані у специфікації. Число вказує версію браузера, починаючи з якістю властивість підтримується.