Шестнадцатеричные цветовые коды

Использование цветов

ПрименениеРезультат
<span style=»color:#00ff00″>Цвет слова</span>Цвет слова
<div style=»color:green»>Цвет абзаца</div>
Цвет абзаца
<span style=»background-color:yellow»>Фон слова</span>Фон слова
<div style=»background-color:yellow»>Фон абзаца</div>
Фон абзаца
<td>style=»background-color:#98FB98″ | Фон ячейки</td>Фон ячейки

Насыщение (Saturation)

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

100% — чистый цвет, без оттенков серого

50% — 50% серые, но вы все равно можете видеть цвет.

0% полностью серого цвета, вы больше не можете видеть цвет.

Пример:

Цветовые значения

В HTML цвета также могут быть указаны с использованием значений RGB, HEX, HSL, RGBA и HSLA:

То же, что и название цвета «Томатный» может быть расписан как:

Тот же самый цвет, только с добавлением прозрачнос

Тот же самый цвет, только с добавлением прозрачности в 50% через свойство transparent:

Пример:

Пример:

1
2
3
4
5
6
<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>

HSL значение цветов

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

hsl (оттенок, насыщенность, яркость) — hue, saturation, lightness

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

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

Яркость (lightness) также составляет процент, 0% — черный, 50% — не светлый или темный, 100% белый.

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

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

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

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

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

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

Вебцвета

Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселей других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру, так называемых, веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей которых — красной, зелёной и синей — устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33FF66.

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

RGBaкод

В качестве альтернативы неинтуитивным хекс-кодам разработали систему кодирования, адаптированную для использования в коде веб-страниц и иных программ. Она содержит в основе RGB, а также добавляет к этим трём каналам дополнительный канал, который позволяет задать опасити. Он называется альфа-каналом.

Первые три канала задаются от 0 до 255, а альфа-канал от 0 до 1.

Значение альфы 0.5 соответствует 50% опасити.

Как формируется RGBa-код:

rgba(красный, зелёный, синий, альфа)

Примеры:

rgba(0, 0, 0, 0.5) — чёрный, с опасити на 50%

rgba(255, 255, 255, 1) — непрозрачный белый

Такая система имеет плюсы от обоих подходов: RGBa-код можно скопировать и всё ещё легче запоминать.

Их можно вставлять в CSS-код вместо хексов.

Цвет фона Background Color

Вы без проблем можете задать цвет фона для элемента. Пример ниже:

Код:

Код:

1
2
<h1 style=«background-color:DodgerBlue;»>Hello World</h1>
<pstyle=«background-color:Tomato;»>Lorem ipsum...</p>

Имя цвета

Имя цвета в 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Пурпурный

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

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

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

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

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

Цвет текста

Также можно задавать цвет шрифта для текста:

Код:

Код:

1
2
3
<h1 style=«color:Tomato;»>Hello World</h1>
<pstyle=«color:DodgerBlue;»>Lorem ipsum...</p>
<pstyle=«color:MediumSeaGreen;»>Ut wisi enim...</p>

Цвет рамки Border Color

Не составит труда добавить и рамку, и задать ей цвет как на примере ниже:

Код:

Код:

1
2
3
<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>

Ассоциативный ряд цветов:

 Красный 
Волнение, сила, секс, страсть, скорость, опасность.
 Желтый 
Теплота, свет, приветствие, счастье
 Оранжевый 
Игривость, теплота
 Синий 
Доверие, надежность, принадлежность, прохлада.
 Зеленый 
Природа, новый, крутой, рост, изобилие
 Фиолетовый 
Королевский, духовность, достоинство
 Розовый 
Мягкий, сладкий, питание, защита
 Белый 
Чистый, девственный, юный, умеренный
 Черный 
Искушенность, изящность, соблазнительность, тайна
 Золото 
Престиж, дорогой
 Серебро 
Престиж, холод, научный