Урок 53 із 104
51%
← Назад

Задання кольору через # у CSS

Вивчаємо HEX-формат кольорів у CSS та розбираємо, як шістнадцяткові значення визначають червоний, зелений і синій компоненти.

HEX-формат кольорів

Колір у CSS можна задавати за допомогою rgb(), але такий запис може бути досить громіздким. Зручним альтернативним способом є HEX-формат — шістнадцяткове значення кольору.

HEX означає hexadecimal — шістнадцяткова система числення. На відміну від десяткової системи, у ній використовуються 16 символів: цифри від 0 до 9 та літери A, B, C, D, E, F.

  • 0–9 — звичайні цифри.
  • A — 10.
  • B — 11.
  • C — 12.
  • D — 13.
  • E — 14.
  • F — 15.

Будова HEX-кольору

HEX-колір починається зі знака # і містить шість символів. Перші два символи визначають кількість червоного, наступні два — зеленого, а останні два — синього.

#RRGGBB

RR — red (червоний)
GG — green (зелений)
BB — blue (синій)

Кожен компонент може мати значення від 00 до FF. Значення 00 означає повну відсутність кольору, а FF — його максимальну інтенсивність.

Чистий червоний колір

p {

color: #FF0000;
}

Чистий зелений колір

p {

color: #00FF00;
}

Чистий синій колір

p {

color: #0000FF;
}

Білий та чорний кольори

/* Білий */

p {
color: #FFFFFF;
}

/* Чорний */
h2 {
color: #000000;
}

Якщо всі три компоненти мають значення FF, отримуємо білий колір. Якщо всі три компоненти дорівнюють 00 — чорний.

Приклад змішаного кольору

p {

color: #FFC8FF;
}

У цьому кольорі FF відповідає червоному компоненту, C8 — зеленому, а FF — синьому. У десятковій системі це rgb(255, 200, 255).

❗ Важливо:

Запам'ятайте порядок: #RRGGBB — червоний, зелений, синій. 00 — мінімальна інтенсивність, FF — максимальна.

Практичне завдання

📌 Завдання:
  1. №1. Встановіть усім абзацам колір #FFEEAA.
  2. №2. Встановіть усім абзацам чорний фон #000000 та білий колір тексту #FFFFFF. Визначте, які це кольори.
  3. №3. Перетворіть rgb(255, 200, 255) у HEX-формат.
  4. №4. Спробуйте самостійно створити HEX-код для жовтого кольору.
<!-- Початковий код -->

<p>Перший абзац</p> <p>Другий абзац</p>
💡 Показати підказку

Для завдання №1 використайте #FFEEAA. Для чорного — #000000, для білого — #FFFFFF. Щоб перетворити rgb(255, 200, 255), замініть кожне десяткове значення його HEX-аналогом.

✅ Показати відповідь
/* №1 */

p {
color: #FFEEAA;
}

/* №2 */
p {
background-color: #000000;
color: #FFFFFF;
}

/* #000000 — чорний /
/ #FFFFFF — білий */

/* №3 */
rgb(255, 200, 255) → #FFC8FF

/* №4 */
p {
color: #FFFF00;
}

/* #FFFF00 — жовтий */