Цвета в HTML
Способы указания цвета в языке 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
При равномерном смешивании красного и зеленого вы не получите желтый (если говорить о красках), скорее получится коричневый. А вот если направить два прожектора с соответствующими фильтрами, то смешанный свет будет желтым.
да всё верно, в жизни по другому