# Колір

## Колір тексту

Щоб задати якомусь тексту колір використовують властивість <mark style="background-color:red;">color</mark>, в яку вказують колір у будь-якому дозволеному форматі.&#x20;

{% code overflow="wrap" %}
```html
<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>
```
{% endcode %}

```css
.my-text {
  color: green;
}
```

## Колір фону

Фоновий колір задають за допомогою властивості <mark style="background-color:red;">background-color</mark>.

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

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

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

Існує визначений [перелік](https://htmlcolorcodes.com/color-names/) назв кольорів, які можна використовувати із властивостями color і background-color. Утім у сучасній розробці краще описувати колір іншими доступними способами.

```css
p {
    color: green;
}
```

### RGB <a href="#rgb" id="rgb"></a>

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

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FGOL7zcVAm9xljMkduded%2Frgb.png?alt=media&#x26;token=ba878354-7a91-4f83-a6dc-cca2a49f4643" alt="" width="375"><figcaption></figcaption></figure>

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

Задають RGB-колір вказанням через кому частки кольору всередині функції <mark style="background-color:red;">rgb()</mark>.

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

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

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

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

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

### Hexadecimal <a href="#hexadecimal" id="hexadecimal"></a>

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

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FoLMNLiXanDAS3easwg92%2Frgb-Hexadecimal.png?alt=media&#x26;token=e07aac2a-7754-49fd-9416-68139f25e273" alt="" width="375"><figcaption></figcaption></figure>

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

Задають HEX-колір його шістнадцятковим відповідником після символу <mark style="background-color:red;">#</mark>.

```css
color: #RRGGBB;
```

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

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

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

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

### **HSL**

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

<figure><img src="https://3125175264-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FClHCh90EjPj6osKWLX7Y%2Fuploads%2FRhKMSdQHr4JIIJdIsmcX%2Fhsl.png?alt=media&#x26;token=74264bdb-6c1d-42be-b286-f695afe65a2c" alt="" width="375"><figcaption></figcaption></figure>

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

1. **Відтінок (Hue)**: Показує тип кольору. Значення може бути від 0 до 360, де 0 (або 360) відповідає червоному, 120 - зеленому, а 240 - синьому.
2. **Насиченість (Saturation)**: Показує насиченість кольору. Значення може бути від 0% (відтінок сірий) до 100% (повна насиченість).
3. **Світлота (Lightness)**: Показує яскравість кольору. Значення може бути від 0% (чорний) до 100% (білий).

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

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

### Прозорість

Вищеописані формати передачі кольору не передбачають прозорість. Якщо у розробці потрібно передати колір і задати йому прозорість використовують функцію <mark style="background-color:red;">rgba()</mark>. Вона така сама  як і rgb(), тільки має додатковий параметр альфа-канал, тобто прозорість.

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

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

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

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

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

Прозорість можна задати й в HEX форматі передачі кольору, утім через шістнадцяткову систему обрахунку важко зіставити точне співвідношення прозорості. Для допитливих - [тут](https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4) [трохи більше](https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4).



**Покликання:**

[Сервіс із дослідження характеристик кольору](https://htmlcolorcodes.com/color-picker/)

[Зарезервовані назви для іменованих кольорів](https://htmlcolorcodes.com/color-names/)

