HTML Цвета
В этой теме:
HTML цвета задаются с использованием предварительно определённых названий цветов или значений RGB, HEX, HSL, RGBA, HSLA.
Названия цветов
В HTML цвет можно указать с помощью названия цвета:
HTML поддерживает 140 стандартных названий цветов.
Background Color - Цвет фона
Вы можете установить цвет фона для HTML элементов:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Пример
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Попробуйте сами »
Text Color - Цвет текста
Вы можете установить цвет текста:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Пример
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Попробуйте сами »
Border Color - Цвет границы
Вы можете установить цвет границ:
Hello World
Hello World
Hello World
Пример
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Попробуйте сами »
Значения цвета
В HTML цвета также могут быть указаны с использованием значений цветов RGB, HEX, HSL, RGBA и HSLA:
То же, что и название цвета "Tomato":
То же, что и название цвета "Tomato", но на 50% прозрачнее:
Пример
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9,
100%, 64%, 0.5);">...</h1>
Попробуйте сами »
RGB Значения
В HTML цвет можно указать как RGB значение, используя эту формулу:
rgb(red, green, blue)
Каждый параметр (red, green и blue) определяет интенсивность цвета от 0 до 255.
Например, rgb(255, 0, 0) отображается как красный, потому что красный установлен на наибольшее значение (255), а другие установлены на 0.
Чтобы отобразить черный цвет, установите все параметры цветов на 0, как здесь: rgb(0, 0, 0).
Для отображения белого установите все параметры цвета на 255, как здесь: rgb(255, 255, 255).
Экспериментируйте, смешивая значения RGB ниже:
RED
GREEN
BLUE
Пример
Попробуйте сами »
Оттенки серого часто определяются с использованием равных значений для всех трёх источников света:
Пример
Попробуйте сами »
HEX значение
В HTML цвет можно указать, используя шестнадцатеричное (HEX) значение в форме:
#rrggbb
где rr (red), gg (green) и bb (blue) шестнадцатеричное значение от 00 до ff (такие же, как десятичные 0-255).
Например, #ff0000 отображается как красный, потому что красный установлен на наибольшее значение (ff), а другие установлены на наименьшее значение (00).
Оттенки серого часто определяются с использованием равных значений для всех трех источников света:
HSL значение
В HTML цвет можно указать с помощью оттенка (hue), насыщенности (saturation) и яркости (lightness) - HSL значение в форме:
hsl(hue, saturation, lightness)
Оттенок (hue) – это градус цветного круга от 0 до 360. 0 – красный, 120 – зеленый, 240 – синий.
Насыщенность (saturation) – это процентное значение, 0% означает оттенок серого, а 100% – это полный цвет.
Яркость (lightness) также в процентах, 0% – черный, 50% – ни светлый, ни темный, 100% – белый.
Пример
Попробуйте сами »
Насыщенность
Насыщенность можно описать как интенсивность цвета.
100% чистый цвет, без оттенков серого
50% – это 50% серый, но вы всё равно можете видеть цвет.
0% полностью серый, вы больше не видите цвет.
Пример
Попробуйте сами »
Яркость
Яркость цвета можно описать как количество света, которое вы хотите дать цвету, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темно, ни светло), 100% означает полную яркость (белый цвет).
Пример
Попробуйте сами »
Оттенки серого часто определяются путем установки оттенка и насыщенности на 0 и регулировки яркости от 0% до 100%, чтобы получить более темные/светлые оттенки:
Пример
Попробуйте сами »
RGBA значение
Цветовые значения RGBA является расширением цветовых значений RGB с альфа-каналом, определяющим непрозрачность цвета.
Значение цвета RGBA указывается с помощью:
rgba(red, green, blue, alpha)
Альфа-параметр - это число от 0,0 (полностью прозрачное) до 1,0 (совсем не прозрачное):
Пример
Попробуйте сами »
HSLA значение
Цветовые значения HSLA являются расширением значений цвета HSL с альфа-каналом, определяющим непрозрачность цвета.
Значение цвета HSLA задается с помощью:
hsla(hue, saturation, lightness, alpha)
Альфа-параметр - это число от 0,0 (полностью прозрачное) до 1,0 (совсем не прозрачное):
Пример
Попробуйте сами »
Вопросы для самоконтроля
- Как задать цвета на веб-страницах?
- Какие цветовые названия используются на веб-страницах?
- Сколько стандартных названий цветов поддерживается в HTML?
- С помощью какого свойства можно установить цвет фона HTML-страницы?
- С помощью какого свойства можно установить цвет текста HTML-страницы?
- С помощью какого свойства можно установить цвет предела HTML-элемента?
- С помощью каких цветовых значений можно установить цвета на веб-странице?
- Как расшифровывается RGB-значение цвета?
- Что определяет каждый параметр в RGB-значении цвета?
- Какое минимальное и максимальное значение каждого параметра в RGB-цвете?
- Каковы должны быть значения каждого из источников света при установке оттенков серого в RGB-цвете?
- В какой форме указывается цвет с помощью шестнадцатеричного (HEX) значения?
- Какое минимальное и максимальное значение каждого параметра в HEX-цвете?
- Каковы должны быть значения каждого из источников света при установке оттенков серого в HEX-цвете?
- Как расшифровывается цветовое значение HSL?
- Какое минимальное и максимальное значение каждого параметра в цвете HSL?
- Каковы должны быть значения каждого из источников света при установке оттенков серого в HSL-цвете?
- Для чего нужен альфа-канал при установке значений цвета RGBA и HSLA?
