Дополнительные цвета

Полный текст урока

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


Что такое основные цвета

Жёлтый, красный и синий называются основными цветами.

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

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

Что такое цветовой круг

Цветовой круг это такая вот градация от жёлтого к жёлтому через все цвета радуги. Другими словами, это способ упорядочить все цвета.

Почему кому-то в голову пришло так их расположить? А вот почему: если взять основной жёлтый цвет, и начать кисточкой в него немного добавлять красного, то жёлтый будет всё более и более оранжевым, станет медно-оранжевым, а потом и вовсе пламенно-красным. Если в получившийся красный начать добавлять синий, то мы намешаем много разных фиолетовых цветов. А если в синие постепенно прибавлять жёлтый, то сначала получится цвет морской волны, а потом все более и более откровенный зелёный. И в итоге мы вернемся к жёлтому. Наверняка сначала кто-то намешал такой цветовой путь в виде полоски, а потом ему пришло в голову, что можно соединить её концы.

Что такое дополнительные цвета

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

Конечно это не так просто сделать, чтобы получить идеально серый серый надо соблюсти пропорции, но это можно сделать.

Например, жёлтый плюс фиолетовый получается серый. А жёлтый плюс синий – зелёный. А красный плюс зелёный – серый цвет.

Оптические иллюзии: яркий цвет как фон

Наш глаз работает так, что когда мы видим предмет очень яркого цвета, например фиолетовый, наш глаз словно думает: “Вау, настолько фиолетовый предмет, что все остальные предметы антифиолетовые”. Поэтому если мы видим яркий фиолетовый окружающий пятнышко серого цвета, то этот серый нам кажется не серым, а слегка антифиолетовым. А какой цвет антифиолетовый? Это жёлтый, противоположный цвет на цветовом круге. И со всеми другими цветами окружающими этот яркий фиолетовый также происходит, в них добавляется чуток жёлтого.

Оптические иллюзии: вибрация цвета

А если мы возьмём два дополнительных цвета и положим их рядом, то наш глаз словно начнёт немного сходить с ума и метаться. “Ого-го-го, тут такой яркий красный и все цвета рядом с ним антикрасные, а тут такой яркий зеленый и рядом с ним все цвета антизелёные, вау-вау-вау!”

И тогда эти два дополнительных цвета как бы усиливают друг друга, и выглядят особенно ярко. Этот эффект и называется вибрацией цвета.

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

Создание и адаптация комбинаций цвета

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

Шаги

Смешивание акриловых или масляных красок

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

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

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

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

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

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

Смешивание акварели

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

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

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

Повторяйте процедуру добавления в воду красной краски, пока не добъетесь нужной вам концентрации.

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

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

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

Применение пищевых красителей

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

Белый

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

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


Примеры:

Белые фоны очень популярны в минималистичных дизайнах: белый фон отлично контрастирует с черной типографикой.

В этом примере белый используется как акцентный цвет и делает сайт более легким.

Белый в сочетании с серым придает дизайну мягкости и чистоты.

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

Цветовые комбинации за гранью цветового круга

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

Так, комбинация оранжевого + зеленого — цветы, цитрусовые, закатные тона, зелень. Синий (голубой) + зеленый – небо, луга, леса. Желтый + синий (голубой) – солнце, небо. Фуксия + зеленый — цветы, зелень. Фуксия (пурпур) + красный – закатные тона. Розовый + зеленый – цветы, зелень. Холодный + теплый розовый – закатная гамма. Пурпур + синий (голубой) – закат, море. Желтый + зеленый – цветы, цитрусовые, зелень.

Это сочетания ярких оттенков, которые оставили яркое впечатление в сознании человека.

Применение фокуса к цвету текста

Параметр lightness в HSL-декларации ведет себя точно так же, превращая все отрицательные значения в 0 (черный цвет, независимо от значений hue и saturation), а все значения больше 100%, соответственно, в 100% (всегда белый).

Таким образом, можно объявить цвет, вычесть сколько нужно из параметра светлоты и умножить на 100%, чтобы получить итоговое значение: либо меньше ноля, либо больше 100%. Поскольку для белого цвета нужны отрицательные значения, а для черного положительные, полученный результат нужно инвертировать, умножив на -1.

CSS

:root { —light: 80; /* Пороговое значение, отделяющее «светлые» цвета, от «темных». Рекомендуется 50 — 70 */ —threshold: 60; }

.btn { /* Если значение lightness меньше порогового, оно превратится в белый, если больше — в черный */ —switch: calc((var(—light) — var(—threshold)) * -100%); color: hsl(0, 0%, var(—switch)); }

1 2 3 4 5 6 7 8 9 10 11 12 13 14

:root {

—light80;

/* Пороговое значение, отделяющее «светлые» цвета, от «темных». Рекомендуется 50 — 70 */

—threshold60;

}  

.btn {

/* Если значение lightness меньше порогового, оно превратится в белый,

     если больше — в черный */

—switchcalc((var(—light)-var(—threshold))*-100%);

colorhsl(0,0%,var(—switch));

}  

Давайте пройдемся по этому коду.

  • Мы начинаем со значения светлоты 80 и устанавливаем порог на 60.
  • Вычитаем одно из другого и получаем 20.
  • Умножаем на -100%. Итоговый результат равен -2000%, что преобразуется в 0%.

Наш фон светлее порогового значения, поэтому мы считаем его «светлым» и используем черный цвет для текста.

Если бы переменная имела значение 20, то в результате вычислений мы получили бы 4000%, то есть 100%. Для темного фона — белый текст.

Цветовой охват и цветовые пространства


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

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

Проще и удобнее всего сравнить цветовой охват устройства с набором карандашей: у одних устройств это большие богатые наборы со множеством оттенков, у других — скромные наборы, состоящие из базовых цветов. Если в наборе нет нужного оттенка, он заменяется на тот, который доступен, изменяя итоговое изображение. Так же и с цветовым охватом: если устройство не способно воспроизвести определенный цвет, то он заменяется на ближайший доступный. Отсюда и искажения.

Разные цветовые охваты как разные наборы карандашей

Для того, чтобы прояснить работу с цветом, были придуманы абстрактные, не привязанные к конкретному устройству, цветовые пространства. Существует три наиболее распространенных цветовых пространства: sRGB, Adobe RGB 1998 и ProPhoto RGB.

sRGB является самым часто используемым пространством. Оно довольно узкое (покрывает всего 35% видимых цветов), благодаря чему практически любой монитор может воспроизвести все его цвета без искажений. Именно поэтому при создании цифрового дизайна рекомендуется использовать именно sRGB пространство, так как конечный интерфейс будет отображаться корректно у максимального количества пользователей. Однако, с другой стороны, узость sRGB пространства приводит к тому, что его не достаточно для корректной цветопередачи при печати.

Пространство Adobe RGB 1998 было разработано компанией Adobe для того, чтобы покрыть большее количество цветов, достижимых на принтере CMYK, но используя первичные цвета RGB на цифровых устройствах. Оно шире чем, sRGB (покрывает примерно половину всех видимых цветов) и хорошо приспособлено для подготовки изображений для печати. Но стоит учитывать тот факт, что не многие мониторы способны воспроизвести цвета этого пространства.

Охват пространства ProPhoto RGB настолько велик, что включает цвета, которые человеческий глаз не способен воспринять, то есть оно выходит за рамки видимых цветов. Это цветовое пространство было разработано компанией Kodak и предназначено для использования в фотографии.

Комбинация подобных цветов

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

Близкие к похожим сочетаниям относятся теплые и холодные комбинации цветов. О том, какие цвета теплые, а какие холодные так же можно узнать по цветовому кругу разделив его на две части: между зеленым и пурпурным. Желто-красная гамма будет относиться к теплым цветам, а зелено-сине-фиолетовая – к холодным. Подобные сочетания, не выходящие за пределы холодных и теплых цветов, будут считаться соответственно холодными и теплыми. Контраст светлого-темного в таких комбинациях будет очень важным во избежание пресности.

Что такое RGB, CMYK, HEX и чем они отличаются

RGB (Red, Green, Blue) — аддитивная (сложение) цветовая модель. Основные цвета которой красный, зеленый и синий. Это значит, что при сложении всех цветов у нас получится белый. Такая модель используется во всех электронных устройствах. Записывается в виде: rgb(0,0,0), каждый из цветов может варьироваться от 0 до 255 включительно, где (0,0,0) — черный цвет, (255,255,255) — белый. Дополнительно может добавляться четвертый параметр — аlpha канал, который означает насколько прозрачен цвет. Alpha канал может принимать значения от 0 до 1, к примеру rgba(31,104,2, 0.8).

HEX — это RGB в шестнадцатеричной системе. Выглядит таким образом #102945, первые две цифры отвечают за красный цвет, вторые за зеленый и третьи за синий. Каждый символ может принимать значения: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. Где #000000 — черный цвет, а #ffffff — белый.

CMYK (Cyan, Magenta, Yellow, Key color) — субтрактивная (вычитание) схема формирования цвета. Состоит из голубого, пурпурного, жёлтого и ключевого — черного цвета. Эта модель используется в полиграфии при цветной печати. Бумага, как и все материалы, отражает свет, поэтому считают, какое количество света отразилось от поверхности. Несмотря на то, что чёрный цвет можно получать смешением в равной пропорции пурпурного, голубого и жёлтого красителей, по ряду причин (чистота цвета, переувлажнение бумаги, стоимость и др.) такой подход неудовлетворителен, поэтому используют отдельно черный цвет.

Серый

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

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

Примеры:


Светло-серый цвет делает этот дизайн очень приглушенным и спокойным.

Типографика делает этот сайт современным, а светло-серый фон усиливает этот эффект.

Холодный серый цвет делает этот сайт утонченным и современным.

Этот дизайн выглядит очень современно благодаря темно-серому фону и светло-серой типографике.

Благодаря нескольким оттенкам серого, этот сайт выглядит одновременно профессионально и утонченно.

Как применять цветовую схему

Для начала создайте дизайн с помощью серых блоков. Только потом начните его разрисовывать.

Основной цвет используется как на больших фигурах, так и на иконках.

Акцент, выгодно выделяется на фоне основного цвета. Он используется в очень малых областях — кнопках и иконках. Чем меньше вы используете этот цвет, тем больше он будет выделяться.

Тёмно серый цвет мы используем для текста, логотипов и очертания значков. (Не забудьте проработать цвета для иконок — это очень влияет на общую картину).

Белый и светло серый цвета используются как фон.

Вывод

Теперь, когда вы знакомы с основами, начните составлять собственные палитры и схемы, эксперементируйте и практикуйтесь и тогда, у вас все точно получится!

Полезные ссылки

  • http://paletton.com/ — цветовой круг для составления палитр
  • https://color.adobe.com/ru/create/color-wheel/ — цветовой круг для составления палитр
  • https://coolors.co/ — отличный генератор случайных палитр
  • http://colorhunt.co/ — подобранные цветовые палитры
  • — основные material цвета
  • https://www.materialpalette.com/blue/yellow — составление material палитр на основе 2 цветов
  • http://material.colorion.co/ — составленные палитры в стиле материал
  • http://www.flatuicolorpicker.com/all — цвета в стиле flat
  • http://swisscolors.net/ — подобранные цвета в швейцарском стиле
  • http://www.gradients.io/ — приятные градиенты
  • http://uigradients.com/ — подобранные градиенты
  • http://hslpicker.com/ — удобный конвертер цветов

Комбинация дополнительных цветов

Дополнительные цвета – тона, которые находятся напротив друг друга в цветовом круге. Сочетания дополнительных цветов первого и второго порядка (основные (первый порядок): красный, желтый, синий; второго порядка: оранжевый, пурпурный, зеленый) слишком кричащие, пронзительные, за счет чего кажутся вульгарными, а так же закрадываются сомнения по поводу возможность их использования. Однако такие комбинации цвета оттенков третьего порядка: красно-оранжевого, фиолетового, сине-зеленого, шартреза и. т. д., смотрятся более привлекательными за счет снижения «резкости».

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

Колориты

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

Существует четыре типа колорита: насыщенный, разбелённый, зачерненный и ломаный.

Насыщенный колорит характеризуется использованием насыщенных цветов (см. «Базовые понятия в колористике»): красного, синего, зеленого, оранжевого, зачастую также используются белый и черный цвета. Такой колорит используется в детских проектах, ведь дети реагируют именно на насыщенные чистые цвета, он прост и понятен.

Разбелённый колорит использует цвета, смешанные с белым цветом, так называемые оттенки (см. «Базовые понятия в колористике»). Такой колорит более нежный, приглушенный, спокойный и используется в там, где нет накала страстей и никакой внутренней борьбы.

Зачернённый колорит использует цвета, смешанные с черным, то есть тени (см. «Базовые понятия в колористике»). Этот колорит используют в дорогих статусных проектах, чтобы подчеркнуть их исключительность.

Ломаный колорит использует тональности (см. «Базовые понятия в колористике»), то есть цвета, смешанные с серым. Это, пожалуй, самый сложный колорит, он встречается реже других. Такой колорит характерен для сложных глубоких проектов для творческих людей с богатым воображением и развитой фантазией.


С этим читают