Методы улучшения выбора цвета и комбинации?

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

Я знаю о таких вещах, как Adobe Kuler и Colorschemer .
Я не ищу дополнительных, подобных инструментов. Я могу создавать палитры без проблем. Однако.....

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

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

Как я могу расширить свой диапазон «удобного» использования цвета?

Каковы некоторые рекомендации по расширению моего собственного восприятия цвета в дизайне?

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


Уточнение : я не ищу методов построения цветовых палитр . Как говорится, я могу это сделать. Я спрашиваю о реализации палитры. Скажем, вы строите палитру из 7 цветов.

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

Именно на такой ввод я и надеялся, а не на «вот как выбрать палитру». Кажется, я, возможно, плохо объяснил свое намерение ранее.

Используете ли вы мудборды? Я нечасто использую их, но они могут быть очень полезны, чтобы заставить себя выйти из зоны комфорта (особенно если вы попросите кого-то внести свой вклад). Затем извлеките цвета (люблю технику cockypup) и заставьте себя экспериментировать с тем, что получится.
Вы должны немного расширить и добавить это как ответ @ user568458 :)
Я работаю in-house уже несколько лет... Выбор цветовых палитр для реальных проектов - далекое воспоминание! Я оставлю это для кого-то с более свежим соответствующим опытом, мне нечего добавить, кроме этого комментария.

Ответы (9)

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

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

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

введите описание изображения здесь

Я использую фильтр на изображении и получаю это.

введите описание изображения здесь

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

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

Кто-то может возразить, что это очень похоже на использование Adobe Kuler, но я нахожу этот подход более практичным и личным. Я выбираю цвета, а не приложение. Меня почему-то беспокоит, что инструмент может принимать творческие решения за меня. Когда-нибудь андроиды будут править Землей и будут делать все сами, но до тех пор я предпочитаю добавлять свои пять копеек «я» в творческий процесс.

Нет... отдельные ответы хороши... они показывают разные методы.
Почти как пиксельирование мудборда. Кроме того, это техника дизайна интерьера: вы находите один предмет (картину, подушку), который вам нравится, и выбираете цвета из этого предмета, чтобы украсить комнату (краска для стен, мебель, коврики, шторы и т. д.).
Pictaculous — это аналогичный способ сделать это, который доступен бесплатно онлайн и создает палитру напрямую.
Моя любимая техника, за исключением того, что я обычно использую мозаику, а не кристаллизацию. Много лет назад научился этому у Джона Макуэйда, и это отличный инструмент.
Проблема с этой распространенной техникой заключается в том, что она затемняет ключевые цвета оригинала. В вашем искусном примере HTL (мой любимый) смешивание цветов в простую «мозаику» приглушает небольшие области, которые оживляют оригинал. Они недостаточно велики, чтобы правильно отразиться в отфильтрованной версии, но в оригинале они более чем достаточно сильны, чтобы изменить настроение художественного произведения.
Это очень хороший момент! Можно сказать, что оттенки в мозаике (поскольку они создаются путем усреднения цветов) более спокойные и немного мутнее, чем оттенки в оригинале. Тем не менее, это помогает избавиться от «заурядного» мышления, которое было одной из проблем ОП в исходном вопросе.

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

Как определить, какие цвета подходят для каких объектов? (т.е. «ярко-красный на канареечно-желтом слишком яркий для хорошей читаемости» и т. д.)

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

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

На каком уровне цветовой контраст становится проблемой?

Смотрите мой последний ответ..

В общем по моему опыту:

  • Высокий контраст яркости с низким контрастом оттенков = легко читается
  • Низкий яркостный контраст с высоким цветовым контрастом (дополнительные цвета) = «вибрация»; глаза вылезают из головы

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

Предпочтительно ли использовать цветовые диссонансы (дополняющие цвета)?

См. выше

Когда цвет слишком яркий для текста?

См. выше

Что делает произведение «популярным» благодаря использованию цвета?

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

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

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

Какие сочетания цветов передают «живость», «защищенность», «уважение», «молодость», «яркость»?

Я не знаю, смогу ли я придумать способ ответить на это, не будучи мнением, поэтому я оставлю это на ваше усмотрение. В любом случае, вероятно, лучше ответить самому себе.

Надеюсь это поможет.

Это вопрос больше о творчестве, чем о технике . Вот почему я отредактировал, чтобы добавить дополнительную информацию. Спасибо :) Мы разрешаем здесь немного больше субъективных вопросов, чем на других сайтах Stack. Мнение не всегда плохо, если оно подкреплено опытом.
Что касается комплементарных элементов в целом, стоит отметить, что они «блестят», когда используются друг против друга. Красный/зеленый особенно опасны, потому что глаз не может сфокусироваться на них одновременно. (Спросите своего оптометриста!)

Когда я выбираю цветовую палитру, я сужаю свой выбор до максимум 3-5 цветов, но я расширяю эти цвета. Например, я обычно запускаю сценарий в Illustrator, который позволяет мне поместить каждый цвет в свою собственную основную палитру, а вариация цвета на основе бликов и теней, которые я использовал в течение года, помогает создать выходные данные HEX и RGB в CSS. . Этот диапазон дополнительных цветов помогает мне расширить диапазон выбора или сузить цветовую палитру. Таким образом, в этом случае вы все еще можете использовать те же самые цвета, но они будут разными вариациями ваших любимых, но при этом будет получен совершенно другой набор цветов.

Пример из вашего желтого:

введите описание изображения здесь

Я использую этот подход по нескольким причинам:

  1. Помогает с градиентами
  2. Остается в цветовой палитре клиента
  3. Сохраняет цветовую тему, но по-прежнему предлагает разнообразие цветов

В этом есть искусство

В зрительном восприятии цвет почти никогда не виден таким, какой он есть на самом деле — таким, какой он есть физически. Этот факт делает цвет самым относительным средством в искусстве. // Йозеф Альберс

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

Другими словами, со временем вы развиваете способность различать цвета.

Юбилейный 50-й выпуск Interaction Старая копия Элементов

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

Использование ярлыков

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

Шаблоны — это хорошие ярлыки: Basic от Themeforest

Ваша практическая система подкрепляется разработкой правил. Вы можете выжить, следуя таким рекомендациям, как «контраст текста и фона должен быть не менее 40%»; или «цвет фона никогда не должен быть насыщеннее 36%»; или «желтый цвет вызывает у меня дискомфорт, так что даже не спрашивайте!» Формулы упрощают задачу.

Это требует приверженности

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

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

Цвет рассказывает историю

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

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

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

Здесь только два цвета + белый

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

Нет сейфа

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

Психология цвета

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

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

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

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

Наука говорит...

  • Возраст
  • Секс
  • Этническая принадлежность
  • Географическое положение
  • Культурные философии
  • Религиозные философии

ВСЕ влияют на восприятие цвета людьми. Это много, чтобы рассмотреть.

Цветовые ассоциации

Ассоциирование цветов с идеями — это подсознательный процесс. С момента рождения мы обрабатываем и формируем цветовые ассоциации, которые находят отклик на всю оставшуюся жизнь.

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

Инстинктивные цветовые ассоциации

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

Самое интересное:

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

Выученные цветовые ассоциации

Исследование цветов и их ассоциации с 13 словами в четырех странах; Япония, Китай, Южная Корея и США

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

Примеры несопоставимого восприятия и реакции на цвет включают:

  • Белый символизирует траур или смерть в Восточной Азии, но счастье, чистоту и рождение в Австралии и Новой Зеландии.
  • Синий воспринимается как холод и зло в Восточной Азии, холод в Швеции, но тепло в Нидерландах.
  • Зеленый символизирует опасность или болезнь в Малайзии, зависть в Бельгии, любовь в Японии и искренность и надежность в Китае.
  • Красному не везет в Нигерии, но везет в Китае, Дании и Аргентине.
  • Желтый олицетворяет теплоту в США и неверность во Франции. В России это ассоциируется с завистью, а в Китае – приятным, счастливым, хорошим вкусом, королевской властью.
  • Фиолетовый — цвет любви в Китае и Южной Корее. Гнев и зависть в Мексике, грех и страх в Японии. Фиолетовый считается дорогим в Китае.
  • В США синий ассоциируется с мальчиками, а розовый — с девочками. Но в Бельгии ассоциации голубого для мальчика и розового для девочки обратные.

Основной источник: Ответ на обзор литературы по цвету с точки зрения межкультурного маркетинга (содержит много-много полезных ссылок)

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

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

Контрастность текста

Я использую средство проверки цветового контраста WCAG для проверки цветового контраста текста и фона. Я буду использовать только комбо, которые проходят уровень AA; скоро это потребуется для соответствия 508 на веб-сайтах и ​​в приложениях. Хотя я не совсем уверен, как эта формула применима к полиграфическому дизайну.

Помимо графического дизайна

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

Вернуться к графическому дизайну

Я сохраняю цвета, которые мне нравятся, в свою палитру образцов в Photoshop. Мне нравится сайт colorlovers.com за поиск цветов и палитр.

Когда в свободное время я чувствую себя творчески, я обычно создаю цветовые палитры в Photoshop, не задумываясь о проекте. Я беру один доминирующий цвет (часто используется в качестве большого фонового квадрата) и пробую разные сочетания цветов (в меньших квадратах поверх фонового квадрата). Я тестирую разные цвета обводки для меньших квадратов, чтобы увидеть, что необходимо для того, чтобы цвет работал (например, мне нужна белая, кремовая или серая рамка, чтобы они работали вместе, или они могут сочетаться без рамки?) Я продублирую цветной квадрат и попробуйте разные цвета обводки на нем. Хитрость заключается в том, чтобы взять цвет, с которым может быть трудно работать (например, розовый или оранжевый), и посмотреть, что дополняет его. Я сохраняю цветовые схемы на потом, когда они мне понадобятся. У меня есть разные палитры (файлы), которые отражают разное настроение (например, яркое и веселое, свежий и воздушный, смелый и мощный и т. д.). Я стараюсь придерживаться общепринятых цветовых ассоциаций, таких как красный, вызывающий чувство голода или ассоциирующийся с едой.оранжевый, чтобы показать значение цены и т. д.

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

Подумайте о том, чтобы смешивать цвета, как художник на палитре, это позволяет вам делать разные градации, а иногда смешивание цветов дает вам новые оттенки, о которых вы не думали. Это альтернативный подход, который сочетается с тем, как предлагает @Matt/@cockypup.

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

быстрая идея

Изображение 1 : Быстро созданный заполнитель для идеи. Множество способов смешивания цветов.

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

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

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

Что касается мудбордов, упомянутых пользователем 568458, то они предлагают в основном то, что ответил cockypup. Я бы начал с поиска изображений, которые, по моему мнению, лучше всего отражали бы эти слова. Вы можете пойти и сделать свои собственные фотографии или просто найти их в Интернете. После этого я бы сделал то, что сделал cockypup, и создал палитру из этих изображений, и использовал их в качестве эталона, чтобы спросить себя: «Действительно ли этот цвет отражает эту идею?»