Цветовые схемы для сайта готовые: Цветовые схемы бесплатно

Готовые цветовые схемы для дизайн проектов

Обновлено: 19.06.2021

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

Источник вдохновения

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

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

#1 Цветовая схема «Закат»

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

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

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

#2 Цветовая схема «Океан»

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

В дизайне интерьера это один из самых любимых цветов.

#3 Цветовая схема «Кувшинка»

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

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

• Стабильность и устойчивость (бодовый),
• жизнерадостность (желтый),
• загадочность (фиолетовый)

#4 Цветовая схема «Горы»

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

#5 Цветовая схема «Город ночью»

Казалось бы, из фотографии в стиле киберпанк заимствована не совсем привычная цветовая схема. Нет фиолетового и синего. Но тем, не менее сочетание смотрится более чем технологично.

Попробуйте и такой вариант цветовой палитры.

#6 Цветовая схема «Бодрящий лимон»

У вас тоже потекли слюнки при виде этой фотографии? Бррр… Скажу вам больше, если смотреть только на схему цветов, реакция будет та же.

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

#7 Цветовая схема «Спелая слива»

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

#8 Цветовая схема «Кокос»

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

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

#9 Цветовая схема «Яблоко и капельки росы»

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

Такая цветовая схема может выглядеть очень благородно в стиле арт-деко.

#10 Цветовая схема «Одуванчик»

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

#11 Цветовая схема «Птица Робин»

Нежные пастельные оттенки отлично подойдут для оформления интерьера в стиле прованс.

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

Примеры использования готовых цветовых схем

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

Изображение создано на основе мокапа freepik

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

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

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

Подписывайтесь на обновления блога «Дизайн в жизни» по e-mail или социальных сетях   и мы обязательно опубликуем для вас еще больше полезных и интересных материалов!

 

(Visited 324 times, 3 visits today)

Работа с цветовыми схемами—ArcGIS Pro

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

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

Поиск подходящей цветовой схемы

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

Для карты можно задать используемую модель цветов: RGB или CMYK. Для поддержки обеих моделей используются установленные по умолчанию стили ColorBrewer Schemes (RGB и CMYK), они предоставляют набор последовательных, расходящихся и качественных цветовых схем.

Многие из цветовых схем, включенных в стиль ColorBrewer Schemes, подходят для дальтоников. Вы можете найти эти цветовые схемы в строке поиска стиля в виде каталога. Откройте стиль в виде и выполните поиск по тегу color blind safe.

В системном стиле ArcGIS Colors схемы Инферно, Магма, Плазма и Виридис специально разработаны, чтобы свести к минимуму неправильную интерпретацию данных, вызванную цветом. Эти цветовые схемы можно использовать для Изображений, символов LAS, неклассифированных и градуированных цветов.

Создание пользовательской цветовой схемы

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

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

Изменение цветовой схемы векторного слоя

Цветовую схему, применяемую к слою, можно изменить на панели Символы для слоя. Список цветовых схем фильтруется в зависимости от типа слоя.

Следующие типы символов поддерживают использование цветовых схем:

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

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

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

5. Дополнительно поставьте отметку для Показать все, чтобы показать список всех доступных цветовых схем.

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

Редактор цветовой схемы

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

Для открытия Редактора цветовой схемы выполните следующие шаги:

1. На панели Символы на вкладке Основные символы щелкните ниспадающее меню Цветовая схема.
2. Щелкните Формат цветовой схемы если вы хотите открыть окно Редактора цветовой схемы.

Опции, доступные в редакторе, зависят от типа цветовой схемы. Тип цветовой схемы отображается в нижней части окна Редактора цветовой схемы. Варианты типов цветовой схемы подробно описаны ниже.

Непрерывные цветовые схемы

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

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

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

Дискретные цветовые схемы

Щелкните кнопку Добавить цвет , чтобы добавить цветовой блок в схему, либо щелкните Удалить цвет , чтобы удалить выбранный блок.

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

Произвольные цветовые схемы

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

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

Более подробно:

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

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

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

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

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

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

Более подробно:

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

Бивариантные цветовые схемы

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

Цветовая схема для сайта

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

Основные цвета и вызываемые ими эмоции

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

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

Зеленый — цвет природы, здоровья. Расслабляет глаза, успокаивает. Согласно опросам, зеленый на втором месте по популярности и предпочтениям.

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

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

Розовый — олицетворение романтичной женственности. Используется при оформлении товаров и предложений для девочек и женщин.

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

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

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

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

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

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

Разница в восприятии цвета мужчинами и женщинами

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

Теория цвета

Подобрать гармоничную цветовую схему помогает понимание теории.

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

2.  У каждого оттенка есть противоположный (комплементарный). В цветовом круге он расположен напротив. Комплементарные цвета усиливают друг друга, но в одинаковой пропорции начинают «спорить» между собой.

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

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

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

Художник Йоханнес Иттен предложил 7 вариантов использования цветовых контрастов:

• По цвету — сочетание основных цветов (желтый, синий, красный) в их предельной насыщенности; самый сильный контраст, вызывает чувство определенности и ясности, позволяет создать яркий дизайн.
• Светлого и темного — наиболее ярко проявляется при использовании белого и черного; такой контраст хорошо воспринимается людьми, имеющими слабое зрение, а также при дальтонизме.
• Холодный и теплый — композиция из теплых и холодных оттенков одинаковой насыщенности, очень выразительна и поэтому используется часто.
• Дополнительных цветов — сочетание противоположных тонов цветового круга.
• Симультанный контраст — прием, способный вызвать иллюзию присутствия дополнительного оттенка; при использовании двух цветов один из них как будто бы приобретает другой оттенок на фоне второго, например, к серому цвету на фоне желтого слегка примешивается фиолетовый, на фоне красного — зеленый, на фоне фиолетового — желтый.
• По насыщенности — противопоставление ярких и бледных (блеклых), а также затемненных красок.
• По площади цветового пятна — пропорциональное распределение красок в зависимости от их значимости в общем дизайне.

Подбор цветовой схемы для сайта

• Составление цветовой схемы для сайта можно произвести по следующему алгоритму:
•        1. Выберите основной (преобладающий) цвет; чаще всего это главный цвет логотипа.
•        2. К основному добавьте 2-3 дополнительных, используя цветовой круг.
  
  •        3. Добавьте нейтральные: белый, темно- и светло-серый.
  •        4. Определитесь с тем, какие оттенки будут акцентными для выделения значимых элементов.
  •        5. Выберите фоновый цвет.

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

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

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

Другие способы

• Обратите внимание на другие способы поиска цветовой схемы для сайта:
•        1. Воспользуйтесь коллекциями готовых популярных палитр, например,
•            https://colordrop.io/popular/
  

Определение цветовой палитры по фотографии. Черпайте вдохновение в природе

07.06.16 13472

Подборка цвета – один из важнейших этапов в процессе создания хорошего дизайна.

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

01. Adobe Colour CC

Компания Adobe переименовала свой проект Kuler в Colour

Вы можете быть знакомы с этим инструментом по его прежнему названию — Adobe Kuler . Однако совсем недавно компания Adobe переименовала одно из своих популярных веб-приложений в Adobe Colour CC .

Он позволяет подбирать, создавать и сохранять различные цветовые схемы, в каждой из которых может присутствовать до пяти цветов. Инструмент доступен как в браузерной, так и в настольной версии. Если вы используете настольную версию, то вы сможете экспортировать цветовую схему прямо в Photoshop , Illustrator и InDesign .

02. Mudcube Colour Sphere

Если вы не уверены по поводу вашей цветовой схемы, то у Mudcude есть собственная галерея готовых ресурсов

Mudcube Colour Sphere – очень удобный миниатюрный ресурс для дизайнеров, который не только предлагает hex-коды выбранных цветов, но и позволяет создавать цветовые схемы для собственных проектов. Также стоит отметить, что в Mudcube имеется собственная галерея готовых ресурсов, которые также можно использовать.

03. Check my Colours

Check my Colours разработан специально для оценки и подборки комбинации фона и основного цвета для всех DOM-элементов . А также для того, чтобы выяснить, достаточно ли элементы гармоничны между собой. Все тесты основаны на алгоритмах, рекомендованных World Wide Web Consortium (W3C ).

04. The Color App

Приложение поможет узнать RGB, HEX, а также HSLA-значения выбранных цветов

iOS-инструмент The Color App позволит легко и просто определять цвета при помощи большой цветовой палитры. Он позволяет узнать RGB , HEX и HSLA-значения цветов, а также создавать собственные цветовые схемы для сайта.

05. Color Hunter

Color Hunter формирует цветовую схему на основе выбранного изображения

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

06. TinEye

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

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

07. Color

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

08. SpyColor.com

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

09. Designspiration

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

10. ColorExplorer

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

11. Hex Color Scheme Generator

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

12. COLOURlovers

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

13. Color Scheme Designer

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

14. COPASO

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

15. Colourmod

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

16. ColorZilla

ColorZilla доступен как для Chrome, так и для Firefox

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

17. Colormunki

Удобный онлайн-инструмент для подбора цветовых схем от создателей Colormunki . С его помощью можно без труда создавать привлекательные цветовые палитры из образцов на основе Pantone с использованием нескольких методик.

18. colr.org

Colr.org позволяет установить диапазон цветов любого изображения

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

19. ColourGrab

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

20. ColorBlender

ColorBlender генерирует палитру из пяти сочетающихся цветов

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

21. GrayBit

GrayBit позволяет анализировать сайты, чтобы понять, как бы они выглядели в градации серого

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

22. COLRD

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

23. Shutterstock Spectrum

Попытки найти идеальное цветовое решение уходят корнями далеко вглубь истории, к шедеврам великих художников. Теперь поисками идеального сочетания цветов, как филосовского камня, занимаются дизайнеры. Как сказал французский импрессионист Клод Моне: «Цвет – моя каждодневная одержимость, моя радость и моя мука».

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

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

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

4. С ColoRotate вы можете с легкостью создавать и управлять палитрами цветов в объемном 3d-пространстве для лучшего контроля цвета текста и фона. Цвета оживают, потому что в объеме наш ум воспринимает цвет иначе. Слайдеры и джойстики интуитивно понятны и просты в управлении. К тому же, вы можете синхронизировать палитры цветов между компьютерами и делиться заготовками с коллегами или клиентами.

5. ColorBlender – простой в использовании инструмент для создания цветовых палитр для веб-разработки. Основная функция этого ресурса – создание палитры из шесть цветов. Вы выбираете один, а программа подбирает остальные пять соответствующих цветов. Это позволяет легко и быстро создавать палитры.

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

7. ColorExplorer является бесплатным инструментом для проектирования и работы с цветовой палитрой. Набор инструментов сайта не ограничивается подбором цветов, вы можете просматривать популярные библиотеки цветов, соединять библиотеки, экспортировать палитру в популярные программы, такие как AdobePhotoshop, Illustrator и многие другие. Также, можно импортировать цвета из изображений. Этот сайт был разработан специально для профессиональных дизайнеров. Тут нет регистрации, подобранную палитру можно просто сохранить. Однако, если вы хотите защитить свою палитру от посторонних глаз, можно создать и свой собственный профиль.

8. Главная идея Сolr : игра с цветом и цветовыми схемами. Этот сайт является одновременно игрушкой и серьезным генератором идей.

9. С ColorCombos вы попадете в мир цветов, в котором вы обязательно найдете свою идеальную цветовую палитру. Этот сайт был создан, чтобы помочь веб-разработчикам и дизайнерам быстро выбирать и тестировать различные комбинации цветов. Библиотека ресурса содержит сотни и тысячи образцов цвета. С помощью данного ресурса можно создать красивый сайт с отличным сочетанием цветов.

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

11. На Сolrd можно создавать схемы цветов, шаблоны, загружать изображение, чтобы узнать его цветовую гамму и многое другое.

12. ColorHunter – это ресурс, на котором можно найти и создать цветовые палитры, сделанные из изображений. Чтобы найти цветовые палитры на сайте, нужно ввести поисковый запрос в поле в верхней части страницы. Поиск можно осуществить по тегам, шестнадцатеричному коду цвета или ссылке на изображение. Изображение, также, можно загрузить из ПК.

13. позволяет имитировать девять видов цветовой слепоты.

14. Etsy – это самый забавный и необычный способ подобрать цвет.

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

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

Взаимодействие человека с компьютером во многом опирается на графические элементы интерфейса, и цвет играет в этом процессе не последнюю роль. Как однажды сказал 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», вы увидите веб-сайт в тонах серого. Это поможет вам адаптировать интерфейс под потребности людей, у которых проблемы с глазами.

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

Эффективный дизайн сайта немыслим без подбора цветового решения. Осталось разобраться, как это сделать.

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

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

Начнем с краткого введения в теорию цвета.

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

Подготовка

Вам необходимо вдохновение?

1.

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

Ищете готовую палитру?

2.

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

Палитра сопровождается говорящими названиями: Шторм в Уитсанди (тихоокеанский архипелаг в Коралловом море), Сумерки в Уитсанди, Остров Уитсанди

3.

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

4.

В ColoRotate вы найдете библиотеку цветовых схем, которые можно просматривать, выбирать и изменять. Сделать собственную палитру на основе найденной поможет специальный 3D инструмент (3D color tool). Цветовую схему, созданную вами, можно сразу применить в PhotoShop или Fireworks, установив ColorRotate plugin или приложение для iPad.

В соответствии с требованиями бренда

Что, если у вас уже есть картинки, логотипы или требования бренда, которым нужно соответствовать?

1.

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

2.

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

3.

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

4.

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

5.

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

6.

Этот плагин для Chrome помогает гармонизировать цвета, учитывать дальтонизм и идентифицировать HEX-коды. Цветовые палитры можно сразу экспортировать в Illustrator, PhotoShop и CoIRD.com.

7.

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

8.

Этот инструмент подбирает цвета, которые сочетаются с вашим. Он немного примитивнее, чем другие ресурсы в этом списке. Нужно вставить HEX-код цвета в строку или выбрать его на представленном в форме колеса спектре. Генератор выдает 3 цвета, которые подходят вашему, и сопровождает их HEX-кодами.

Создать свой цвет

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

1.

Это приложение для iOS помогает выбрать из нескольких цветов, которые размещаются рядом через небольшое расстояние, что намного удобнее градиентного представления, кругов и спектров. Большие цветовые сетки позволяют использовать весь экран (что особенно ценно для владельцев iPad Pro). В приложении можно создавать образцы цвета, находить RGB, HEX и HSLA значения и делать палитры из набросков.

3. Color

В Color от HailPixel не определиться с цветом нельзя. Вы точно поймете, что хотите и получите HEX-код оттенка.

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

Получить код цвета

Если вы увидели где-то цвет и хотите узнать его код и название, эти ресурсы для вас.

1.

SpyColor предоставит информацию о любом цвете, включая Hex, RGB, CMYK и другие коды, и покажет целый диапазон схем для каждого оттенка, в том числе комплементарные, сплит-комплементарные, триадные, контрастные и аналоговые.

2.

HTML Color Codes находит HEX-код для цветов на изображении. Вы выбираете картинку, открываете ее для просмотра и получаете код цвета, наведя на него курсор.

Протестировать свою палитру

Создав цветовую схему, хочется удостовериться в ее эффективности.

Check my Colours проверяет основные и фоновые цвета на соответствие требованиям контрастности для тех, чье цветовое восприятие имеет отклонения от нормы. Если вы хотите убедиться, что ваш сайт подходит для людей с дальтонизмом или получить работающие и интуитивно понятные цветовые сочетания с точки зрения UX, этот ресурс незаменим. Достаточно ввести адрес сайта, чтобы ознакомиться с отчетом по его внешнему виду.

Здесь можно выбрать до 5 оттенков из огромной палитры и получить изображения, которые имеют похожую цветовую комбинацию и сопровождаются HEX-кодами. Картинки можно сохранить на сайте или скачать.

Заключение

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

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

Сначала создадим три квадрата с длиной стороны кратной трем. В нашем примере это квадраты 240pt в высоту и 240pt в ширину.

Изменим имена этих слоев на Красный, Зеленый и Синий. Давайте сделаем заливку Красного слоя цветом #FF6161, зеленого - #4F953B, а синего - #0076FF. Выберите эти слои и нажмите клавишу “A”, чтобы выбрать инструмент “Artboard”. Теперь выберите опцию “Around Selection” на панели “Inspector” справа. Давайте поменяем название нашего артборда: назовем его “Цветовая палитра”.

Теперь будем добавлять разные оттенки к квадратам, разделяя их по-вертикали на три равные части. Чтобы сделать это, создайте над квадратами два прямоугольника шириной во весь артборд. Высота прямоугольников должна составлять ⅓ высоты квадратов - то есть, в нашем случае, 80pt.

Выровняйте один прямоугольник по верхнему краю ардборда и залейте белым, а второй - по нижнему краю и залейте черным. Теперь установите прозрачность прямоугольников на 20%. У нас получились по три разных оттенка красного, зеленого и синего. Давайте переименует эти два слоя, чтобы позже не запутаться в них.

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

Теперь начинается веселье. Залейте эти два слоя каким-нибудь бодрым цветом. Мы будем использовать желтый (#FFE200). Установите прозрачность центрального прямоугольника на 40%, а правого - на 80%. Наконец, поменяйте режим смешивания (blending mode) на “наложение” (overlay).

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

Итоговый результат

Как использовать цвета в Sketch

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

Сохранить цвет в Sketch достаточно просто. Когда выберете цвет, вы увидите две панели: Общие цвета (Global Colors) и Цвета документа (Document Colors). Общие цвета - это цвета, сохраненные для всех документов. Цвета документа отображаются только для того документа, над которым вы работаете.

Совет: Чтобы быстро выбрать цвет, нажмите “Control + C” и кликните по нужному цвету. Это горячая клавиша для инструмента “пипетка”.

Плагин Sketch Palettes

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

Здесь-то нам и пригодится плагин Sketch Palettes . Он позволяет сохранить палитры в файл, который впоследствии можно импортировать в другой документ. Таким образом вы можете быстро добавить цвета бренда в любой новый документ.

Гайд по созданию цветовой палитры для сайта и интерфейса

---

Вы читаете перевод статьи Джонатана Уайта “Designing in Color”. Над переводом работали Ольга Скулкина и Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.

Проектируем в цвете

Цвет — это мощнейшая сила в руках дизайнера. Цвет привлекает внимание, вызывает эмоции и передает смысл. Цвет очень важен: известное исследование под названием “Влияние цвета в маркетинге” показало, что первичное мнение о продукте (которое формируется у людей в первые секунды) на 90% основывается именно на цвете.

Так что очень важно эффективно использовать цвет в дизайне. Но это еще и очень сложно — подобрать правильные сочетания цветов. У каждого цвета свое значение, а комбинаций цветов вообще бесконечное множество.

Интересуетесь свежими статьями на эту тему? Вступайте в группу UxJournal на Facebook

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

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

Подбираем цветовую палитру

Симпатичная подборка для цветовой палитры

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

Определяем назначение

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

Задайте себе такие вопросы:

• Какое сообщение вы хотите передать посредством дизайна?
• Каково назначение вашего дизайна? Он должен быть информативным? Или должен убеждать?
• Какие эмоции вы хотите передать в дизайне?

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

Определяем аудиторию

Кто ваши пользователи, и как это может повлиять на ваш дизайн?

Люди по-разному воспринимают цвета. Как сказал Фейрчайлд, цвет — это психологический феномен, который происходит в сознании зрителя. Цвета по-разному влияют на людей: все зависит от их личных предпочтений, особенностей культуры и воспитания, а также от жизненного опыта. Поэтому если вы хотите предвидеть реакцию людей на ваш дизайн, определите свою аудиторию.

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

Китайский красный конверт

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

Если хотите узнать больше о значении цвета в разных странах и у разных групп людей, почитайте “Психологию цвета в маркетинге и брендинге” (по-английски или по-русски) и “Значение цвета”.

Повторяем теорию цвета

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

Для начала стоит изучить Теорию цвета от Design School и Теорию цвета 101 от Hubspot. А в этой статье описано интересное применение теории цвета: Почему Фейсбук синий? Научное обоснование выбора цвета в маркетинге.

Ищем вдохновение

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

Самое распространенное место для поиска вдохновения — сайты вроде Dribbble и Behance. Если вы ищете вдохновение для создания чего-то необычного (скажем, материального дизайна), сходите на сайт MaterialUI. Подобный сайт для плоского дизайна — FlatUIColors.

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

Дизайнеры интерьеров оживляют пространство посредством цвета

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

Дизайн декораций — это отличный источник вдохновения

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

Вдохновляющие цвета везде — и в повседневной жизни тоже.

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

Создадим дизайн-систему

Дизайн-систему иногда называют “руководством по стилю” — это каркас, в котором отражены все элементы вашего дизайна: от кнопок до типографики. При создании дизайн-системы продумайте, какие кнопки вы будете использовать и как будет выглядеть панель навигации.

Пример дизайн-системы можно посмотреть на Salesforce. Нужны еще примеры? Вот список 50 подробнейших руководств по стилю, которые нужно изучить перед запуском стартапа.

Дизайн-система MashCreative

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

При выборе цветовой палитры дизайна, лучше придерживаться принципа KISS (Keep it simple, stupid — Не усложняй, глупый). Чем меньше цветов, тем лучше. Для большинства дизайн-систем подходит такая начальная структура:

• Фон
• Основной акцент
• Дополнительный акцент
• Цвет ошибки
• Цвет успешной операции

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

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

Состояния дизайна

Подбираем цветовую палитру

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

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

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

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

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

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

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

Вот, к примеру, цветовая палитра Invision.

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

Применяем цветовые палитры

Если хотите понять, как использовать цветовые палитры в дизайн-системах, посмотрите на Airbnb. Их основой цвет — Rausch, названный в честь улицы, на которой зародилась компания. Дополнительным цветом выступает Kazan, а в качестве фоновых используются два оттенка серого.

Цвета бренда Airbnb

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

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

Для сообщений об ошибке на Airbnb используется красный — некоторые относят его к оттенкам основного цвета rausch. Этот красный цвет в совокупности с восклицательным знаком мгновенно привлекает внимание и информирует о состоянии системы.

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

Начните с полного отсутствия цвета и постепенно добавляйте его в дизайн.

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

Подытожим

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

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

Мне бы хотелось посмтреть, как вы работаете с цветом. Какие процессы используете? Пишите мне в Twitter.

Цветовые схемы для Windows 7. Цветовые схемы в Фотошопе

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

Виды цветовых моделей

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

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

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

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

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

Использование модели RGB

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

Как уже было сказано, на дисплеях может отображаться 16,7 миллионов оттенков. Откуда берется это количество? Дело в том, что максимальное значение каждого из трех цветов в модели RGB – 255. Это происходит из-за того, что в 1 байт помещается 256 значений – от 0 до 255. Таким образом, цвет каждой точки в памяти компьютера занимает 3 байта. Первый байт – это красная составляющая, второй – зеленая, третий – синяя. А 256 в 3-й степени и дает примерно 16,7 миллионов комбинаций.

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

Другая цветовая модель основана на вычитании, и для этой цели нужны другие цвета. Они есть на схеме RGB и являются промежуточными, но в субтрактивной становятся исходными – это голубой (cyan), малиновый (magenta), желтый (yellow) и черный, в противоположность белому, (black).

Черный добавляется для получения темных оттенков. Из аббревиатуры названий этих цветов — CMYK — цветовая схема и получила свое название. Эта модель получила свое распространение в местах, где нужный оттенок получается путем смешивания красок – для распечатки фото и других изображений. По количеству цветов она проигрывает RGB примерно на 40 %, поэтому при выводе на печать картинки с экрана монитора обычно получается менее яркое изображение, чем ожидалось.

Как подготовить изображение к печати

При подготовке фотографий к распечатке, можно изменить цветовые схемы в «Фотошопе» с RGB на CMYK. Это позволит хотя бы примерно определить, как будет выглядеть картинка на бумаге. Для этого на панели инструментов выберете пункт меню «Изображение», далее подменю – «Режим» и кликнете по нужной модели. Точного соответствия не будет, потому что очень много факторов влияют на то, каким будет изображение при распечатке.

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

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

Как складывать и вычитать цвета

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

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

Краска на листе бумаги приобретает свой оттенок за счет поглощения части цветового спектра, а не излучения. Таким образом, сложение цветов получается сложением источников света, а вычитание – смешением красок.

Психология цвета при создании сайта

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

1. Синяя цветовая гамма ассоциируется у людей со спокойствием, умиротворением, доверием, и поэтому присутствует на страницах социальных сетей и на сайтах банков.
2. Черный считается строгим и деловым.
3. Розовый цвет — женским или детским. Он активно используется в индустрии красоты, фирмами, продающими косметику и товары для ребенка.
4. Зеленый – это экология, натуральные продукты, природа и растительность.
5. Оранжевый – свежесть и доверие.
6. Фиолетовый – новаторство.
7. Желтый цвет привлекает внимание и говорит о том, что нужно подготовиться к чему-то важному.
8. Красный предупреждает об опасности, но также ассоциируется со страстью и любовью.

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

Как выбрать цветовую схему для сайта

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

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

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

Выбор основного цвета для сайта

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

Нежелательно использовать при оформлении сайта более 3 цветов – это перегружает восприятие пользователя. Можно создавать цветовые схемы самостоятельно, используя программу Adobe Photoshop. Для этого достаточно выбрать понравившееся изображение в стилистике сайта и найти пункт меню «Фильтр», затем — «Оформление» и «Мозаика». После чего выберете максимальное количество размера ячейки и получите готовую палитру.

Цветовые схемы для Windows 7

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

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

Как выбрать цветовое оформление

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

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

Топ-10 генераторов цветовых схем для вашего бренда (2021) | Дизайн, лого и бизнес

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

Создайте свой логотип онлайн. Более 50 тысяч брендов по всему миру уже используют логотипы от Турболого.

Создать логотип онлайн

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

Лучшие генераторы цветовых схем

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

1. Coolors

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

Пользователям доступна регуляция оттенков по насыщенности, температуре и яркости. Также по итогу работы можно выбрать удобный формат для сохранения результата (PNG, SVG, SCSS или PDF).

2. Color.Hailpixel

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

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

3. Colorsafe

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

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

4. Paletton

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

После выбора подходящих вариантов расцветки можно скачать палитру в удобном формате (PNG, PDF, SCSS, CSS) или скопировать URL-адрес.

5. Adobe Color CC

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

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

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

6. Colorhunt

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

7. Galactic.Ink

Сервис подойдет продвинутым пользователям, так как имеет широкий интерфейс и профессиональные инструменты для разработки комбинаций. Можно выбрать различные цветовые схемы, модели и типы фона сайта. После завершения подбора сочетания доступно скачивание результата в Photoshop или Illustrator.

8. Colrd

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

Сервис имеет два раздела: «Обнаружить» и «Создавать». В первом представлены фото и иллюстрации с их цветовыми схемами. А во втором — интерфейс генератора, в котором можно сделать как один цвет, так и палитру или градиент.

9. Sipapp

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

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

Для сохранения схем можно использовать онлайн-конвертер, позволяющий перевести комбинации в 24 формата.

10. Flatuicolors 

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

Заключение

Чтобы выбрать фирменные цвета для своего бренда, не обязательно прибегать к помощи дизайнеров. С помощью современных инструментов любой пользователь может сделать цветовую схему сам всего за несколько минут. Но с чего начать? Разработайте логотип, который станет отправной точкой в выборе фирменного стиля компании. С онлайн-генератором Турболого процесс создания эмблемы займет не более 20 минут. А после разработки логотипа можно приступать к выбору остальных составляющих фирменного стиля — расцветке, стилю шрифтов и названию.

Редактор блога и специалист по контент-маркетингу в Turbologo. Статьи Виктории содержат полезные советы о маркетинге, создании бренда и продвижении его в Интернете.

12 лучших веб-приложений для создания цветовых схем для дизайнеров

Инструменты Джейк Рошело • 11 сентября 2017 г. • 6 минут ПРОЧИТАТЬ

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

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

Палетон

Paletton — это классика, о которой должны знать все веб-дизайнеры. Он существует уже много лет и до сих пор остается моим основным источником отличного комбо.

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

Paletton — надежный выбор, он отлично подходит для новичков, не разбирающихся в дизайне.

Конструктор шаблонов электронной почты в Интернете

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

Попробуйте бесплатноДругие продукты

Цвет Сейф

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

Они взяты прямо из книги правил W3, где вы выбираете цвета с более высоким контрастом, которые обеспечивают лучшую читаемость. Используя веб-приложение Color Safe, вы убедитесь, что ваш сайт соответствует рекомендациям WCAG и что ваш сайт полностью доступен для всех.

Adobe Color CC

Некоторым дизайнерам он известен как Adobe Kuler, но недавно он был переименован в Adobe Color CC.

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

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

Атмосфера

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

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

0to255

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

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

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

Плоские цвета пользовательского интерфейса

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

Он предоставляет несколько существующих плоских цветовых схем, из которых вы можете выбирать. Все они имеют функцию копирования, поэтому вы можете копировать / вставлять HEX-коды прямо в Photoshop или в свою таблицу стилей CSS.

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

Pictaculous

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

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

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

Цветовая палитра

Color Supply невероятно уникален, так как это многогранный палитра цветов. Вы выбираете один основной цвет в цветовом круге и выбираете стиль (дополнительный, триадный, квадратный и т. Д.).

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

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

Охлаждающие устройства

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

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

А если вы просто ищете вдохновения, загляните на страницу исследования, полную отличных цветовых идей.

Цвета материалов

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

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

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

Генератор палитры

Онлайн-приложение «Генератор палитры» работает так же, как и упомянутый ранее сайт Pictaculous. За исключением этого веб-приложения, вы можете загрузить несколько изображений, чтобы сравнить / сопоставить различия.

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

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

Палитра цветов

И последнее, но не менее важное — палитра цветов, созданная Dixon & Moe. Этот бесплатный инструмент позволяет выбирать цвета и обновлять существующие цветовые схемы с использованием полной информации HEX, HSL и RGB.

Вы просто выбираете цвета в селекторе цветов, а все остальное делает веб-приложение.

Это особенно удобно в Интернете, поскольку все цветовые схемы можно экспортировать как необработанный код CSS или Sass. Отличный инструмент для всех веб-дизайнеров.

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

Нравится то, что вы читаете? Подпишитесь на наши главные новости.

Лучший бесплатный генератор цветовых палитр 🎨- Готовы к использованию или сгенерировать свои собственные! 🤘 | по ThemeSelection | Muzli

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

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

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

Изображение предоставлено: https: //in.pinterest.com/

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

Что такое генератор цветовой палитры?

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

• Логотип
• Полная идентичность бренда
• Дизайн веб-сайта
• Мобильный apps
• Инфографика

Преимущества:

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

В основном есть 4 типа:

• Дополнительные : Дополнительные палитры состоят из цветов, противоположных друг другу в цветовом круге.
• Монохроматический : Монохромные цветовые палитры — это те палитры, которые вы создаете с использованием разных оттенков одного цвета. Их довольно легко сделать. Их обычно используют многие популярные бренды.
• Triadic : Палитры Triadic состоят из трех основных цветов. Эти цветовые палитры лучше всего подходят для создания четко видимого контраста в дизайне.
• Аналог : Аналогичные палитры состоят из цветов, близких друг к другу на цветовом круге. Если вы выберете основной цвет, то цвета рядом с ним можно будет выбрать как второстепенные цвета для этого типа палитр.

Чем это полезно для разработчиков и дизайнеров? 🧐

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

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

1. Coolors: создавайте идеальную палитру или вдохновляйтесь тысячами красивых цветовых схем.

Coolors позволяет вам организовывать ваши палитры в проекты или коллекции. Здесь их можно найти еще быстрее и проще. Вы можете легко создавать палитры, содержащие меньше или больше пяти цветов. С помощью Collage Maker вы также можете создавать красивые коллажи из вашей фотографии и извлеченной палитры. Есть несколько удивительных стилей, которые могут использовать дизайнеры. Вы также можете создать свой градиент с помощью Gradient Maker.

2. Цвета Muzli: Создавайте красивые цветовые схемы, которые работают.

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

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

от InVision

3. Цвета и шрифты: тщательно подобранная библиотека цветов, шрифтов и ресурсов

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

Майк Андреуцца

4.Цветовые коды HTML: получение цветовых кодов HTML, шестнадцатеричных цветовых кодов, значений RGB и HSL с помощью палитры цветов, цветовой диаграммы и названий цветов HTML.

Цветовые коды HTML — это палитра цветов, которая дает вам HEX, RGB и HSL коды, цветовые диаграммы для поиска идеальных комбинаций градиентов, список всех названий цветов HTML и даже сборник руководств по HTML и CSS. Это определенно полезный ресурс, который будет всегда под рукой при проектировании!

5. Color Hunt: бесплатная и открытая платформа для вдохновения цветов с тысячами модных вручную подобранных цветовых палитр

Color Hunt — это бесплатная и открытая платформа для вдохновения цветов с тысячами модных цветовых палитр, подобранных вручную.Color Hunt предлагает тысячи цветовых схем для самых разных целей дизайна и искусства. Цветовые палитры полезны для графических дизайнеров, художников, иллюстраторов, веб-разработчиков, модельеров, маркетологов, дизайнеров интерьера и т. Д. Это действительно помогает получить вдохновение от цвета и найти идеальную палитру для своих проектов. Любой желающий может сохранять свои любимые палитры, управлять своей личной коллекцией и иметь быстрый доступ для копирования цветовых кодов.

6. Список палитр: выберите 2 цвета, которые вам нравятся, и инструмент сгенерирует для вас тысячи палитр.

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

7. Плоские цвета пользовательского интерфейса: красивый набор цветовых палитр в различных вариантах

https://medium.com/r/?url=https%3A%2F%2Fcolorsinspo.com%2F

Flat UI Colors 2 — это новейшая версия. Это лучше, чем когда-либо прежде. На самой домашней странице вы найдете 14 различных наборов цветовых палитр, от британских до индийских и других.Он также имеет еще 13 цветовых палитр. Благодаря сотрудничеству с 13 дизайнерами со всего мира, по вашей команде доступен общий набор из 280 цветов для копирования / вставки для вашего следующего проекта, дизайна или презентации. В каждой цветовой палитре вы получите около 20 профессиональных цветов, подобранных для вас. Чтобы получить его HEX-код, все, что вам нужно сделать, это нажать «копировать», и все готово. Вы также можете изменить формат экспорта с HEX на RGBA или RGB

8. Colorsinspo: универсальный ресурс для поиска всей информации о цветах

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

9. Colorswall: место для хранения ваших цветовых палитр и создания палитры одним щелчком мыши.

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

10. Счастливые оттенки: тщательно подобранные цвета в контексте.

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

Автор: Маккензи Чайлд

11. Генератор палитры: создавайте новую цветовую палитру при каждом нажатии клавиши пробела.

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

13. Sipapp: Sip Color Picker для Mac. Лучший способ собрать и упорядочить цвета.

Sipapp — лучший инструмент для сбора, систематизации и обмена цветами. Sip — потрясающее приложение, которое отлично работает на iPhone и Mac. Это приложение позволяет вам очень быстро создавать цветовые схемы из изображений, а затем сохранять, систематизировать и совместно использовать созданные вами палитры.

14. Eva Design: Deep Learning Color Generator

Разделенная на 5 столбцов разных цветов, Eva Design System дает вам большой выбор, когда дело доходит до цветов. В каждом столбце можно найти до 9 различных оттенков выбранного цвета, от светлого до темного. Завершив настройку цветов, вы можете экспортировать все схемы в формате JPEG или JSON. Он также доступен для библиотек компонентов Sketch и Figma на основе Eva Design System.

15. Adobe Color: создание цветовых палитр, извлечение градиентов из изображений и т. Д.

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

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

16. Colorbox: бесплатный веб-сайт для создания набора цветов

17. Color Blender: инструмент, который показывает средние цвета между двумя цветами.

Color Blender не является обычным генератором цветовой палитры, поскольку он генерирует средние точки между двумя цветами. цвета. Результат можно использовать как цветовую палитру для любого дизайна. Вы можете установить от 1 до 10 средних точек и получить цвета в формате RGB или шестнадцатеричном формате.Color Blender был создан Эриком Мейером, одним из отцов-основателей адаптивного веб-дизайна.

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

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

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

21. Colorhexpicker: Инструмент для получения шестнадцатеричного кода вместе с названием цвета.

С Color Hex Picker вы получите шестнадцатеричный код и значение RGB вместе с названием цвета любого цвета из любого изображения.

Дизайнер может найти идеальный цвет HTML с помощью онлайн-палитры Image color picker . Все, что вам нужно сделать, это выбрать понравившийся цвет и щелкнуть по нему, чтобы получить цветовой код в форматах HEX, RGB, HSL и CMYK. Щелкните изображение и перетащите его, чтобы использовать лупу.С помощью этого инструмента вы получите цветовую палитру, соответствующую вашему изображению. Вы можете создавать цветовые комбинации за секунды. Просто поместите свою фотографию на страницу или откройте ее с помощью кнопки «Обзор». Вы также можете загрузить изображение с URL-адреса.

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

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

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

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

25. Дизайн в градациях серого: Генератор цветовой палитры на основе яркости:

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

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

27. Материал: официальный инструмент цветовой палитры материалов Google.

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

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

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

Material Design Инструмент цвета позволяет быстро и легко создавать или импортировать набор цветов для создания собственной идеальной темы из полностью настраиваемых палитр.После того, как вы создали свою тему, присвойте ей имена и палитры, а затем быстро экспортируйте их в любой интерфейсный фреймворк. В настоящее время экспорт включает JSON и AngularJS Material design с планами поддержки Materialize, CSS, Polymer и многого другого!

30. Цветовое пространство: создавайте красивые цветовые палитры из одного цвета.

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

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

32. Веб-градиенты: бесплатный веб-сайт для поиска хороших градиентов CSS.

Веб-градиенты — это бесплатная коллекция из 180 линейных градиентов, которые вы можете использовать в качестве фона контента в любой части вашего веб-сайта. Скопируйте кроссбраузерный код CSS3 и сразу же используйте его! Мы также подготовили файл.PNG версия каждого градиента. В качестве бонуса есть пакеты для Sketch и Photoshop.

33. Gradienta: чистый код CSS, загрузка JPG, открытый исходный код

Gradienta позволяет разработчикам использовать сверхлегкие, красочные, адаптивные фоны для своих личных и коммерческих проектов. Его можно использовать бесплатно, с открытым исходным кодом и вообще не требует ссылки или указания авторства. Все эти градиенты доступны в виде кодов CSS, изображений SVG и JPG. Если вы дизайнер, вы можете использовать в своих проектах изображения SVG или JPG.Таким образом, разработчик может использовать все версии CSS / SVG / JPG (даже коды SVG) на веб-сайте или в приложении.

34. Градиенты пользовательского интерфейса: красивые цветовые градиенты для дизайна и кода

35. Цвета бренда: самая большая коллекция официальных цветовых кодов бренда около

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

В ней более 600 фирменных цветов, и коллекция продолжает расти. Кроме того, известные издатели, такие как Smash Magazine и Tuts +, неоднократно рекламировали их.

36. Палитры брендов: цветовые коды и палитры логотипов

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

Генератор 14 красивых цветовых палитр для вашего следующего проекта

Правильная цветовая гамма может творить чудеса с вашим брендом.

И я не шучу. Есть причина, по которой крупные бренды, такие как Google, Uber и Dropbox, на протяжении многих лет придерживаются единой цветовой схемы. Вы не увидите, что на их веб-сайтах есть страницы, которые не соответствуют цветам их бренда.

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

Но сначала для тех из вас, кто не знает, давайте разберемся с основами.

Какая цветовая палитра?

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

• Логотип
• Полная идентичность бренда
• Инфографика
• Дизайн веб-сайтов
• Мобильные приложения

Помогает донести сообщение бренда с помощью соответствующих цветов.

Преимущества выбора правильных цветов для вашего бренда

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

Придает значимость вашему бренду

Знаете ли вы, что каждый цвет имеет значение?

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

Помогает завоевать доверие клиентов

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

Делает бренд узнаваемым

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

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

Охлаждающие устройства

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

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

Adobe Color CC

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

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

BrandColors

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

На данный момент у них более 600 фирменных цветов, и коллекция продолжает расти. Так что известные издатели, такие как Smash Magazine и Tuts +, снова и снова рекламируют их.

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

Хрома

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

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

ColorDrop

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

ColRD

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

КОПАСО

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

ColorMind

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

Color Hunt

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

Colordot

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

Цветовой код

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

Поддон

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

Система дизайна Eva

Разделенная на 5 столбцов разных цветов, система дизайна Eva Design дает вам большой выбор, когда дело доходит до цветов. В каждом столбце можно найти до 9 различных оттенков выбранного цвета, от светлого до темного. Завершив настройку цветов, вы можете экспортировать все схемы в формате JPEG или JSON.

Плоские цвета пользовательского интерфейса 2

Их новейшая версия и обновление под названием Flat UI Colors 2 лучше, чем когда-либо прежде.На самой домашней странице вы найдете 14 различных наборов цветовых палитр, от британских до индийских и других.

В каждой цветовой палитре вы получите около 20 профессиональных цветов, подобранных для вас. Чтобы получить его HEX-код, все, что вам нужно сделать, это нажать «скопировать», и все готово. Вы также можете изменить формат экспорта с HEX на RGB или RGBA.

Заключение

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

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

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

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

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

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

Какая цветовая схема сайта лучшая?

1.Design Seeds

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

2.Цветовой баланс

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

3.Цвета

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

4.Процент

5.Color Snap

Snap it — это бесплатно загружаемое расширение Google Chrome от Sherwin-Williams, которое превращает любое изображение, которое вы найдете в Интернете, в цветовую схему.Пользоваться им довольно просто и быстро.

Теория цвета и цветовые палитры: все, что вам следует знать

Закройте глаза и подумайте о синем цвете. Это вызывает у вас в голове образ счастливого неба? А что насчет зеленого? Вы чувствуете тепло и прикосновение мягкой свежескошенной травы?

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

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

Итак, давайте начнем и узнаем, как можно раскрасить мир вокруг нас!

Что такое теория цвета?

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

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

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

Что такое цветовое колесо?

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

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

Почему, спросите вы?

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

Кроме того, если вы смешиваете первичный и вторичный цвета, вы получаете третичные цвета, такие как пурпурный или более темный зеленый оттенок.Вот почему большинство цветовых кругов основано на цветовом круге RYB.

Источник: 99designs

7 важных терминов по цвету, которые вы должны знать

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

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

1.Оттенок: обозначает цвет объекта. Например, он черный или синий?

2. Насыщенность: представляет силу или слабость используемого цвета.

3. Цветность: определяет чистоту цвета и то, сколько черного, белого и серого добавлено или отсутствует в нем.

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

5. Тон: вы можете добавить оттенок к цвету, добавив серый, чтобы улучшить его.

6. Оттенок: можно добавить оттенок к оттенку, смешав его с белым.

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

4 Основные типы цветовых палитр

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

1. Монохроматические цветовые палитры

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

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

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

2. Аналогичные цветовые палитры

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

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

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

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

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

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

4. Триадные цветовые палитры

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

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

10 широко используемых цветов и их значения

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

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

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

Итак, как вы решаете, какие цвета использовать? Для этого вам нужно знать значения и чувства, связанные с разными цветами. Вот список наиболее распространенных цветов и их значения:

• Желтый: радость, позитивная энергия, изюминка
• Черный: тайна, сила, грация, зрелость
• Синий: безмятежный, уверенный, спокойствие
• Красный: страсть, энергия, сила
• Зеленый: свежесть, рост, естественность, безопасность
• Белый: чистота, чистота, совершенство, изысканность
• Фиолетовый: роялти, роскошный, креативный
• Розовый: женственный, безопасный, восхитительный
• Оранжевый: креативность, интеллект, инициатива, энтузиазм
• Серый: элегантность, неуверенность

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

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

3 инструмента генератора цветов для улучшения вашей цветовой игры

Итак, вы знаете, что такое цветовые круги и цветовые палитры, но как создать свою собственную цветовую палитру?

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

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

1. Color Hunt

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

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

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

Источник: Color Hunt

2. Цвета Muzli

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

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

В любом случае результат будет отличным и ярким!

Источник: Muzli Colors

3. Colorbox

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

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

Источник: ColorBox от Lyft Design

Ключевые выводы

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

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

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

После этого позвольте краскам раскрасить вашу историю!

20 популярных цветовых схем веб-сайтов на 2021 год

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

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

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

• Что такое цветовая схема веб-сайта?
• Значение цветовых схем веб-сайтов
• Примеры великолепных цветовых палитр для веб-сайтов

Что такое цветовая схема веб-сайта?

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

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

Значение цветовых схем веб-сайта

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

Настройка настроения

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

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

Акцент на правильных элементах

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

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

Повышение узнаваемости бренда

Веб-сайт — это онлайн-представление бренда, то есть он должен соответствовать его идентичности. Цвета логотипа отражают характер вашей компании точно так же, как цвета вашего веб-сайта.

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

Источник: Coca-Cola

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

Примеры потрясающих цветовых палитр для веб-сайтов

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

Элегантность в темных тонах

Источник: Apple

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

Вот пример шаблона веб-сайта в похожем стиле. Минималистичный дизайн поддерживает и усиливает все нужные элементы.

Использовать шаблон

Оттенки фиолетового

Источник: Mozilla

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

Небесно-голубой и желтый

Источник: Moz

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

Дополнительные детали на белом

Источник: Cloudflare

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

Теплая пастель и нильский синий

Источник: Zendesk

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

Красный Энергетик

Источник: PC Gamer

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

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

Использовать шаблон

Воздушная смелость

Источник: Clarins

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

Минимальный зеленый

Источник: Evernote

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

Игривый розовый

Источник: Benefit Cosmetics

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

Неоновое безумие

Источник: Urban Decay

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

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

Использовать шаблон

Черно-белая мечта

Источник: Анна Висинцин

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

Позолоченная роскошь

Источник: Guerlain

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

Зарезервированный и профессиональный

Источник: Lucas Group

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

Violet Vibrancy

Фиолетовый

Источник: Moorhouse

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

Пышно-розовые акценты

Источник: Just Creative

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

землистые оттенки

Источник: ThoughtCo

Компания ThoughtCo использовала несколько естественных тонов для создания успокаивающей, заземляющей атмосферы на своем веб-сайте. Минималистичный дизайн, лишенный беспорядка, идеально подходит для образовательной платформы, такой как ХотяКо. Малиновый также иногда можно увидеть, поскольку он выделяет важные сообщения и кнопки. Если вы ищете веб-сайт с похожими землистыми оттенками, ознакомьтесь с этим шаблоном.

Использовать шаблон

Серебряный лунный свет

Источник: Noctu

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

Бежево-блеклый

Источник: Project Pico

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

Цветная щепотка

Источник: Sweet Punk

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

Розовый Ретро

Источник: Великолепие в траве

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

Заключение

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

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

Только начали работу со своим сайтом? Ознакомьтесь с нашими готовыми шаблонами веб-сайтов, которые помогут вам создать свой сайт за считанные минуты.

Создать сейчас

Теория цвета и цветовые палитры — Полное руководство [2022]

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

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

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

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

Вот что мы рассмотрим:

1. Что такое теория цвета?
2. Введение в цветовое колесо
3. Важность цветовой гармонии
4. Аддитивные и субтрактивные цветовые модели
5. Введение в цветовые палитры
6. Какие бывают типы цветовых палитр?
7. Как выбрать цветовую палитру
8. Лучшие онлайн-инструменты для выбора цветовой палитры
9. Заключительные мысли

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

1. Что такое теория цвета?

Давайте начнем с основ: что такое теория цвета?

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

Современная теория цвета в значительной степени основана на цветовом круге Исаака Ньютона, который он создал еще в 1666 году. Базовое цветовое колесо отображает три категории цвета; основные цвета, вторичные цвета и третичные цвета. Если вы помните, как узнавали об этом на уроке искусства, молодец — вы уже постигли основы теории цвета!

Давайте кратко рассмотрим, что влекут за собой эти цветовые категории:

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

2. Знакомство с цветовым кругом

Вы можете подумать: «Существует более 12 цветов.«Вы правы — и все они могут быть найдены на более продвинутой версии цветового круга.

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

Оттенок

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

Оттенок

Оттенок означает, сколько черного добавлено в оттенок. Таким образом, оттенок затемняет цвет.

Оттенок

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

Тон

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

Цветовая температура

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

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

3. Важность цветовой гармонии

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

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

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

4.Аддитивные и вычитающие цветовые модели

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

Аддитивная цветовая модель (RGB)

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

Субтрактивная цветовая модель (CMYK)

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

5. Введение в цветовые палитры

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

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

Хотя цветовые палитры насчитывают тысячи лет, цветовые палитры обычно используются в цифровом дизайне и представлены как комбинация HEX-кодов. Шестнадцатеричные коды сообщают компьютеру, какой цвет вы хотите отображать, используя шестнадцатеричные значения.Еще в 90-х годах большинство цифровых цветовых палитр включало только восемь цветов. Теперь дизайнеры могут выбирать из множества оттенков и оттенков цветового круга.

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

6. Какие бывают типы цветовых палитр?

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

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

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

Аналог

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

Дополнительные

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

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

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

Triadic

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

Tetradic

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

7. Как выбрать цветовую палитру

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

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

Изучите свою аудиторию

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

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

Чтобы узнать больше о том, как стать лучшим дизайнером, ознакомьтесь с нашей статьей о том, как избежать 10 наиболее распространенных ошибок дизайна пользовательского интерфейса!

Подумайте о психологии цвета

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

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

• Оранжевый — энергичный и теплый.Некоторые общие ассоциации с оранжевым включают творчество, энтузиазм, беззаботность и доступность.
• Красный — цвет крови, поэтому он часто ассоциируется с энергией, войной, опасностью и властью, а также страстью, желанием и любовью. Некоторые общие ассоциации с красным включают действие, приключения, агрессию и азарт.
• Желтый пробуждает позитив, молодость, радость, игривость, солнечный свет и тепло.
• Розовый пробуждает чувства невинности и нежности, благодарности, романтики, мягкости и признательности.
• Blue считается авторитетным, надежным и заслуживающим доверия. Общие ассоциации с синим включают спокойствие, безмятежность, уверенность, достоинство и безопасность.
• Зеленый — цвет природы. Он символизирует рост, свежесть, безмятежность, деньги, здоровье и исцеление.
• Черный олицетворяет силу, элегантность и авторитет. Общие ассоциации с черным также включают класс, различие, формальность, загадочность, секретность и серьезность.

Выбирайте цвета с умом

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

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

Не экономьте на контрасте

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

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

Придерживайтесь условных обозначений пользовательского интерфейса

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

Некоторые общие цветовые обозначения дизайна пользовательского интерфейса включают:

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

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

Получите отзыв

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

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

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

Ниже мы собрали три лучших инструмента для создания цветовых палитр в Интернете.Сделайте ваш выбор!

Adobe Color

Будучи «источником хлеба с маслом» для всех цифровых креативов, Adobe Color предлагает практически любую цветовую палитру. По сравнению с другими генераторами цветовых схем Adobe Color намного более комплексный, поэтому не выбирайте его, если вам нужно что-то быстрое и простое. Среди ключевых функций Adobe Colors — генератор цветовой палитры, который извлекает цвета из загружаемых вами изображений.

Coolors

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

Справочник цветов Adobe Illustrator

Справочник цветов Adobe Illustrator выделяется своей популярной функцией «Справочник цветов».