Цвета в HTML

Цвет в HTML можно указывать несколькими способами. Например, в соответствии с английским названием цвета, с помощью модели RGB или в шестнадцатеричном формате. Все варианты написания не чувствительны к регистру.

Название цвета

В HTML доступно 140 названий цветов, но применяют их редко. И цветов мало, и есть некоторые нестыковки. Например, цвета fuchsia и magenta — это один и тот же цвет. А тёмно-серый цвет (darkgray) оказался неожиданно светлее серого (gray).

В таблице приводятся только основные цвета:

Пример

color: lime

Код цвета в модели RGB

RGB — это сокращение от Red, Green и Blue (красный, зелёный, синий). Каждый из трёх цветов — это отдельный канал RGB и его значение меняется в диапазоне от 0 до 255. Смешивая эти каналы можно получить 16 миллионов различных цветов.

Для указания цвета в HTML и CSS используют функцию rgb(), к примеру: rgb(255 0 0) даёт красный цвет.

Чтобы добавить прозрачность, после трёх значений каналов, через слэш указывают значение от 0 до 1 (от прозрачности к непрозрачности), или в процентах.

Пример

color: rgb(0 255 0)   <-- цвет лайм -->

Если добавить прозрачность:

color: rgb(0 255 0 / 0.5)   <-- 50% прозрачности -->
color: rgb(0% 100% 0% / 50%)   <-- 50% прозрачности -->

color: rgba(0%, 100%, 0%, 0.5)   <-- устарело, но ещё действует -->

Шестнадцатеричный код цвета в RGB

Шестнадцатеричный код (HEX-код) в цветовой модели RGB начинается с символа решётки #, и указывается в формате #RRGGBB или в сокращённом виде — #RGB, если символы у каждой группы одинаковые. Например: #00ff00 равнозначно #0f0. Это наиболее удобный способ указания цвета, если не задавать прозрачность.

Если нужно указать прозрачность, то формат будет #RRGGBBAA или #RGBA. Например: #00ff00cc, что будет равнозначно #0f0c.

В шестнадцатеричной системе счисления в качестве цифр используются цифры от 0 до 9 и латинские буквы A, B, C, D, E, F, имеющие значения от 10 до 15 соответственно. Всего с нулём — 16. Числа больше 15 получают объединением двух чисел в одно. К примеру: 255 в десятичной системе — это FF в шестнадцатеричной.

Пример

Равнозначные значения:

color: #0f0   <-- #rgb -->
color: #00ff00   <-- #rrggbb -->

Последние 2 цифры в 8-значном коде добавляют альфа-канал, где 00 — полностью прозрачный цвет, а ff — полностью непрозрачный:

color: #00ff0080 <-- 80 — это 128 в десятичной системе, т.е. 50% прозрачности -->