ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

HTML5 Учебник

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

HTML Формы

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

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Семантические элементы HTML5 Переход с HTML4 HTML5 Гид по стилю

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Плагины HTML YouTube

HTML API

HTML Геолокация HTML Drag/Drop HTML Web хранилище HTML Web работники HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Резюме HTML Доступность

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

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

HTML5. Уроки для начинающих

HTML Цвета



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


Названия цветов

В HTML цвет можно указать с помощью названия цвета:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Попробуйте сами »

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


Background Color - Цвет фона

Вы можете установить цвет фона для элементов HTML:

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="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":

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)

Каждый параметр (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)

Попробуйте сами »

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

Пример

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 (red), gg (green) и bb (blue) шестнадцатеричные значения от 00 до ff (такие же, как десятичные 0-255).

Например, #ff0000 отображается как красный, потому что красный установлен на самое высокое значение (ff), а остальные установлены на самое низкое значение (00).

Пример

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

Попробуйте сами »

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

Пример

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

Попробуйте сами »

HSL значение

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

hsl(hue, saturation, lightness)

Оттенок (hue) - это градус цветового круга от 0 до 360. 0 - красный, 120 - зеленый, 240 - синий.

Насыщенность (saturation) - это процентное значение, 0% означает оттенок серого, а 100% - это полный цвет.

Яркость (lightness) также в процентах, 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)

Альфа-параметр - это число от 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)

Попробуйте сами »