Основы работы с цветом в html, таблица и коды цветов html

К сожалению, вкусовые ощущения на веб-сайте отобразить пока невозможно. Но это можно легко сполна компенсировать при помощи цветовой гаммы. Ведь цвета html могут отобразить любой из миллионов оттенков. Поэтому «цветных карандашей» в его наборе гораздо больше, чем семь.

Цветовая гамма в html

В html цвет может быть задан в нескольких форматах:

1. В виде шестнадцатеричного значения – используются программный код, заданный в шестнадцатеричной системе исчисления. Такие коды цветов в html состоят из трех пар шестнадцатеричных чисел. Каждая пара отвечает за насыщенность оттенка вашим основным цветом:

  • Первая числовая пара – отвечает за красный цвет;
  • Вторая пара – за содержание зеленого цвета;
  • Последняя – за содержание синего цвета.

В начале кода(перед цифрами) ставится решетка. Так обозначается шестнадцатеричный цветовой код. Кроме чисел от 1 до 9 в данной системе исчисления используются буквы латинского алфавита(A, B, C, D, E, F).

Например, программный код белого цвета в html будет иметь вид #FFFFFF:

Основы работы с цветом в html, таблица и коды цветов html 2. Ключевым словом – теперь html поддерживает около 147 ключевых слов. Но не все из данных слов являются уникальными. Некоторые из них ссылаются на один и тот же цветовой оттенок.

Серый цвет обозначается двумя ключевыми словами: grey и gray. Их шестнадцатеричный код( HEX) задается одним и тем же значением #808080.

Пример:

<p style="background-color:#808080">#808080</p></br><p style="background-color:gray">gray</p></br><p style="background-color:grey">grey</p>

Основы работы с цветом в html, таблица и коды цветов html 3. В формате RGB – эта кодировка цветов в html основана на использовании трех значений, задаваемых в диапазоне от 0 до 255. Каждое из них определяет насыщенность оттенка одним из основных цветов:

  • R – красный( red);
  • G – зеленый( green);
  • B – синий( blue).

Номер цвета в формате RGB записывается в таком виде: rgb(0, 210, 100).

Пример:

<p style="font-size:40px; background-color:rgb(100,186,43)">background-color:rgb(100,186,43)</p>

Основы работы с цветом в html, таблица и коды цветов html 4. В формате RGBA – он представляет собой усовершенствованный формат RGB, где четвертым значением задается прозрачность цвета в виде десятичной дроби от 0 до 1.

Пример использования:

<p style="font-size:40px; background-color:rgba(100,86,143,0.2)">background-color:rgba(100,86,143,0.2)</p><p style="font-size:40px; background-color:rgba(100,86,143,0.5)">background-color:rgba(100,86,143,0.5)</p><p style="font-size:40px; background-color:rgba(100,86,143,0.8)">background-color:rgba(100,86,143,0.8)</p><p style="font-size:40px; background-color:rgba(100,86,143,1)">background-color:rgba(100,86,143,1)</p>
Основы работы с цветом в html, таблица и коды цветов html

Таблицы цветов html и генераторы цвета

При таком большом разбросе форматов установки цвета без проблем запутаться. Так что была придумана специальная таблица цветов. В ней к 147 ключевым названиям цветовых оттенков приведены коды соответствия во всех основных стандартах представления цвета. Дополнительно каждое поле ввода снабжено планкой для визуального подбора цвета. Одна из таких таблиц представлена на веб-сайте colorscheme.ru:

Основы работы с цветом в html, таблица и коды цветов html Но даже при помощи такой структуризации соответствия подбор нужного оттенка может оказаться затруднительным. Да и не факт, что в таблице кодов цветов найдется нужный.

Чтобы обойти эту преграду и максимально упростить подбор нужного оттенка, были разработаны интерактивные веб-сервисы. Их пользовательский интерфейс может пару разниться между собой.

На веб-сайте html-color-codes.info генератор цветов имеет в себя такой вид:

Основы работы с цветом в html, таблица и коды цветов html А в рамках сервиса color-picker.appsmaster.co этот инструмент реализован иначе:
Основы работы с цветом в html, таблица и коды цветов html
Насыщенность каждого цвета в генераторе задается при помощи специальных ползунков. Визуально оттенок выводится цветом рамки и прямоугольника с левой стороны. Внизу в 3 полях ввода выводится цветовой код в основных форматах.

Но генератор цветов доступен не только на специализированных веб-сайтах. Подобным инструментом снабжены почти все графические редакторы. К примеру, Photoshop:

Основы работы с цветом в html, таблица и коды цветов html

Техника безопасности при работе с цветом

А было это давно, ещё в эпоху видеокарт, поддерживающих всего 256 цветов. В те далекие времена операционные системы могли без искажений выводить лишь определенное число восьми битных оттенков.

Тогда была выведена великая таблица безопасных цветов. В ней указывалось 216 оттенков, которые могли быть отображены без искажения в любом из браузеров того времени. И по сей день эта «великая рукопись» ещё доступна на некоторых ресурсах:

Основы работы с цветом в html, таблица и коды цветов html В наше время все изменилось. Так что все правила техники безопасности при работе с цветом в html в полном объеме аннулируются. Ведь современное компьютерное железо поддерживает более 16 миллионов разных оттенков. И 216 безопасных цветов канули в лету.Данные данные в полном объеме подтверждаются статистикой. Судя по ней, в 2014 году всего лишь 0.5% посетителей имеют компьютеры, поддерживающие лишь 256 оттенков.

Основы цветовой гармонии

Природным гармоничным чувством вкуса наделены далеко не все из нас. Так что правильный подбор цвета может стать настоящим испытанием. Но, хвала науке, даже цветовую гармонию ей удалось описать в виде нескольких схем. Все они основаны на использовании цветового круга. Схемы гармоничного подбора цветов в html:

  • Схема параллельных цветов – когда оба оттенка в цветовом кругу находятся параллельно;
  • Триадная схема – в основе всех углов треугольника лежит один из цветов;
  • Монохроматическая – когда подбираются пару близких оттенков одного цвета;
  • Аналоговая – более расширенная версия монохроматической схемы. При этом оттенки одного цвета находятся на определенном удалении.

Реализация всех данных схем отлично представлена в рамках сервиса paletton.com. Он может без труда осуществить гармоничный подбор цвета.

Но не следует воспринимать данные схемы как эталоны цветовой гармонии. В этом деле никто не отменял творческого подхода. И может оказаться так, что вы откроете новую схему идеального цвета.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *