Коды цветов RGB и HEX

Соображения доступности

Некоторые люди с трудом различают цвета. Рекомендация WCAG 2.0 настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определённого сообщения, действия или результата. Дополнительную информацию см. В разделе цвет и цветовой контраст.

Цветовая модель HSL

Цветовая модель HSL позволяет трактовать базовую модель RGB в проекции цилиндрической системы цветовых координат. Специалистами по колористике считается, что HSL позволяет указать цвета более понятным для простого человека способом, нежели типичная модель RGB. Аббревиатура HSL трактуется как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светимость, не путать с яркостью).

Первый коэффициент (Hue) указывает координату цвета в пределах цветового круга (от 0 до 360 градусов)

Второй коэффициент (Saturation) передаёт в процентном виде значение насыщенности (от 0% до 100%)

Последний коэффициент (Lightness) указывает процентное значение светлости (от 0% до 100%)

Примеры передачи цвета в WEB при помощи HSL-модели для CSS-стилей элементов:

  H1 {background: HSL(212, 100%, 50%);} /* синий */  H2 {background: HSL(212, 100%, 75%);} /* голубой */  H3 {background: HSL(360, 0%, 50%);} /* серый */ 

HSL значение

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

HSL (оттенок, насыщенность, легкость)

Hue-это степень на цветном колесе от 0 до 360. 0-красный, 120-зеленый, 240-синий.

Насыщенность представляет собой процентное значение, 0% означает оттенок серого, а 100%-полный цвет.

Легкость также процент, 0% черный, 50% не является ни светлым, ни темным, 100% белый

Насыщенность

Насыщенность может быть охарактеризована как интенсивность цвета.

100% является чистым цветом, не оттенки серого

50% является 50% серый, но вы все еще можете увидеть цвет.

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

Легкость

Легкость цвета можно описать как сколько света вы хотите дать цвет, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темный, ни свет) 100% означает полную легкость (белый).

 

В HTML цвета также могут быть заданы с помощью значений RGB, шестнадцатеричных значений, HSL значений, RGBA значений и HSLA значений.

 

Смешивание цветов:

Оранжевый, жизнерадостный и теплый цвет, без которого невозможно представить пейзажи с закатами. Изображения с огнем или цветочными полями.

Чтобы получить оранжевый цвет смешайте в равных пропорциях желтый и красный. Добавляя разные дополнительные оттенки можно получить большое количество вариантов этого цвета.

Что наглядно демонстрирует следующая таблица смешивания цветов.

Цвет      Название           Цвета для смешивания + примерные пропорции

Оранжевый       Красный + Желтый (1:1)

Светло-оранжевый, персиковый           Красный +Белый + Желтый  (1:2:1)

Терракотовый  Красный + Желтый + Фиолетовый (1:1:0,5)

Темно-оранжевый        Красный + Желтый + Черный (1+1+0,5)

Рыжий  Красный + Желтый + Коричневый (1:1:1)

Смешивание базовых цветов

Итак, приступим. Рассмотрим для начала самый простой способ. Для получения новых цветов используется метод сочетания имеющихся базовых красок. Базовыми красками для смешения являются 3 цвета: желтый, голубой и пурпурный. Такие цвета называются первичными. С их помощью можно получить вторичные цвета. Например:

голубой + желтый = зеленый

голубой + пурпурный = синий

пурпурный + желтый = красный

Если же смешать все 3 первичных цвета в соотношении 1:1:1, то можно получить черный.

Вариации синего цвета

Не менее богатую палитру оттенков дает смешивание с синим красителем, входящим в базовую триаду. Поэтому его присутствие в любом наборе обязательно. Однако даже комплект из 12 красок иногда не отвечает потребностям в истинно синем тоне. Причина – вариации цвета. Классический тон именуется роял, а в продаже его часто заменяют ультрамарином, для которого характерен ярко-темный оттенок с незначительным присутствием фиолетового. Поэтому вопрос как получить синий цвет уже не кажется абсурдным. Выходом из ситуации станет добавление в базовый цвет белого в соотношении 3:1. Таким же путем получают голубой, только белил при комбинировании используют больше.

Интересный цвет синего с умеренно насыщенным результатом получается при соединении темноватого ультрамарина с бирюзой.

Следующие рекомендации помогут сориентироваться, какие цвета надо смешать для получения оттенков синего:

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

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

Получаемый из равных объемов синего и салатового цвет именуется берлинской лазурью. При введении белого насыщенность снижается, но чистота оттенка не уходит.

Синий с красным колеры в пропорции 2:1 дают синий с оттенком фиолетового. Получившийся цвет осветляют введением белого.

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

Затемнить синий получается при его смешивании с черным в пропорции 3:1.

Помощником в экспериментах по смешиванию станет таблица с названиями оттенков синего:

Первичные и вторичные цвета

При этом первичные цвета невозможно получить путем смешивания каких-либо красок. Варьируя соотношения первичных цветов мы можем получить различные оттенки вторичных.

Примите также к сведению, что сочетания вторичных цветов могут давать те же варианты цветов, что и первичные, только темнее.

Классическая триада

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

Многообразие зеленого

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

Далее речь пойдет о вариантах смешивания и результатах опыта:

Соединение синего и желтого с небольшим добавлением коричневого представляет хаки. Зеленый с малым количеством желтого образует оливковый.

Традиционный салатовый – результат смешивания зеленого с белым. Регулировать теплоту поможет добавление желтого или синего цвета.

Внимание! Качество исходных компонентов влияет на насыщенность зеленого цвета. Чем интенсивнее базовые тона, тем ярче будет результат смешивания.

Желто-зеленый эффект получится при комбинировании желтого с синим в соотношении 2:1. Обратная пропорция приведет к сине-зеленому тону.

Темно-зеленый цвет достигается прибавлением черного в половинном объеме.

Теплый светло-зеленый фон образуется из смеси белой, синей и желтой краски в соотношении 2:1:1.

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

Очередная таблица станет помощником при проведении опытов.

Цветовой круг Иттена

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

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

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

Всего здесь представлено 12 цветов, но основными – первичными являются 3 цвета: желтый, красный и синий.

Для того, чтобы сделать получившийся цвет светлее – необходимо добавить немного белой краски. И наоборот, для затемнения используйте немного черной краски.

Аналоговая триада

Аналоговую цветовую схему образуют три соседних цвета в цветовом круге Иттена (всего цветов 12). Используются в мягких, комфортных композициях. Аналоговая схема чаще всего встречается в природе, поэтому выглядит гармонично и приятно. При использовании этой схемы, возможно выбрать один цвет главным, второй – поддерживающим, а третий использовать для акцентирования. Это может быть плавный переход оттенков одной четверти цветового круга.

Комплиментарные (контрастные) цвета

Комплиментарными, или дополнительными, контрастными, являются цвета, расположенные на противоположных сторонах цветового круга Иттена. Сочетание комплиментарных цветов очень живо и энергично, особенно при максимальной насыщенности цвета. Одно из самых ярких таких сочетаний является красный – зеленый.

Прочие комбинации оттенков

Цветовой калейдоскоп не ограничивается комбинированием базовых красителей. Например, зачастую требуется серый. Различные пропорции белил и черного пигмента дадут широкую ахроматическую палитру.

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

Еще одна таблица демонстрирует множество вариантов смешивания:

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