САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГлаваHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML ОбъектыHTML СимволыHTML КодировкаHTML URL КодированиеHTML XHTML

HTML Формы

HTML ФормыHTML Элементы формыHTML Тип вводаHTML Атрибуты ввода

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список ТеговHTML АтрибутыHTML ГлобальныеHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор КодировокHTML URL КодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКовертер PX в EMКлавишные комбинации

HTML Цвета



Цвета HTML задаются с помощью предопределенных имен цветов или значений RGB, HEX, HSL, RGBA, HSLA.


Color Names

В HTML цвет может быть задан с помощью имени цвета:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Редактор кода »

HTML поддерживает 140 стандартных названий цветов.


Цвет фона

Вы можете установить цвет фона для элементов 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;">Привет мир</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Редактор кода »

Цвет текста

Вы можете установить цвет текста:

Привет мир

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;">Привет мир</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Редактор кода »

Цвет границ

Вы можете установить цвет границ:

Привет мир

Привет мир

Привет мир

Пример

<h1 style="border:2px solid Tomato;">Привет мир</h1>
<h1 style="border:2px solid DodgerBlue;">Привет мир</h1>
<h1 style="border:2px solid Violet;">Привет мир</h1>
Редактор кода »

Значение цвета

В HTML цвета также могут быть заданы с помощью значений RGB, шестнадцатеричных значений, значений HSL, значений RGBA и значений HSLA:

То же, что и название цвета "Tomato":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

То же, что и название цвета "Tomato", но 50% прозрачности:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Пример

<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)

Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета в диапазоне от 0 до 255.

Например, rgb(255, 0, 0) отображается как красный, так как красный имеет самое высокое значение (255), а остальные значения равны 0.

Чтобы отобразить черный цвет, установите все параметры цвета в 0, например: rgb(0, 0, 0).

Чтобы отобразить белый цвет, установите все параметры цвета в 255, например: rgb(255, 255, 255).

Эксперимент путем смешивания значений RGB ниже:

 

RED

255

GREEN

0

BLUE

0

Пример

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

Редактор кода »

Оттенки серого часто определяются с использованием равных значений для всех 3 источников света:

Пример

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).

Пример

#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd

Редактор кода »

Оттенки серого часто определяются с использованием равных значений для всех 3 источников света:

Пример

#000000
#3c3c3c
#787878
#b4b4b4
#f0f0f0
#ffffff

Редактор кода »

Значение HSL

В HTML цвет может быть задан с помощью оттенка, насыщенности и яркости (HSL) в форме:

hsl(оттенок, насыщение, легкость )

Оттенок - это градус на цветовом круге от 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%)

Редактор кода »

Насыщение

Насыщенность можно описать как интенсивность цвета.

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%)

Редактор кода »

Легкость

Легкость цвета можно описать как количество света, которое вы хотите дать цвету, где 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 с alpha-каналом, который определяет непрозрачность для цвета.

Значение цвета HSLA указывается с помощью:

hsla(оттенок, насыщение, легкость, alpha)

Параметр 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)

Редактор кода »