HTML Цвета
Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих
HTML цвета. Как добавлять цвета на веб-страницах? Какие бывают цвета в веб-дизайне?
HTML цвета задаются с помощью предварительно определённых названий цветов или значений RGB, HEX, HSL, RGBA, HSLA.
Названия цветов
В HTML можно указать цвет с помощью названия цвета:
HTML поддерживает 140 стандартных названия цвета.
HTML 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>
Попробуйте сами »
HTML 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 wisienim...</p>
Попробуйте сами »
HTML 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% прозрачности:
Пример:
<h2 style="background-color:rgb(255,
99, 71);">...</h2>
<h2 style="background-color:#ff6347;">...</h2>
<h2 style="background-color:hsl(9, 100%, 64%);">...</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.5);">...</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h2>
Попробуйте сами »
Значение RGB
В HTML цвет можно указывать как значение RGB, используя эту формулу:
rgb (red, green, blue)
что означает: красный, зелёний, синий.
Каждый параметр (красный, зелёний и синий) определяет интенсивность цвета от 0 до 255.
Например, rgb (255, 0, 0) отображается в виде красного цвета, потому что красный устанавливается на его самое большое значение (255), а другие устанавливаются на 0.
Для отображения черного цвета все параметры цвета должны быть установлены в 0, например: rgb (0, 0, 0).
Для отображения белого цвета все параметры цвета должны быть установлены на 255, например: rgb (255, 255, 255).
Поэкспериментируйте самостоятельно, смешивая значения RGB.
Пример:
rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)
Попробуйте сами »
Оттенки серого часто определяются с использованием равных значений для всех трёх источников света:
Пример:
rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)
Попробуйте сами »
Значение HEX
В HTML можно указать цвет, используя шестнадцатеричное значение в виде:
#rrggbb
где rr (красный), gg (зелёний) и bb (синий) являются шестнадцятеричными значениями между 00 и ff (такими же, как десятичные 0-255).
Например, #ff0000 отображается в виде красного цвета, поскольку красный устанавливается на его самое большое значение (ff), а другие устанавливаются на самые низкие значения (00).
Оттенки серого часто определяются с использованием равных значений для всех трёх источников света:
Значения HSL
В HTML можно указать цвет с помощью оттенка, насыщенности и лёгкости (осветленности) - (HSL) в виде:
hsl (оттенок, насыщенность, лёгкость)
Оттенок (Hue)
Оттенок - это степень на цветовом колесе от 0 до 360. 0 - красный, 120 - зелёний, а 240 - синий.
Насыщенность - это процентное значение, 0% означает оттенок серого, а 100% - полный цвет.
Лёгкость также составляет процент, 0% - чёрный, 50% - на половину светлый или тёмный, 100% - белый.
Пример:
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Попробуйте сами »
Насыщенность (Saturation)
Насыщенность может быть описана как интенсивность цвета.
100% - это чистый цвет, нет серых оттенков.
50% - это 50% серого цвета, но вы всё ещё можете видеть цвет.
0% полностью серый, вы не можете больше видеть цвет.
Пример:
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
Попробуйте сами »
Лёгкость / Осветлённость / Яркость (Lightness)
Лёгкость цвета можно охарактеризовать как свет, который вы хотите придать цвету, где 0% означает отсутствие света (черный), 50% означает 50% света (ни тёмный, ни светлый), 100% означает полную лёгкость (белый цвет).
Пример:
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
Попробуйте сами »
Оттенки серого часто определяются установкой оттенка и насыщенности в 0, а также регулируют яркость от 0% до 100%, чтобы получить более тёмные / более светлые оттенки:
Пример:
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
Попробуйте сами »
Значения RGBA
Значения цветов RGBA является расширением значений цветов RGB с альфа-каналом, который определяет непрозрачность цвета.
Значение цвета RGBA указано с помощью:
rgba (red - красый, green - зелёный, blue - синий, alpha - альфа)
Параметр "alpha" - это число между 0.0 (полностью прозрачным) и 1.0 (совсем не прозрачным):
Пример:
rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)
Попробуйте сами »
Значение HSLA
Значение цветов HSLA является расширением значений цветов HSL с помощью альфа-канала, который определяет непрозрачность цвета.
Значение цвета HSLA указано с помощью:
hsla (hue - оттенок, saturation - насыщенность, lightness - лёгкость, alpha - альфа)
Параметр "альфа" - это число между 0.0 (полностью прозрачным) и 1.0 (совсем не прозрачным):
Пример:
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
Попробуйте сами »
Таким образом, вы можете использовать разные способы записи цвета в HTML-разметке. Но наиболее часто используется написание цвета в шестнадцатеричном значении HEX - как в наиболее универсальном и компактном стиле.
Существует множество разных программ и плагинов к браузерам, с помощью которых можно подобрать необходимый вам цвет в любом из цветовых значений: по названию, HEX, RGB, HSL. Например, онлайн сервисы Color Picker на сайте https://www.w3schools.com/, https://colorscheme.ru/ и др., программы ColorMania, Microsearch Color Picker, Pixie и др., расширения ColorZilla, ColorPicker в Chrome и др.
Справочник HTML тегов
Примечание: Для получения полного списка всех доступных HTML тегов, посетите Справочник HTML тегов.