Урок 27 із 239
11%
← Назад

Будь-які кольори в CSS

Навчіться задавати кольори в CSS за допомогою RGB та HEX форматів.

Будь-які кольори в CSS

У CSS можна задавати кольори не тільки за допомогою ключових слів, таких як red або blue.

Ключових слів кольорів небагато, тому для створення будь-яких відтінків використовують спеціальні формати: RGB та HEX.

RGB формат

RGB — це спосіб опису кольору через три значення: червоний (Red), зелений (Green) і синій (Blue).

Кожне значення може бути від 0 до 255. Змінюючи ці числа, можна отримати мільйони різних кольорів.

p {
  color: rgb(255, 236, 114);
}
КолірЗначення
Червонийrgb(255, 0, 0)
Зеленийrgb(0, 255, 0)
Синійrgb(0, 0, 255)
Білийrgb(255, 255, 255)
Чорнийrgb(0, 0, 0)

HEX формат

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

p {
  color: #ff0000;
}

Перші два символи відповідають за червоний колір, наступні два — за зелений, останні два — за синій.

HEXКолір
#ff0000червоний
#00ff00зелений
#0000ffсиній
#ffffffбілий
#000000чорний

Генератори кольорів

Щоб знайти потрібний відтінок, розробники використовують спеціальні генератори кольорів або графічні програми.

  • Генератори кольорів допомагають підібрати HEX та RGB значення.
  • Графічні редактори дозволяють визначити колір із зображення.
  • У професійній розробці часто використовують готові палітри проекту.
/* RGB */

.title {
  color: rgb(37, 99, 235);
}


/* HEX */

.button {
  color: #2563eb;
}
❗ Важливо:

У сучасній веброзробці HEX-коди використовуються дуже часто, тому що їх зручно зберігати в дизайн-системах і CSS-змінних.

📌 Завдання:
  1. Створіть два CSS-правила для будь-яких HTML-тегів.
  2. Для першого використайте RGB формат.
  3. Для другого використайте HEX формат.
  4. Підберіть власні кольори та перевірте результат у браузері.
💡 Показати підказку

Для кольору тексту використовуйте властивість color. Наприклад: color: #2563eb;

✅ Показати відповідь
Приклад:

h1 {
  color: rgb(37, 99, 235);
}

p {
  color: #2563eb;
}