Цветовые коды HTML – значения HEX, RGB, RGBA, HSL и HSLA

Цветовые коды HTML определяют цвета, используемые на веб-страницах. Самые распространенные форматы – имена цветов, HEX, RGB, RGBA, HSL и HSLA. Каждый из них удобен для разных задач HTML- и CSS-стилизации.

Цвета HTML

Цвета HTML – это цвета, используемые для отображения веб-страниц. Они тесно связаны со способами описания и задания цвета с помощью соответствующих цветовых кодов. Например, цвет в HTML можно указать распространенным английским именем, HEX-значением, RGB-тройкой, а также значениями HSL, RGBA или HSLA.

Цвета влияют на визуальное восприятие веб-контента, читаемость интерфейса и эмоциональное впечатление от страницы. В HTML и XHTML цвета применяют к тексту, фону, границам фреймов, таблицам и отдельным ячейкам таблиц.

Имена цветов HTML

Имена цветов HTML знакомы почти всем, кто занимается веб-разработкой. Спецификация CSS Color определяет именованные цвета, которые можно использовать везде, где CSS принимает значение <color>. Исходный базовый набор включал 16 VGA-имен цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white и yellow. В современных CSS-именах также есть orange, поэтому многие базовые таблицы цветов показывают 17 имен.

На рисунке показаны 17 базовых цветов с кодами HEX и RGB:

Цветовые коды HTML

Цветовые коды HTML – это способ представить цвет в формате, который компьютер может прочитать и отобразить. Такие коды используют в HTML и CSS для создания цветовых схем веб-дизайна. Они особенно важны для веб-дизайнеров, фронтенд-разработчиков, программистов и цифровых иллюстраторов.

В таблице ниже показано, когда удобнее использовать каждый распространенный формат цвета в HTML и CSS:

Формат цвета	Пример	Когда использовать
Имя цвета	teal	Когда нужно читаемое значение для распространенного цвета, а точность дизайн-системы не критична.
HEX	#008080	Когда нужен компактный и широко поддерживаемый цвет для CSS, дизайн-токенов или значений, скопированных из палитры.
RGB	rgb(0, 128, 128)	Когда нужно напрямую управлять красным, зеленым и синим каналами или совпасть со значениями из графических инструментов.
RGBA	rgba(0, 128, 128, 0.5)	Когда нужен такой же поканальный контроль, как в RGB, но с прозрачностью.
HSL	hsl(180, 100%, 25%)	Когда нужно интуитивно настраивать оттенок, насыщенность или светлоту, а не отдельные RGB-каналы.
HSLA	hsla(180, 100%, 25%, 0.5)	Когда нужны настройки HSL вместе с прозрачностью.

Цвета RGB

RGB (Red, Green, Blue) – это аддитивная цветовая модель, которая описывает, как любой цвет кодируется с помощью трех базовых компонентов. На ней основано отображение цвета светом на экранах телевизоров, компьютеров, сканеров изображений, видеопроекторов, цифровых камер и мобильных устройств.

Значения R, G и B задают интенсивность красного, зеленого и синего компонентов в диапазоне от 0 до 255. Ярко-синий цвет можно записать как rgb(0, 0, 255), красный – как rgb(255, 0, 0), ярко-зеленый – как rgb(0, 255, 0), черный – как rgb(0, 0, 0), а белый – как rgb(255, 255, 255). RGB широко используется в фотографии, телевидении и компьютерной графике. Поскольку у каждого компонента 256 возможных значений, RGB позволяет представить 256^3 = 16 777 216 цветов. Смешивание трех компонентов дает RGB-значение, например rgb(125, 50, 210).

Один из типичных способов описывать цвет – визуальные системы, например диаграммы или графические модели, где у каждого цвета есть собственный набор координат. Цветовую систему RGB можно представить как куб с 256 дискретными точками на каждой стороне:

Исторически модель RGB стала основной для веб-разработки, потому что она напрямую связана с работой экранов, использующих красные, зеленые и синие пиксели для отображения цветов.

Цвета HEX

HEX-коды – один из самых распространенных способов записи цвета. Это трехбайтовые шестнадцатеричные числа из шести символов. Шестизначный номер цвета состоит из трех групп по две цифры, которые задают количество красного, зеленого и синего в аддитивном цвете. Каждая двухзначная шестнадцатеричная пара может принимать значение от 00 до FF, что дает более 16 миллионов возможных цветов.

Код записывается в формате #RRGGBB, где каждая пара символов задает диапазон одного из трех компонентов – red, green и blue. Например, #00FF00 отображается зеленым, потому что зеленый компонент установлен в максимальное значение FF, а красный и синий – в 00.

Цвета RGBA

RGBA (Red, Green, Blue, Alpha) расширяет RGB-значения альфа-каналом, который определяет непрозрачность цвета. Альфа-параметр задается числом от 0.0, что означает «полностью прозрачный», до 1.0, что означает «полностью непрозрачный». Например, rgba(255, 0, 0, 1) отображается как чистый красный, а rgba(255, 0, 0, 0.5) – как красный с непрозрачностью 50%.

На рисунке показаны значения RGBA для имени цвета YellowGreen с разной прозрачностью:

В записи RGBA, в отличие от RGB, прозрачность задается отдельным alpha-значением, а не шестнадцатеричной парой внутри самого выражения rgba().

Цвета HSL

Многие считают цветовую модель RGB неинтуитивной и ориентированной на устройство. HSL (Hue, Saturation, Lightness) была разработана исследователями компьютерной графики в 1970-х годах, чтобы лучше соответствовать тому, как человеческое зрение воспринимает характеристики цвета. В модели HSL цвета каждого оттенка расположены в радиальном срезе вокруг центральной оси нейтральных цветов, от черного внизу до белого вверху. Такое представление переупорядочивает цвета и делает их понятнее, чем RGB-запись. HSL часто используют в инструментах выбора цвета, компьютерной графике и анализе изображений.

На рисунке показана трехмерная графическая интерпретация модели HSL (a), изображение взято с commons.wikimedia.org/wiki/. Рисунок (b) показывает двумерную интерпретацию модели HSL для значения светлоты 50%.

HSL представляет модель RGB в цилиндрических координатах. Hue задает базовый цвет – фактически точку на цветовом круге от 0 до 360 градусов. Так, 0 соответствует красному, 120 – зеленому, а 240 – синему. Saturation описывает интенсивность или чистоту цвета и определяет, насколько насыщенным он будет. 0% дает серый, а 100% – полностью насыщенный цвет. Lightness показывает количество света в цвете и определяет, насколько сильно цвет смещен к черному или белому. Например, 50% обычно воспринимается как «нормальная» светлота без примеси черного или белого, 0% – полностью черный, а 100% – полностью белый.

Примеры цветов HSL

В таблице ниже представлен один оттенок. Из цветового круга выбран красный цвет, поэтому Hue = 0. Ось X показывает насыщенность – 100%, 75%, 50%, 25% и 0%. Ось Y показывает светлоту, где 50% считается «нормальным» значением.

Цвета HSLA

HSLA (Hue, Saturation, Lightness, Alpha) расширяет HSL-значения альфа-каналом, который определяет непрозрачность цвета. Значение HSLA указывается через оттенок, насыщенность, светлоту и alpha, где alpha задает непрозрачность. Альфа-параметр принимает число от 0.0, что означает «полностью прозрачный», до 1.0, что означает «полностью непрозрачный». Например, hsla(0, 100%, 50%, 1) отображается как чистый красный, а hsla(0, 100%, 50%, 0.5) – как красный с непрозрачностью 50%:

А что насчет других форматов цвета CSS?

HTML-документы обычно применяют цвета через CSS, а веб-контент отображается на экранах, которые используют модель RGB (Red, Green, Blue). Поэтому RGB, RGBA, HEX, HSL и HSLA остаются самыми распространенными форматами для повседневной работы с цветом в HTML и CSS.

Другие цветовые модели тоже существуют, но не всегда одинаково полезны для базовой веб-стилизации:

1. Цветовая модель CMYK в основном применяется в печати и описывает, как чернила смешиваются на бумаге. Она не является естественной моделью для цифровых экранов, где цвета отображаются светом.
2. HSV удобен в некоторых дизайнерских инструментах, но авторы CSS чаще используют HSL или современные цветовые функции.
3. HWB, Lab, LCH, Oklab, OkLCh и цветовые пространства на основе XYZ применяются для более сложной работы с цветом, широких цветовых охватов, перцепционных корректировок и задач цветоведения.
4. Для большинства страниц имена цветов, HEX, RGB, RGBA, HSL и HSLA проще, понятнее и достаточны для стилизации текста, фона, границ и элементов интерфейса.

CSS Color Module Level 4 определяет новые цветовые функции, включая lab(), lch(), oklab(), oklch() и color(). Поддержка в браузерах и средах рендеринга может отличаться, поэтому используйте расширенные форматы тогда, когда целевая платформа их поддерживает и дополнительная точность цвета оправдывает усложнение.

Краткое резюме по цветовым кодам HTML

Цвета HTML можно задавать именем, значениями RGB, RGBA, HEX, HSL или HSLA и применять к фону или тексту в HTML-документах.

На рисунке ниже показано, как задать цвет teal по имени, значениям RGB, RGBA, HEX, HSL и HSLA:

RGB и его распространенные производные остаются практической основой цвета в вебе. Используйте имена цветов, когда читаемость важнее точности, HEX – для компактной CSS-записи, RGB или RGBA – когда нужен поканальный контроль или прозрачность, а HSL или HSLA – когда удобнее настраивать оттенок, насыщенность и светлоту.

FAQ

Какой формат цветового кода HTML самый распространенный?

HEX – один из самых распространенных форматов, потому что он компактен и поддерживается в CSS практически везде. RGB и HSL также часто применяются, когда разработчику нужны значения каналов или более удобная настройка цвета.

Когда использовать RGBA или HSLA?

Используйте RGBA или HSLA, когда цвету нужна прозрачность. Значение alpha управляет непрозрачностью, где 0 означает полностью прозрачный цвет, а 1 – полностью непрозрачный.

Имена цветов HTML лучше, чем HEX-коды?

Имена цветов удобны для чтения, но их набор ограничен и не всегда дает нужную точность. HEX, RGB и HSL предоставляют разработчику больше контроля и лучше подходят для стабильных дизайн-систем.

Связанные статьи

• Имена цветов HTML – узнайте, как работают именованные цвета и когда лучше выбрать числовое значение.
• Как изменить цвет текста в HTML – используйте Aspose.HTML for .NET, чтобы управлять цветом текста в HTML-документе.
• Как изменить цвет фона в HTML – задавайте и обновляйте цвет фона документа или отдельных элементов.
• Как изменить цвет границы в HTML – обновляйте цвета границ в HTML-файлах с помощью C#.
• Color Wheel Picker – создавайте HEX-палитры и экспериментируйте с цветовыми гармониями онлайн.