Цвета HTML RGB и RGBA

Значение цвета RGB представляет КРАСНЫЙ, ЗЕЛЕНЫЙ и СИНИЙ цвет.

Цветовое значение RGBA является расширением RGB с альфа-каналом (непрозрачностью).

Цветовые значения RGB

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

RGB (red, green, blue) Red, Green, Blue

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

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

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

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

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

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

<div style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</div>
<div style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</div>
<div style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</div>
<div style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</div>
<div style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</div>
<div style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</div>

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

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

<div style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</div>
<div style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</div>
<div style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</div>
<div style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</div>
<div style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</div>
<div style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</div>

Цветовые значения RGBA

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

Значение цвета RGBA указывается с помощью:

RGBA (red, green, blue, alpha) Red, Green, Blue, Alpha

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

<div style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</div>
<div style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</div>
<div style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</div>
<div style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</div>
<div style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</div>
<div style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</div>

☛ Цвета HTML HEX

Цвета HTML ☚