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

Ua En Es De Fr

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 ниже:

 

RED

255

GREEN

0

BLUE

0

Пример

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 ниже:

 

RED

255

GREEN

0

BLUE

0

ALPHA

0

Пример

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)

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