Цвета HTML
Цвета HTML можно задавать предопределёнными именами цветов, а также значениями RGB, HEX, HSL, RGBA или HSLA.
Имена цветов
Цвет можно задать с помощью имени цвета. HTML поддерживает 140 стандартных имён цветов.
Пример
Несколько цветов, показанных по имени.
Prompt
Страница, показывающая несколько названий цветов CSS в виде цветных блоков: Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet и LightGray, каждый блок залит своим цветом.
Output: полная HTML-страница
index.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:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Цвет фона
Вы можете задать цвет фона элементов HTML с помощью свойства background-color.
Пример
Заголовок и абзац с цветными фонами.
Prompt
Страница, задающая цвет фона с помощью названий цветов: h1 с фоном DodgerBlue и текстом "Привет, мир" и абзац с фоном Tomato с текстом lorem ipsum.
Output: полная HTML-страница
index.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:DodgerBlue;">Привет, мир</h1>
<p style="background-color:Tomato;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>
Цвет текста
Вы можете задать цвет текста с помощью свойства color.
Пример
Заголовок и абзацы разных цветов текста.
Prompt
Страница, задающая цвет текста с помощью названий цветов: h1 цвета Tomato с текстом "Привет, мир" и два абзаца lorem ipsum, окрашенные в DodgerBlue и MediumSeaGreen.
Output: полная HTML-страница
index.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="color:Tomato;">Привет, мир</h1>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Цвет рамки
Вы можете задать цвет рамок с помощью свойства border.
Пример
Заголовки с рамками разных цветов.
Prompt
Страница, задающая цвет рамки с помощью названий цветов: три заголовка h1, каждый с текстом "Привет, мир" и сплошной рамкой 2px цветов Tomato, DodgerBlue и Violet.
Output: полная HTML-страница
index.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="border:2px solid Tomato;">Привет, мир</h1>
<h1 style="border:2px solid DodgerBlue;">Привет, мир</h1>
<h1 style="border:2px solid Violet;">Привет, мир</h1>
</body>
</html>
Значения цвета
Цвета также можно задавать значениями RGB, HEX, HSL, RGBA и HSLA. RGB, HEX и HSL описывают один и тот же цвет разными способами. RGBA и HSLA добавляют альфа-канал, задающий прозрачность (например, 50% прозрачности).
Пример
Один и тот же цвет, заданный с помощью RGB, HEX, HSL и прозрачных форм RGBA и HSLA.
Prompt
Страница, показывающая один и тот же набор цветов в качестве фона с разными форматами значений: RGB rgb(255, 99, 71), HEX #ff6347, HSL hsl(9, 100%, 64%), плюс версии RGBA и HSLA с прозрачностью 50%.
Output: полная HTML-страница
index.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(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
</body>
</html>
Узнать больше о значениях цвета
Подробнее о RGB, HEX и HSL вы узнаете в следующих главах.