ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML5. Уроки для начинающих

En Ua

HTML RGB и RGBA цвета


Значение цвета RGB отображает КРАСНЫЙ (RED), ЗЕЛЕНЫЙ (GREEN) и СИНИЙ (BLUE) источники света.

Значение цвета RGBA - это расширение RGB с альфа-каналом (opacity/непрозрачность).


RGB Значение цвета

В HTML цвет может быть указан как значение RGB, используя эту формулу:

rgb(red, green, blue)

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

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

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

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

Для отображения черного цвета установите для всех параметров цвета значение 0, например: rgb(0, 0, 0).

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

Экспериментируйте, смешивая значения RGB ниже:

rgb(255, 99, 71)

RED

255

GREEN

99

BLUE

71

Пример

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

Попробуйте сами »

Оттенки серого

Оттенки серого часто определяют, используя равные значения для всех трех параметров:

Пример

rgb(60, 60, 60)
rgb(100, 100, 100)
rgb(140, 140, 140)
rgb(180, 180, 180)
rgb(200, 200, 200)
rgb(240, 240, 240)

Попробуйте сами »

RGBA Значения цвета

Значение цвета RGBA - это расширение значений цвета RGB с помощью альфа-канала, определяет непрозрачность цвета.

Значения цвета RGBA указаны с:

rgba(red, green, blue, alpha)

Параметр альфа - это число от 0,0 (полностью прозрачный) до 1,0 (совсем не прозрачно):

Экспериментируйте, смешивая значение RGBA ниже:

rgba(255, 99, 71, 0.5)

RED

255

GREEN

99

BLUE

71

ALPHA

0.5

Пример

rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)

Попробуйте сами »