Советы начинающим: основные и дополнительные цвета. Три основных цвета

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

Представляем десять типов комбинаций цвета:

Ахроматические цвета

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

Основные цвета

Основными на цветовом круге являются: желтый, красный и синий. Эти цвета составляют фундамент цветового круга.

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

Составные цвета

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

Сложные цвета

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

Мы получим всю существующую гамму цветов, затемнив или осветлив эти цвета в той или иной степени.

Контрастные цвета

Контрастной считается пара цветов, когда между ними на круге есть тройка промежуточных цветов. На цветовом круге таких пар шесть. Для достижения ярких, эффектных сочетаний мы используем контрастные цвета с целью придания небольшого акцента. Для примера возьмем голубой цвет на желтой бумаге. Другое впечатление возникает, когда используют разбеленные контрастные сочетания (добавляя ахроматические цвета), применив, серо-голубой и кремово-желтый. Чем больше контрастные цвета разбелены, тем меньше будет ограничений в применении их к одному пространству. Ахроматические цвета могут спасти различную выборку цветов, при необходимости даже контрастную.

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

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

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

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

Монохроматические цвета

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

Родственные цвета

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

Нейтральные цвета

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

Родственно-контрастные цвета

Эти цвета располагаются на круге непосредственно с левой и с правой сторон от дополнительного ему цвета.

Многообразие возможных стилей, универсальность использования в любой среде и ситуации и максимальная доступность для разных цветотипов. Такие цвета используются для создания небольших, но функциональных гардеробов.
У каждой женщины в гардеробе имеется вещи из разных стилей и это разумно. Любимым у вас может быть любой стиль, но у социума свои требования. Нельзя придти в офис в стиле сафари, в клубе же неуместен будет деловой стиль, да и в том и другом случае вас, скорее всего, отправят восвояси, потому что есть нормы и правила. Поэтому хочешь не хочешь, а приходиться подстраивать свой гардероб.
Для кого-то походы по магазинам – это развлечение, а для кого-то – тяжелый труд. Все это зависит от доступных финансов и знаний в этой области. При ограниченных вложениях в одежду, вещи покупаются для долгой носки, как можно более подходящие ко всем остальным предметам в гардеробе: и по стилю, и по цвету.
Итак, какие же цвета наиболее практичные?

Черный базовый цвет в одежде

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

Синий базовый цвет в одежде

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

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

Цветовая гамма в одежде

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

Раскрыть многообразие цветовой гаммы в живописи.

ИЗО 2 класс Тема 1. Три основных краски, строящие многоцветие мира

Тип урока: урок усвоения новых знаний

Цель: Раскрыть многообразие цветовой гаммы в живописи.

Задачи урока:

Развитие умения самостоятельного определения темы и цели урока;

Знакомство с основными и составными цветами, понятием живопись через наблюдение цветовых сочетаний в природе;

Овладение первичными живописными навыками посредствам приема «живая краска».

Планируемые результаты:

Предметные:

Находить в окружающей действительности изображения, сделанные художниками;

Рассуждать о содержании рисунков, сделанных детьми;

Рассматривать иллюстрации (рисунки) в детских книгах.

Характеристика деятельности обучающихся:

Наблюдать цветовые сочетания в природе;

Смешивать краски сразу на листе бумаги, посредством приема «живая краска»;

Овладевать первичными живописными навыками;

Изображать на основе смешивания трех основных цветов разнообразные цветы по памяти и впечатлению.

Оборудование:

Зрительный и музыкальный ряд: https://www.youtube.com/watch?v=uySNMYNk5TU, «Вальс цветов»

Литературный ряд: стихотворение А. Шлыгина «Разноцветный шар земной», «Три цвета».

Для обучающихся: гуашь, палитра, бумага, вода, таблицы по цветоведению. учебник изобразительное искусство. Искусство и ты. 2 класс автора Е.И.Коротеева.

Организационный этап

Приветствие:

Мы пришли сюда учиться,

Не лениться, а трудиться.

Работаем старательно,

Слушаем внимательно.

Постановка цели и задач урока. Мотивация учебной деятельности обучающихся.

Знакомство с учебником «Искусство и ты» Б. Неменского., рабочей тетрадью.

Посмотрите в набор своих красок. Какие три краски вы бы назвали основными?

Под видеоролик о цветах https://www.youtube.com/watch?v=uySNMYNk5TU

учитель читает стихотворение А. Шлыгина «Разноцветный шар земной». (после просмотра обучающиеся отвечают на вопрос: Какие цвета, помимо трех основных, существуют вокруг нас?)

«Разноцветный шар земной»

Если б в поле расцветали только белые цветы. Любоваться бы устали ими скоро я и ты. Если б в поле расцветали только жёлтые цветы, Мы б с тобой скучать бы стали

От подобной красоты!

Хорошо, что есть ромашки, розы, астры, васильки, Одуванчики и кашки, незабудки и дубки! У ромашки белый цвет, У гвоздики - красный. Цвет зелёный у листвы, Это так прекрасно!

Ответы детей.

Как вы думаете, о чем сегодня на уроке пойдет речь?

Первичное усвоение новых знаний.

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

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

Первичная проверка понимания

Проверим, что получилось. Слушайте внимательно стихи и отвечайте те ребята, чей цвет прозвучит.

Три цвета, три цвета, три цвета,

А где нам зелёный, оранжевый взять?

А если нам краски по парам смешать?

Из синей и красной (вот этой)

Получим мы цвет …(фиолетовый) (ответ 1 ряда)

А синий с жёлтым смешаем.

Какой мы цвет получаем? (зелёный) (ответ 2 ряда)

А красный плюс жёлтый, для всех не секрет,

Дадут нам конечно…(оранжевый цвет) (все вместе)

Новые цвета, которые мы получили, называются составными цветами.

Первичное закрепление.

Назовем их еще раз.

Составные цвета

Синий Красный Фиолетовый

Желтый Синий Зеленый

Желтый Красный Оранжевый

Кто запомнил правила работы гуашью и сможет повторить?

Объяснение задания

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

Перед выполнением задания полюбуйтесь цветами, их формой, цветом, оттенками цветов во время просмотра видеоролика «Вальс цветов»

П.И. Чайковского http://www.youtube.com/watch?v=9a4DnEWXMHM

Как вы думаете, что вам предстоит изобразить?

Изобразить цветы, используя основные и составные цвета.

Физкультминутка

(проводится учителем в любое время по необходимости и состоянию детей)

Руки подняли и покачали -

Это деревья в лесу.

Руки согнули, кисти встряхнули -

Ветер сбивает росу.

В сторону руки, плавно помашем -

Это к нам птицы летят.

Как они тихо садятся, покажем -

Крылья сложили назад.

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

Правила работы

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

Три основных краски, строящие многоцветие мира.

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

Смешивание 3 основных цветов

Соблюдение правил работы гуашью

Самостоятельность

Аккуратность

Настроение (дорисуй смайлик):

Педрисунок («живая кисть»)

Самостоятельная работа.

Во время работы звучит «Вальс цветов» П.И. Чайковского.

Составление коллективной работы.

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

Итог урока.

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

Какие основные цвета изучили?

Как получить составные цвета?

Рефлексия.

Кто доволен своей работой сегодня? Прикрепите к вазе цветок желтого цвета.

Кто смог правильно передать цвета на рисунке, но были трудности при смешивании красок, прикрепите цветок синего цвета.

Кто не достаточно усвоил 6 цветов, прикрепите цветок красного цвета.

Домашнее задание.

Выполни задание в рабочей тетради на странице 4, 5.

Благодарю за урок!

История

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

Различные варианты выбора «основных цветов»

Смешивание цветов зависит от цветовой модели . Существуют аддитивная и субтрактивная модели смешивания.

Аддитивная модель

В аддитивной модели смешивания цвета получаются как смешивание лучей. При отсутствии лучей нет никакого цвета - чёрный белый . Примером аддитивной цветовой модели является RGB .

Субтрактивный синтез цвета

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

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

Биофизические предпосылки

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

Четыре «чистых» цвета

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

Технические варианты реализации модели использования «основных цветов»

Примечания

Ссылки

  • Handprint: do «primary» colors exist? - a comprehensive site on color primaries, color perception, color psychology, color theory and color mixing.
  • Смешивание цветов онлайн - Веб сервис для моделирования цвета при смешивании исходных цветов в любых пропорциях.

Wikimedia Foundation . 2010 .

Смотреть что такое "Основные цвета" в других словарях:

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

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

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

    Современная энциклопедия

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

    Основные цвета - ОСНОВНЫЕ ЦВЕТА, три независимых цвета, смешением которых в разных пропорциях можно получить любой цвет. Число возможных систем основных цветов очень велико, однако обычно в колориметрии пользуются системой основных цветов, состоящей из красного,… … Иллюстрированный энциклопедический словарь

Взаимодействие человека с компьютером во многом опирается на графические элементы интерфейса, и цвет играет в этом процессе не последнюю роль. Как однажды сказал Pierre Bonnard : «Цвет не просто делает дизайн приятным для глаз, но и подкрепляет его».

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

1. Ограничьте количество цветов

При добавлении цветов в дизайн крайне важно выдерживать баланс; и чем их больше, тем сложнее становится этого добиться. Результат получится лучше, если вы будете придерживаться правила «максимум три основных цвета», формируя палитру. В ходе исследования от специалистов из Торонтского университета , посвященного тому, как люди пользуются Adobe Color CC , большинство респондентов сказали, что предпочитают простые сочетания на основе двух-трех цветов.

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

Как выстроить палитру

Но как выбрать эти два-три цвета? Тут вам поможет цветовой круг.

Такой круг из 12 цветов - один из основных материалов для составления палитры.

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

Одноцветные палитры

Одноцветные схемы оставляют очень приятное впечатление (особенно если выполнены в оттенках синего или зеленого). Как вы видите на примере Facebook, палитра выглядит очень аккуратно и элегантно.

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

Палитры из родственных цветов

Родственные цвета - это те, которые располагаются рядом друг с другом на круге.

Такие гаммы строятся на базе родственных цветов: один из них становится опорным, а остальные используются, чтобы обогатить палитру. Здесь все тоже достаточно просто, но фокус заключается в том, чтобы правильно выбрать яркость используемых цветов - она будет задавать тон для всей гаммы. Например, Clear , утилита для организации списка дел с жестовым управлением, использует кричащие цвета, чтобы визуально привлечь внимание к тем задачам, которые пользователь выполняет в данный момент. Напротив, в приложении для медитации Calm предпочтение отдается паре родственных цветов «синий+зеленый», чтобы создать у пользователей ощущение покоя и умиротворения.

Палитры из комплементарных цветов

Используя комплементарные (противоположные) цвета, вы легко можете визуально выделить элемент.

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

Кастомизированные палитры


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

Создать собственную палитру не так трудно, как думают многие. Есть очень простой способ, которым вы можете воспользоваться, чтобы получить отличный вариант: просто добавьте яркие акценты в нейтральную гамму (то есть такую, которую обычно называют черно-белой). Полученная палитра будет смотреться очень эффектно.

2. Черпайте вдохновение в природе

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


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

3. Старайтесь придерживаться пропорции 6/3/1

При составлении палитры вам также пригодится вечно актуальное правило от дизайнеров интерьеров: пропорция 6/3/1 позволяет создать идеальный баланс цветов в любом пространстве.

Воплотить эту концепцию в реальность очень просто: ваш опорный цвет должен занимать 60% процентов, дополнительный - 30%, а 10% отводится на акценты. Основная идея состоит в том, что дополнительный цвет должен служить поддержкой для основного, но при этом быть легко различимым на его фоне. На цвет для визуального выделения отдельных областей приходится 10% экрана - можете использовать его для призыва к действию или же любого другого элемента.

4. Сначала проектируйте в черно-белой гамме

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

Вводите цвет в последнюю очередь и очень целенаправленно.


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

5. Избегайте черного цвета

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

Если добавить в ваш комплект тщательно отобранных цветов черный, он «задавит» собой все остальные. Он так сильно бросается в глаза именно потому, что не воспринимается как естественный. Многие приложения, которыми мы пользуемся изо дня в день, добавляют в интерфейс якобы черные цвета, которые на самом деле темно-серые. Например, самый темный цвет в верхней панели приложения Asos - не #000000, а #242424. Так что не забывайте регулировать насыщенность.

6. Выстраивайте визуальную иерархию при помощи контраста

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


Благодаря контрасту одна область экрана заметно отличается от остальных.

7. Используйте цвет, чтобы воздействовать на эмоциональное состояние пользователя

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

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

Красный, Оранжевый, Желтый

Красный (страсть, сила, опасность, значимость): Красный - очень стимулирующий цвет. Он оставляет ощущение скорости и силы и ассоциируется с энергией. Уже доказано, что он влияет на нас даже на физиологическом уровне, ускоряя метаболизм и кровообращение . Именно поэтому люди даже читают быстрее и громче, когда видят красный цвет. Его хорошо использовать, чтобы быстро притянут взгляд пользователей или выделить отдельный элемент, требующий их внимания.

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

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

Зеленый, Синий, Фиолетовый

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

Синий (спокойный, ответственный, заслуживающий доверия, надежный): Синий цвет обычно ассоциируется с чувствами покоя и умиротворения, а также с силой и надежностью, что в общем дает ощущение профессионализма и возбуждает доверие. Синий внушает нам, что мы в безопасности. По этой причине его активно используют банки и IT-компании. У многих титанов на рынке социальных сетей (Facebook, Twitter, LinkedIn) в интерфейсе также фигурирует синий.

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

Розовый, Черный, Белый, Серый

Розовый (женственность, невинность, юность): Наиболее широко известная ассоциация с розовым цветом - это женственность.

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

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

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


Здесь важно отметить, что значения цветов могут сильно меняться в зависимости от обстоятельств и культурного контекста. Чтобы глубже ознакомиться с этой темой, прочитайте статью Symbolism Of Colors And Color Meanings Around The World .

8. Сделайте дизайн доступным

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

Не используйте цвет в качестве единственного индикатора

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


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

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


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

Делайте текст как можно контрастнее

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


Низкая контрастность может стать смертельным ударом для юзабилити.

Отслеживайте контрастность, чтобы быть уверенными, что цвет текста будет в достаточной степени выделяться относительно фонового цвета и даже человек с дальтонизмом или очень слабым зрением сможет различать слова. Коэффициент контраста - это математическое выражение того, насколько один цвет отличается от другого (обычно он записывается так: 1:1, 21:1). Чем больше разница между числами, тем сильнее цвета отличаются по яркости. На W3C рекомендуют следующие соотношения между яркостью текста и изображений:

  • Если текст мелкий, соотношение должно быть не меньше 4.5:1;
  • Для крупного текста (то есть 14 pt и выше для жирного шрифта, 18 pt и выше - для обычного) оптимально соотношение 3:1 и больше.
Но есть хорошая новость: вам не придется проверять все вручную. При помощи рассчитать коэффициент можно в несколько кликов.

Бонус: Инструменты, необходимые для UX дизайнера

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

Adobe Color CC
Adobe Color CC (раннее известный как Kuler) - отличное решение, чтобы находить, редактировать и создавать палитры. Вы можете модифицировать каждый цвет, входящий в состав гаммы, или устанавливать его в качестве опорного буквально в пару кликов. Готовые палитры можно сохранять и добавлять в библиотеку; кроме того, в открытом доступе на сайте находится большое количество цветовых гамм, созданных другими членами сообщества.


Dribbble Search-by-color
Если хотите посмотреть, как другие дизайнеры применяют тот или иной цвет в своих проектах, перейдите по адресу dribbble.com/colors и выберите нужный оттенок.


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


Colorzilla
Colorzilla - расширение для браузеров Google Chrome и Mozilla Firefox, которое включает целую кучу инструментов для работы с цветом, включая пипетку с возможностью захвата цвета, генератор градиентов CSS и функцию просмотра палитр.


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


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


Симулятор дальтонизма в Adobe Photoshop
Photoshop позволяет проверить, насколько ваш дизайн универсально доступен. Достаточно перейти на вкладку View > Proof Setup и выбрать интересующий ваш тип (Protanopia type или Deuteranopia type).


NoCoffee Vision Simulator for Chrome
Чтобы удостовериться, что ваш дизайн доступен для всех, неплохо бы на себе испытать дальтонизм в процессе проектирования. NoCoffee Vision Simulator обеспечивает возможность создать для любого интерфейса симуляцию, показывающую, как она выглядит для людей с цветовой слепотой или слабым зрением. Например, применив фильтр «Deuteranopia» во вкладке «Color Deficiency», вы увидите веб-сайт в тонах серого. Это поможет вам адаптировать интерфейс под потребности людей, у которых проблемы с глазами.


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