HTML RGB и RGBA цвета

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

---

Определение цвета в формате RGB

В HTML цвет в формате RGB задается следующим образом:

rgb(красный, зеленый, синий)

Здесь каждое из чисел (красный, зелёный, синий) принимает значения от 0 до 255.

Например:

color: rgb(255, 0, 0);
background-color: rgb(45, 255, 0);
border-color: rgb(0, 0, 0);
/* и др. */

Поскольку каждая составляющая цвета представлена шкалой от 0 до 255, общее число уникальных оттенков в модели RGB вычисляется как произведение всех возможных состояний каждой составляющей.

Это означает, что существует 256 x 256 x 256 = 16 777 216 возможных цветов!

Например, значение rgb(255, 0, 0) определяет красный цвет, так как красный компонент установлен в максимальное значение (255), а два остальных компонента (зеленый и синий) установлены в значение 0.

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

Чтобы задать черный цвет, нужно установить все цветовые параметры в значение 0 — rgb(0, 0, 0).

Чтобы задать белый цвет, нужно установить все цветовые параметры в значение 255 — rgb(255, 255, 255).

Эти базовые знания позволяют точно управлять цветом объектов на веб-странице и создавать разнообразные дизайнерские решения.

Примеры:

Попробуйте создать собственный оттенок:

---

Серые тона

Серый оттенок получается, когда все три составляющих цвета совпадают между собой.

Например:

---

Формат RGBA — расширенная версия RGB

Помимо традиционных RGB-компонентов, формат RGBA добавляет дополнительный параметр — альфа-канал (Alpha channel), который управляет уровнем прозрачности цвета. Это позволяет создавать полупрозрачные элементы интерфейса или наложенные слои изображений, обеспечивая возможность плавного перехода между цветами и фоновыми элементами.

Значение альфа-канала задается дробным числом от 0 до 1. Например:

• Если альфа равно 0, элемент будет абсолютно прозрачным.
• Если альфа установлено на 1, объект становится непрозрачным.

Таким образом синтаксис RGBA выглядит так:

rgba(красный, зелёный, синий, альфа)

Примеры:

Поэкспериментируйте с прозрачностью, задавая разные значения альфа: