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 цвет можно указать, используя шестнадцатеричное значение в форме:
#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?
