Колір

Оновлено: 16.01.2023

Колір

Колір у стилях можна задавати різними способами: за шістнадцятковим значенням, за назвою, у форматі 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

Можна визначити колір, використовуючи значення червоної, зеленої та синьої складової в десятковому обчисленні. Кожна з трьох компонент кольору приймає значення від 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 - напівпрозорості.

Приклад

Браузери

color

Переглянути сумісність з Can I use?

color