Цвета HTML RGB и RGBA
Значение цвета RGB смешивает источники красного, зелёного и синего света. Значение цвета RGBA расширяет RGB альфа-каналом, задающим непрозрачность (насколько прозрачен цвет).
Значения цвета RGB
Цвет RGB записывается как rgb(красный, зелёный, синий). Каждое значение задаёт интенсивность этого света от 0 до 255, что даёт 256 x 256 x 256 = 16 777 216 возможных цветов.
Например, rgb(255, 0, 0) — красный, потому что красный на максимуме (255), а остальные — 0. rgb(0, 255, 0) — зелёный по той же причине. Установите все три значения в 0 для чёрного и все три в 255 для белого.
Пример
Шесть цветов, заданных значениями RGB.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGB-цвета</title>
</head>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
</body>
</html>
Оттенки серого
Оттенки серого создаются с помощью одинакового значения для всех трёх параметров.
Пример
Шесть оттенков серого, созданных с равными значениями RGB.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Оттенки серого</title>
</head>
<body>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1>
<h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
</body>
</html>
Значения цвета RGBA
RGBA расширяет RGB альфа-каналом, задающим непрозрачность. Записывается как rgba(красный, зелёный, синий, alpha), где alpha — число от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
Пример
Один цвет, показанный на шести уровнях непрозрачности с RGBA.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGBA-цвета</title>
</head>
<body>
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<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>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>
</body>
</html>