Урок 52 із 104
50%
← Назад

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

Вивчаємо RGB-модель кольорів у CSS та створюємо різні відтінки за допомогою red, green і blue.

RGB-модель кольорів

У CSS колір можна задавати назвою, через HEX або за допомогою функції rgb(). RGB означає red, green, blue — червоний, зелений і синій. Комбінуючи ці три базові кольори в різних пропорціях, можна отримати велику кількість відтінків.

Кожне значення в rgb() може бути від 0 до 255. Значення 0 означає повну відсутність відповідного кольору, а 255 — його максимальну інтенсивність.

  • Перше значення — red (червоний).
  • Друге значення — green (зелений).
  • Третє значення — blue (синій).
  • Кожне значення може бути від 0 до 255.
  • rgb(0, 0, 0) — чорний колір.
  • rgb(255, 255, 255) — білий колір.

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

p {

color: rgb(255, 0, 0);
}

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

p {

color: rgb(0, 255, 0);
}

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

p {

color: rgb(0, 0, 255);
}

Змішування кольорів

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

p {

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

Змішування червоного та синього

p {

color: rgb(255, 0, 255);
}

Власний відтінок

p {

color: rgb(200, 100, 125);
}

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

/* Білий */

p {
color: rgb(255, 255, 255);
}

/* Чорний */
h2 {
color: rgb(0, 0, 0);
}
❗ Важливо:

Запам'ятайте просте правило: 0 — кольору немає, 255 — максимальна інтенсивність. Порядок завжди однаковий: red, green, blue.

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

📌 Завдання:
  1. №1. Задайте через rgb() червоний колір для всіх абзаців.
  2. №2. Задайте через rgb() зелений колір для всіх h2.
  3. №3. Задайте через rgb() синій колір для всіх h3.
  4. №4. Змішайте чистий червоний і чистий зелений кольори. Який колір отримаєте?
<!-- Початковий код -->

<p>Абзац</p> <h2>Заголовок h2</h2> <h3>Заголовок h3</h3>
💡 Показати підказку

Для червоного використайте rgb(255, 0, 0), для зеленого — rgb(0, 255, 0), для синього — rgb(0, 0, 255).

✅ Показати відповідь
p {

color: rgb(255, 0, 0);
}

h2 {
color: rgb(0, 255, 0);
}

h3 {
color: rgb(0, 0, 255);
}

/* Червоний + зелений */
color: rgb(255, 255, 0);