Цвета в HTML

Способы указания цвета в языке HTML

В языке HTML, существует два способа указать цвет:

1. С помощью имени цвета,
2. С помощью системы RGB, где цвета заданы в шестнадцатеричном формате.

Имя цвета

Имя цвета в HTML указывается английскими словами, например red или green. Имя цвета выступает в качестве значения атрибута HTML-тега. Имён цветов очень много, в этой статье мы рассмотрим лишь основные из них.

Обычно для задания цвета, в языке HTML используют два атрибута:

1. Атрибут color="имя_цвета" — цвет текста,
2. Атрибут bgcolor="имя_цвета" — цвет фона.

Примеры использования цветовых атрибутов:
color="red" — назначаем тексту красный цвет,
bgcolor="green" — назначаем фону зелёный цвет.

Таблица основных имён цветов HTML:

Имя цвета	Его вид	Перевод
white		Белый
ivory		Слоновая кость
silver		Серебряный
gray		Серый
black		Чёрный
maroon		Тёмно-бордовый
red		Красный
orange		Оранжевый
gold		Золотой
yellow		Жёлтый
olive		Оливковый
lime		Лайм
green		Зелёный
aqua		Морская волна
blue		Синий
navy		Нави
teal		Бирюзовый
fuchsia		Фуксиновый
purple		Пурпурный

Шестнадцатеричная система счисления

В повседневной жизни мы пользуемся десятичной системой счисления от 0 до 9. Программисты и дизайнеры часто используют шестнадцатеричную систему счисления от 0 до 15, где:

10 = A
11 = B
12 = C
13 = D
14 = E
15 = F

Практически каждый цвет и оттенок видимый нашему зрению можно записать в шестнадцатеричной системе, например красный цвет red (красный) в шестнадцатеричной системе будет равен ff0000

color="red" — красный цвет, по имени,
color="#ff0000" — красный цвет, в шестнадцатеричной системе счисления.

В языке HTML, перед шестнадцатеричным числом, в значении атрибута ставят знак решётки #

RGB

Перед тем как начать указывать цвета в HTML с помощью шестнадцатеричной системы счисления, вам для начала нужно узнать о таком понятии как RGB

RGB — это сокращение от слов Red Green Blue (Красный Зелёный Синий).

Цвет в HTML, записанный в шестнадцатеричной системе состоит из трех блоков чисел 00 00 00, где каждый блок отвечает за один из цветов RGB, первый блок за красный цвет, второй за зелёный цвет, третий за синий цвет. Числа могут варьироваться от 00 до ff.

Где, ff — это 255 в десятичной системе счисления.

Схема RGB:
Red — от 00 до ff
Green — от 00 до ff
Blue — от 00 до ff

В итоге получаем число из шести цифр 000000, где первые два числа отвечают за красный цвет, вторые два числа отвечают за зелёный цвет, третьи два числа отвечают за синий цвет.

Если мы хотим получить красный цвет, то пишем ff0000, зелёный цвет 00ff00, синий цвет 0000ff. Например, если хотим получить тёмно красный цвет, то нужно уменьшить первый блок чисел и вместо ff (который равен в десятичной системе счисления 255), записать например 96 (который равен в десятичной системе счисления 150).

Приведём для наглядности, примеры цветов и их шестнадцатеричный код:

Цвет	Его вид	Шестнадцатеричный код
Красный		#ff0000
Тёмно-красный		#960000
Зелёный		#00ff00
Тёмно-зелёный		#009600
Синий		#0000ff
Тёмно-синий		#000096
Белый		#ffffff
Чёрный		#000000

Смешиваем цвета в HTML

Если вы в школе не пропускали занятия по рисованию, то наверняка помните, что при равномерном смешивании красного и зеленого цвета можно получить жёлтый,
при добавлении к красному цвету немного зелёного можно получить оранжевый и т.д.

Цвета, заданные с помощью шестнадцатеричной системы счисления и RGB, тоже можно смешивать:

Цвет	Его вид	Шестнадцатеричный код	Что смешали
Желтый		#ffff00	Красный и зелёный
Оранжевые оттенки		#ff8800	Красный и немного зелёного
Фиолетовый		#ff00ff	Красный и синий
Фиолетовые оттенки		#8800ff	Немного красного и синий
Голубой		#00aaff	Синий и немного зелёного
Голубые оттенки		#0055ff	Немного зелёного и синий
Серые оттенки		#aaaaaa	Равномерно смешать все три цвета

Экспериментируя с шестнадцатеричной системой счисления и RGB, вы со временем освоитесь и сами сможете подбирать себе цвет, какой только захотите.

Программы подбора цвета

(На данный момент, сервис от Яндекса отключили, обещают скоро включить.)
В мире существуют множество программ, которые помогут вам подобрать цвет. Например, если в Яндексе набрать слово RGB, то под поиском появится виджет, в котором можно подобрать для себя цвет.

Читать далее: Единицы измерения в HTML

• Category: Разное