HTML Цвета

Цвета в HTML задаются несколькими способами — через предустановленные названия цветов либо используя значения форматов RGB, HEX, HSL, RGBA и HSLA.

Использование названий цветов

Одним из способов задания цвета является использование встроенных имён цветов. Например, некоторые часто используемые имена цветов включают:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LighhtGray

Всего стандарт HTML поддерживает около 140 официально признанных названий цветов.

Цвет фона элементов

Для изменения цвета фона конкретного HTML-элемента вы можете использовать свойство background-color вместе с названием цвета:

<!-- Пример: синий фон заголовка -->
<h1 style="background-color:DodgerBlue;">Привет мир!</h1>

<!-- Пример: красный фон абзаца -->
<p style="background-color:Tomato;">Текст здесь.</p>

Эти стили применяются к любым элементам HTML.

Цвет текста

Чтобы изменить цвет самого текста, применяется CSS-свойство color. Примеры ниже демонстрируют изменение цвета заголовков и параграфов:

<h1 style="color:Tomato;">Заголовок красного цвета</h1>
<p style="color:DodgerBlue;">Абзац голубого цвета</p>
<p style="color:MediumSeaGreen;">Зелёный текст</p>

Цвет рамки

При помощи свойства border, помимо ширины и стиля рамки вокруг элемента, можно установить её цвет. Для примера рассмотрим разные варианты рамок разных цветов:

<h1 style="border:2px solid Tomato;">Заголовок с красной рамкой</h1>
<h1 style="border:2px solid DodgerBlue;">Голубая рамка</h1>
<h1 style="border:2px solid Violet;">Фиолетовая рамка</h1>

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

Помимо имён цветов, HTML позволяет указывать цвета более точно и гибко с помощью различных числовых представлений. Так, у следующих элементов <div> фоновый цвет задается при помощи RGB, HEX и HSL значений:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

А у следующих элементов <div> фоновый цвет задается при помощи RGBA и HSLA значений, которые также добавляют alpha-канал (в данном случае у цвета 50% прозрачность):

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

Пример:

<div style="background-color: rgb(255, 99, 71);">...</div>
<div style="background-color: #ff6347;">...</div>
<div style="background-color: hsl(9, 100%, 64%);">...</div>

<div style="background-color: rgba(255, 99, 71, 0.5);">...</div>
<div style="background-color: hsla(9, 100%, 64%, 0.5);">...</div>