Колір

Колір тексту

Щоб задати якомусь тексту колір використовують властивість color, в яку вказують колір у будь-якому дозволеному форматі.

<p class="my-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto aspernatur similique sit obcaecati et ex minus sapiente soluta illum, rerum sed voluptates, aperiam atque, quia laboriosam tenetur consequatur repellat quod alias ea? Totam nesciunt cupiditate magni omnis esse consectetur perferendis similique molestias, ducimus quisquam autem rem necessitatibus odit architecto minima?</p>

.my-text {
  color: green;
}

Колір фону

Фоновий колір задають за допомогою властивості background-color.

.my-text {
  color: white;
  background-color: green;
}

Формати задання кольору

Іменовані кольори

Існує визначений перелік назв кольорів, які можна використовувати із властивостями color і background-color. Утім у сучасній розробці краще описувати колір іншими доступними способами.

p {
    color: green;
}

RGB

Кожен колір можна описати комбінацією трьох основних кольорів: червоний - R(red), зелений - G(green), синій - B(blue).

Задати RGB-колір можна вказавши частку кожного із трьох основних кольорів. Значення варіюються від 0 (немає кольору) до 255 (максимальне заповнення кольору). Всього існує: 256 * 256 *256 = 16 777 216 комбінацій кольору.

Задають RGB-колір вказанням через кому частки кольору всередині функції rgb().

color: rgb(червоний, зелений, синій);

Наприклад, задамо жовтий колір:

// червоний і зелений - повне насичення, синій - відсутність кольору
p {
  color: rgb(255, 255, 0);
}

Можна також задати RGB-колір у відсотковому співвідношенні вказавши символ %.

color: rgb(100%, 100%, 0%);

Hexadecimal

Найуживаніший формат передачі кольору у веброзробці. Як і в RGB, базується на описі частки трьох основних кольорів (червоного, зеленого і синього) тільки у шістнадцятковій системі. Це зручно, адже діапазон 00h - FFh абсолютно збігається з 0 - 255 у десятковій системі.

У шістнадцятковій системі окрім знайомих нам цифр: 0-9 є додаткові символи A-F.

Задають HEX-колір його шістнадцятковим відповідником після символу #.

color: #RRGGBB;

Тут RR, GG, BB - відповідно частка червоного, зеленого і синього кольору у шістнадцятковій системі. 00 - означає відсутність кольору, FF - повне насичення кольору.

// червоний і зелений - повне насичення, синій - відсутність кольору
p {
  color: #FFFF00;
}

Якщо обидві цифри кожного складового кольору збігаються, то можна задати колір трьома символами. Але у розробці це вважається поганою практикою.

 // допустимо, але погана практика
 color: #FF0;

HSL

Дуже рідко вживаний у веброзробці формат передачі кольору.

HSL означає "Hue, Saturation, Lightness" (Відтінок, Насиченість, Світлота). Це система визначення кольору, яка використовує три параметри для визначення кольору:

1. Відтінок (Hue): Показує тип кольору. Значення може бути від 0 до 360, де 0 (або 360) відповідає червоному, 120 - зеленому, а 240 - синьому.

2. Насиченість (Saturation): Показує насиченість кольору. Значення може бути від 0% (відтінок сірий) до 100% (повна насиченість).

3. Світлота (Lightness): Показує яскравість кольору. Значення може бути від 0% (чорний) до 100% (білий).

Використовуючи HSL, можна точно визначити колір, контролюючи його відтінок, насиченість і світлоту. Наприклад:

p {
    color: hsl(120, 100%, 50%); /* Зелений колір */
}

Прозорість

Вищеописані формати передачі кольору не передбачають прозорість. Якщо у розробці потрібно передати колір і задати йому прозорість використовують функцію rgba(). Вона така сама як і rgb(), тільки має додатковий параметр альфа-канал, тобто прозорість.

rgba(червоний, зелений, синій, альфа-канал)

Якщо значення червоного, зеленого і синього кольору задають числовим діапазоном від 0 до 255, то альфа-канал задають в діапазоні від 0 (повністю прозорий) до 1 (повністю непрозорий). Дробне число задають через точку.

// червоний і зелений - повне насичення, синій - відсутність кольору
// буде 20% змішаного кольору, тобто на 80% прозорий
p {
  color: rgba(255, 255, 0, 0.2);
}

Якщо значення червоного, зеленого і синього кольору задають у відсотковому діапазоні від 0% до 100%, то альфа-канал також задають в діапазоні від 0% (повністю прозорий) до 100% (повністю непрозорий).

// червоний і зелений - повне насичення, синій - відсутність кольору
// буде 20% змішаного кольору, тобто на 80% прозорий
p {
  color: rgba(100%, 100%, 0%, 20%);
}

Прозорість можна задати й в HEX форматі передачі кольору, утім через шістнадцяткову систему обрахунку важко зіставити точне співвідношення прозорості. Для допитливих - тут трохи більше.

Покликання:

Сервіс із дослідження характеристик кольору

Зарезервовані назви для іменованих кольорів