НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
Кольори в HTML. Уроки W3Schools українською для початківців

En Es De Fr

Кольори RGB та RGBA


Що таке RGB-кольори?

RGB (Red, Green, Blue) – це модель кольору, яка використовується для відображення кольорів на екранах електронних пристроїв, таких як телевізори, монітори комп'ютерів, смартфони та інші.


Як це працює?

У моделі RGB кожен колір створюється шляхом змішування трьох основних кольорів: червоного (Red), зеленого (Green) та синього (Blue) у різних пропорціях. Кожен з цих кольорів має свою інтенсивність, яка може змінюватися від 0 до 255. Комбінуючи ці три кольори в різних пропорціях, можна отримати мільйони різних відтінків.


Де використовується RGB?

Модель RGB використовується всюди, де потрібно відображати кольори на екрані. Ось кілька прикладів:

  • Телевізори та монітори: RGB використовується для створення зображення на екрані. Кожен піксель на екрані складається з трьох субпікселів: червоного, зеленого та синього. Змінюючи яскравість цих субпікселів, можна отримати будь-який колір.
  • Смартфони та планшети: Екрани цих пристроїв також використовують модель RGB для відображення кольорів.
  • Цифрові фото- відеокамери: RGB використовується для запису кольорової інформації. Кожна фотографія, зроблена цифровою камерою, містить інформацію про інтенсивність червоного, зеленого та синього кольорів для кожного пікселя зображення.
  • Графічний дизайн та веб-дизайн: RGB використовується для створення кольорових зображень, які потім відображаються на екранах.
  • Освітлення: Деякі світлодіодні лампи використовують модель RGB для створення кольорового освітлення. Змінюючи інтенсивність червоного, зеленого та синього кольорів, можна отримати будь-який відтінок світла.

Приклад

Використання RGB-кольорів при стилізації вебсторінки:

body {
  background-color: rgb(255, 255, 255); /* Білий фон */
  color: rgb(0, 0, 0); /* Чорний текст */
}

Переваги RGB:

  • Широкий спектр кольорів: RGB дозволяє створювати мільйони різних відтінків кольорів.
  • Простота використання: Модель RGB легко зрозуміти та використовувати.

Недоліки RGB:

  • Залежність від пристрою: Кольори RGB можуть виглядати по-різному на різних екранах, оскільки кожен пристрій має свої особливості відображення кольорів.
  • Не підходить для друку: Модель RGB не підходить для друку, оскільки друкарські фарби змішуються за іншими принципами. Для друку використовується модель CMYK.

Як отримати RGB-колір?

Щоб отримати RGB-колір, можна скористатись RGB-калькулятором.

RGB Калькулятор


 
#ff0000
hsl(0, 100%, 50%)


R:
G:
B:

RGB Кольори

Значення кольору RGB підтримуються у всіх браузерах.

Значення кольору RGB вказано за допомогою: rgb(red, green, blue).

Кожен параметр (red, green, blue) визначає інтенсивність кольору як ціле число від 0 до 255.

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


Спробуйте самі

Значення кольору RGB підтримуються у всіх основних браузерах.

Приклад

<style>
div {
    background-color: rgb(0, 191, 255); /* Колір фону */
    color: rgb(255, 255, 255); /* Колір тексту */
}
</style>

Спробуйте самі »

Значення кольорів RGBA

Значення кольорів RGBA — це розширення значень кольорів RGB за допомогою каналу Alpha, який визначає непрозорість кольору.

Значення кольору RGBA визначається за допомогою:

rgba(red, green, blue, alpha)

Параметр альфа - це число від 0.0 (повністю прозорий) до 1.0 (зовсім не прозорий):

Приклад

<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
Спробуйте самі »