Потому что цвета – это красиво. Создание универсальной цветовой палитры для IBM
Создание привлекательной и доступной палитры для брендов, продуктов и опыта.
В течение последних нескольких лет команды IBM Carbon Design System и Brand Experience работали над созданием универсальной цветовой палитры. Вторая итерация, которая должна начаться с октябрьского минорного релиза Carbon, отвечает всем требованиям доступности продуктового дизайна.
Этот циклический GIF подчеркивает, насколько тонкими являются изменения в последней версии цветовой палитры IBM.
Сравнение цветовых палитр IBM V1 и V2Команда, возглавляемая Sadek Bazaraa, сначала соединила существующую палитру с палитрой, выпущенной с новым языком дизайна IBM. Хотя она была создана с учетом доступности, в ходе ее тестирования, мы обнаружили потенциальные улучшения. У нас было ограниченное количество доступных комбинаций цветов текста и фона. Кроме того, некоторые коэффициенты контрастности семейств цветов потерпели неудачу на одну сотую пункта.
Ниже я расскажу, как мы настроили палитру для достижения доступности продукта.
Поиск нюансов в бинарном мире
В крупных организациях, таких как IBM, команды брендов уже давно отвечают за создание и поддержку цветовых палитр. Поскольку все больше и больше людей узнают о бренде через программы и сайты, ситуация начала меняться. Цифровые продукты стали средой, в которой цвета, а также гарнитуры, сетки и другие элементы подвергаются стресс-тестированию.
Даже незначительное различие в контрасте может привести к тому, что интерфейс не пройдет проверку доступности. Клиенты IBM, такие как правительственные организации и образовательные учреждения, уверенны, что IBM будет придерживаться стандартов WCAG. Поэтому мы делаем доступность главным приоритетом нашей цветовой палитры. Это помогает завоевывать доверие наших клиентов и пользователей, и снижает риск судебных исков.
Давайте посмотрим, как выглядит цветовая палитра функциональной дизайн-системы.
Серые оттенки с более светлыми и темными тонами, и меньшим количеством полутонов
Нейтральные серые тона имеют важное значение для интерфейса.
Они обеспечивают структуру, обозначают границы и устанавливают иерархию.
Когда мы проектируем интерфейсы, обычно приходится достигать крайностей: самых темных и самых светлых оттенков серого. Максимизация контрастности является ключевым фактором для удобочитаемости и концентрации внимания пользователя. Добавляя достаточное количество оттенков серого в обоих концах спектра, мы предотвращаем появление мутных средних тонов с низким контрастом. Это особенно важно для корпоративных программных продуктов, которые часто могут представлять собой беспорядок в виде контейнеров внутри других контейнеров, панелей, расположенных над панелями, и бесконечных строк и столбцов таблиц данных!
На графике ниже показано, как контрастность между серыми оттенками резко падает. Когда Гауссова кривая становится тоньше и выше, светлые серые оттенки становятся светлее, а темные серые оттенки – темнее
Коэффициент контраста между серыми оттенками попадает на слегка смещенную Гауссову кривую
Скорректированный ряд показывает более светлые серые и более темные серые оттенкиВоспринимаемая симметрия темной и светлой темы
Обратите внимание, что Гауссова кривая не идеально симметрична. Правая сторона круче и заканчивается выше, предполагая, что шаги между темными серыми оттенками больше, чем между светлыми серыми. Это должно учитывать тот факт, что наши глаза лучше различают более светлые оттенки, чем более темные. Чтобы обеспечить воспринимаемую симметрию темной и светлой темы, коэффициент контрастности между темными серыми оттенками должен быть немного выше.
Видите, как оттенки 10–20 сильнее отличаются, хотя обе пары имеют контрастность 1,2: 1?Скорректированные шаги еще далеки от идеала. До сих пор мы не нашли способа программно генерировать цвета путем ввода пользовательской кривой контрастности. Мне нравится ColorBox, но я мечтаю о мире, в котором мне больше не нужно вручную настраивать асимметрию между темными и светлыми серыми оттенками.
(Есть талантливые программисты, которые хотят создать небольшой веб-инструмент?)
Количество доступных цветов текста на фоне темы
Контраст является важной визуальной подсказкой для передачи иерархии текста и создания различий между заголовками, метками, абзацами и подписями под картинками. Учитывая, что текст в интерфейсах должен быть доступен, цветовая палитра должна предлагать достаточно доступных цветов для создания текстовой иерархии. В случае с Carbon достаточно означает пять оттенков, что составляет половину ряда.
Например, на сером фоне 10 все цвета 60–100 могут использоваться для текста с доступным коэффициентом контрастности ≥4,5: 1. Как правило, мы не рекомендуем чистый черный или чистый белый для текста, потому что чрезвычайно высокая контрастность фактически ухудшает читабельность.
До настройки палитры у нас было только четыре оттенка на сером фоне 90. Это ограничение заставило нас использовать курсив для вспомогательного текста в компоненте ввода текста.
Мы зарезервировали курсив для выделения текста и словарных терминов, поэтому использование его для вспомогательного текста нарушило намерения системы.
После настройки палитры вспомогательному тексту может быть назначен оттенок серый 60, текстовым меткам – серый 80, а вводимому пользователем тексту – серый 100. Для всех, кто интересуется дополнительными сведениями об этой работе, ознакомьтесь с этим тщательно документированным issue на GitHub .
Сравнение доступных цветов текста до и после обновления на сером фоне 90Средние тона должны иметь высокую насыщенность и быть доступными
Средние тона, как правило, следует использовать с осторожностью. Это основные моменты, призывы к действию. Это акцентные цвета и элементы брендинга в цифровом опыте. Они должны привлекать внимание и обеспечивать характер продукта.
Пример экрана продукта с использованием CarbonCarbon использует средние тона для основных кнопок, полос выделения на выбранных вкладках и индикаторов выполнения.
Это требует, чтобы цвет был доступен с коэффициентом контрастности к фону не менее 3: 1, в соответствии со стандартом WCGA 2.1 для значимых нетекстовых элементов.
Мы используем средние тона для цветных текстовых элементов, таких как ссылки и предупреждающие сообщения. Это требует, чтобы цвет был доступен с коэффициентом контрастности к фону 4,5: 1. Средние тона должны быть насыщенными, чтобы отличаться от серого текста.
Учитывайте исключения при переключении тем
Потребность в темных и светлых темах возросла и стала мейнстримом при создании цветовых систем. Для Carbon сложности связаны с темными темами. Реализация темной темы нашего компонента кнопки – это не простая инверсия фона и цвета текста. Когда вы просто меняете цвета и наносите темный текст на кнопки, расположенные на темном фоне, читаемость может ухудшиться, особенно в средних тонах. Белые метки кнопок соответствуют ожиданиям пользователей о ярком, напористом призыве к действию.
Это сжимает наши средние тона. Если фон кнопки будет ярче, белая метка не будет соответствовать коэффициенту контрастности 4.5: 1. А с более темной меткой кнопка не будет выделяться на фоне 3: 1.
Чтобы решить эту проблему, мы немного расширили самые темные и самые светлые диапазоны. Это дало средним тонам немного больше места для маневра, оставаясь доступным на всех фронтах. Опасность такого метода заключается в том, что крайние концы серых оттенков могут плохо воспроизводиться на некоторых мониторах, проекторах и принтерах. Нам нужна унифицированная палитра, и мы хотим предложить наиболее безопасные для использования в большинстве случаев цвета.
Перед настройкой все фоновые кнопки средних тонов чуть-чуть теряют соотношение контрастности 3: 1 для темы серый 90Когда все эти настройки собраны вместе, вы получаете надежную структуру для семьи серых оттенков. Интервалы соотношения контрастности между средними тонами и крайними концами спектра (которые являются фонами) должны удовлетворять следующим требованиям:
- Контраст между серым 60 и 90 имеет коэффициент контрастности минимум 3: 1.
- Контраст между серым 60 и 10 имеет коэффициент контрастности минимум 4,5: 1.
- Контраст между 50 и 90 имеет коэффициент контрастности минимум 4,5: 1.
- Контраст между 50 и 10 имеет коэффициент контрастности минимум 3: 1.
После значительных улучшений в оттенках серого мы применили один и тот же спектр яркости для всех остальных семейств цветов.
Все семейства цветов (ряды) подчиняются спектру яркости, настроенному с помощи нейтральных серых оттенков. Обязательно перейдите в полутоновую шкалу в Photoshop, что, по нашему опыту, является наиболее точным в этом преобразованииА что насчет визуализации данных?
Визуализация данных является стресс-тестом цветовой палитры, поскольку палитра должна обеспечивать множество отличающихся цветов, которые работают для различных видов дальтонизма.
Только то, что вам нужно
Слишком большое количество цветов может повредить пользовательскому опыту, а перегруженный дизайном продукт, имеющий большое количество опций, может привести к ошибкам. Противоречивый выбор цветов может создать путаницу и отвлечь пользователей от выполняемой работы. Плохо подобранные цвета могут создать сильное остаточное изображение при длительном взаимодействии с экраном.
IBM нанимает много начинающих профессионалов, которые ценят рекомендации и принимают ограничения. По-прежнему существует много устаревших продуктов с плохим юзабилити, и мы постоянно добавляем элементы, которые не соответствуют нашему языку дизайна.
Отдельные дизайнеры не просто проектируют интерфейсы. Они влияют на дорожные карты продуктов, отвечают на запросы клиентов и ежедневно работают с руководством.
Легко упустить нюансы деталей использования цвета и совершить ошибки. С точки зрения дизайн-системы, меньше вариантов цвета, препятствуют неправильному использованию и обеспечивают гармонию между продуктами.
Ограничение – не единственная причина, по которой мы сократили палитру со спектра радуги до нынешних семи оттенков. Решение было основано на философии бренда IBM, и здесь мы углубимся в историю, связанную с работой, которая привела нас к первоначальной палитре.
Эволюция цветовой палитры
IBM существует уже более века, а цвета, связанные с брендом, постоянно меняются. Вы можете легко обнаружить изменяющуюся технологию и замыслы дизайна, которые формируют каждую цветовую палитру.
Давайте рассмотрим сегодняшнюю палитру языка дизайна IBM.
Цветовые палитры IBM по годам слева направо: 1960, 2008, 2015, 2016, 2018, 2019Важно быть существенным
Мы очень любим машины IBM 1960-х годов. В прошлом смелые основные цвета покрывали аппаратное обеспечение IBM и определяли будущее бизнеса в эпоху, когда возможности вычислительной техники только начали раскрываться.
Позже, в попытке оживить дизайн в IBM, цветовые палитры снова и снова расширялись под влиянием основополагающей темы инклюзивности, омоложения и прогресса. Сегодня палитра резко сокращена, чтобы сосредоточиться на передаче точки зрения, которую IBM представляет:
Мы должны предположить, что все продукты будут физически связаны друг с другом, поэтому цвет и его применение должны учитывать нашу проблему в целом.
—IBM ID, Color Applications, Introduction, 1962
Быть существенным означает, что палитра была намеренно сделана минимальной. Существует всего 104 образца, которые разбиты на 10 семейств цветов, каждое из которых содержит 10 оттенков: черный и белый, один оттенок желтого и один оттенок оранжевого. Если вы исключите серые оттенки, в этой палитре будет всего 7 оттенков.
Меньшее количество оттенков делает палитру более удобной. Оно обеспечивает направление и четкую точку зрения, которая распространяется на огромную компанию, где дизайнеры все еще остаются дефицитным ресурсом.
Синий, как основной цвет
Синий остается основным цветом нашей палитры, чтобы отдать дань историческому прозвищу IBM, «Big Blue». Итак, первым мы выбрали синий цвет.
Семейство синих оттенков 2015 года немного смещается в сторону фиолетового в более светлом конце и сизого в более темном конце. В 2018–2019 годах синий цвет обновился, чтобы стать более насыщенным, чистым и яркимСемейство синих оттенков 2015 года немного смещается в сторону фиолетового в более светлом конце и сизого в более темном конце. В 2018–2019 годах синий цвет обновился, чтобы стать более насыщенным, чистым и ярким. Для некоторых пользователей новая палитра – неприятный опыт, особенно при просмотре в течение длительного периода времени.
Настраивая синий цвет для продуктов в 2019 году, мы знали, что нам нужно его немного переработать.
Несмотря на то, что палитра спроектирована для цифрового дизайна, в качестве основного варианта использования (для печати используется палитра Pantone), цвета извлекаются из окружающего нас мира, как природного, так и машинного.
Легкая гармония и масштаб
После того, как мы выбрали синий, он стал центральной осью для других оттенков. В этой палитре за синим следуют красные и зеленые оттенки. Они равноудалены от синего в каждую сторону. Любой цвет за пределами этого диапазона был исключен из-за дисгармонии, которую он создавал. Результатом является выбор оттенков, тесно связанных с синим.
Синий цвет был выбран первым. Все остальные оттенки находятся в акселях для красного и зеленогоС небольшим количеством синего в каждом оттенке и меньшим количеством оттенков в палитре легче объединять цвета и оставаться верным бренду. Создавать гармонию увлекательно, и руководство по использованию палитры может быть значительно упрощено.
Влияние новой палитры очевидно. Почти каждая комбинация цветов выглядит свежо и современно. Она мгновенно нашла поклонников в канале иллюстрации в Slack. Просто посмотрите страницу галереи IBM Design, или эти шоты сообщества на Dribbble, или эти великолепные иконки приложений, спроектированные Peter Garvin.
Функционально и доступно
На этом этапе мы возвращаемся к совместной работе между командами дизайн-системы и языка дизайна. Это сотрудничество стало возможным благодаря культуре IBM, основанной на взаимном уважении к опыту каждого дизайнера. В конце концов, цветовая палитра, созданная с учетом особенностей и рекомендаций, обеспечивающих доступность, в большей степени выражает философию бренда.
С последним релизом мы наконец-то достигли уверенной, стабильной палитры, которая поддерживает восприятие бренда на всех фронтах.
Вывод
Это конец истории создания нашей цветовой палитры. Я многому научился, создавая ее и надеюсь, что вы тоже узнали что-то новое из этой статьи.
Настроить сто четыре оттенка цветов – все равно что настроить расстояния между сотнями костяшек домино – ручной, утомительный и трудоемкий процесс.
Но когда палитра готова и логика использования надежно установлена, становится удивительно, насколько она упрощает работу.
Я верю, что многие дизайнеры, как и я, любят и ненавидят цвета. Я призываю вас всех попробовать приручить этого зверя. Потому что, в конце концов, цвета того стоят. Цвета прекрасны.
Спасибо Connor Leech и Hayley Hughes.
Как создать красивую цветовую палитру / Хабр
Несмотря на то, что подбор хороших цветов — это искусство, существует несколько трюков, позволяющих упростить выбор красивого цвета. Эта статья состоит из двух частей: в первой я расскажу, что делает палитру хорошей, а во второй выведу формулу, которую можно использовать для подбора красивой палитры.
Примечание: это далеко не единственный способ выбора хороших цветов, скорее, набор эвристик, которые я освоил самостоятельно. Надеюсь, что это поможет вам подбирать правильные цвета для вашего веб-сайта/приложения/игры.
Цветовые палитры и контраст
Для начала нам нужно сказать, что цвета не существуют в изоляции.
Когда мы говорим про красивый цвет, то это не означает, что он светлый или тёмный, насыщенный или выцветший. Когда мы говорим о подборе цветов, то должны думать не столько об отдельных цветах, сколько о наборах цветов, или цветовых палитрах.
Слева направо: Super Mario Run, Monument Valley, Alto’s Odyssey, Lara Croft Go
Когда мы думаем о наборах цветов, то должны думать об их взаимодействии: должны ли какие-то из них выделяться или смешиваться друг с другом? Это называется контрастом.
Процесс выбора красивых цветов часто сводится к подбору правильных контрастов для вашего дизайна.
Красивость цветов зависит от того, как они работают друг с другом в вашем дизайне. Но когда дело доходит до контраста цветов, но он может образовываться различными способами:
Яркость (светлые/тёмные)
Яркость — это тот тип контраста, который легко визуализировать. На селекторе цветов HSB это соответствует движению вдоль вертикальной оси:
Яркость
В общем случае мы можем просто увеличивать величину контраста между двумя цветами, просто повышая разность их яркости.
Контраст яркости
Хоть это и легко сделать, но этого не достаточно для создания качественных палитр. Цвета варьируются только по величине чёрного и белого и просто не так интересны, как цвета, взаимодействующие в большем количестве измерений. Что приводит нас к…
Тональному контрасту
Тональный контраст мы воспринимаем с точки зрения оттенков (hues) цветов и уровней насыщенности (saturation). Почти как и в случае с яркостью, увеличение разности оттенков или насыщенности в общем случае повышает величину контраста между цветами.
Контраст оттенков
Насыщенность (горизонтальная ось HSB) и контраст насыщенности
Но даже так эти значения по отдельности не могут нарисовать целую картину. Мы по-прежнему можем выбрать цвета, которые, несмотря на отличия в оттенках или насыщенности, всё равно имеют плохой контраст.
Разные оттенки и плохой контраст
Разная насыщенность и плохой контраст
Что здесь происходит? Ответ заключается в том, что различные оттенки имеют разные внутренние тональные значения. Многим людям (в том числе и мне) сложно представить, какие тональные значения могут принимать разные оттенки. И это подводит нас к моему любимому трюку…
Хак с оттенками серого
Если отобразить цвета в оттенках серого, то яркость получившегося серого может служить хорошим показателем значения тонов разных цветов. Но он полезен не только этим: это важно, если вы создаёте дизайн с учётом потребностей людей с ограниченными возможностями. Это простой способ визуализации величины контраста, существующей в дизайне независимо от оттенка.
Внутренние тональные значения для разных оттенков
Давайте посмотрим, как эти тональные значения выглядят в селекторе цветов HSB. Также заметьте, как изменения тональных значений изменяется в спектре для каждого оттенка (показано в самом правом столбце):
Если мы взглянем на предыдущие примеры, но теперь в оттенках серого, то намного проще сможем сказать, какие цвета имеют высокий и низкий контраст.
Контраст насыщенности: высокий контраст наверху, плохой — внизу.
Контраст оттенков: высокий контраст наверху, плохой — внизу.
Давайте ещё раз взглянем на показанные выше игры, но теперь в градациях серого.
Можно легко заметить, что передний план хорошо выделяется на фоне, интерактивные элементы сильно контрастируют с неинтерактивными, и что если бы игра была в градациях серого, она всё равно оставалась бы играбельной. Самый важный вывод из этого:
Часто и намеренно используйте хак с градациями серого, чтобы визуализировать контрасты, существующие в вашем дизайне.
Красивые контрасты ведут к созданию красивых цветовых палитр, поэтому я представляю вам…
Формулу для выбора красивых цветовых палитр
Давайте применим сделанный выше анализ, но в обратном порядке: начнём с дизайна в градациях серого, а затем перейдём к подбору соответствующих цветов.
1: Определить, где нам нужен контраст
Создайте каркас своего дизайна, а затем решите, в каких областях каркаса нужно больше контраста, а в каких — меньше.
2: Раскрасить дизайн оттенками серого
Попробуйте раскрасить каркас дизайна только оттенками серого. Сделайте так, чтобы области, требующие большего контраста, имели наибольшую разность яркости. Этот шаг нужно делать в конечном разрешении дизайна. Небольшие элементы дизайна (например, логотипы и иконки приложений) требуют особо высокого контраста для выделение мелких элементов.
3: Выбрать базовые оттенки цветов
Выберите базовые оттенки цветов, с которыми хотите работать. Это субъективный этап, и на нём для выбора можно использовать инструменты наподобие ShapeFactory’s Pigment или Adobe Color CC. Забавный факт: некоторые сочетания цветов настолько популярны, что получили статус тропа.
4: Настройте цвета, чтобы иметь соответствующие тональные значения
Подобрав оттенки, найдите интервал тональных значений, при котором оттенок примерно соответствует значению тона серого из нарисованного ранее эскиза. Экспериментируя со значениями яркости и насыщенности, переключайтесь между режимами настоящих цветов и оттенков серого. Ваша задача — получить цветовую палитру, которая при отображении в оттенках соответствует дизайну из этапа 2.
Пример 1
(1) Каркас и (2) предпочтительные контрасты в оттенках серого
(3) Выбранные базовые цвета
Если бы мы хотели прийти к показанной выше цветовой палитре, то должны были бы найти, какие области каждого цвета примерно соответствуют дизайну в градациях серого.
Соответствующие области тональных значений для базовых цветов
Теперь мы можем подбирать сочетания цветов из любого участка этих областей:
(4) Несколько вариантов цветовых палитр
Пример 2
Вот как выглядел этот процесс при разработке моего приложения Overlink:
Процесс слева направо, сверху вниз: каркас, градации серого, базовые цвета, окончательный дизайн
Поздравляю! Надеюсь, это поможет вам выбирать наборы цветов, контрастирующие там, где это нужно, смешивающиеся там, где это не нужно, и в целом выглядящие красиво.
Контраст сам по себе — это не самый решающий аспект для создания отличного дизайна, но он играет важную роль в выборе красивых палитр.
16 отличных цветовых решений сайтов
В идеале цветовая палитра сайта или лендинга должна отражать ценности, убеждения и цели компании. Яркие цвета могут указывать на желание бренда сделать свой дизайн запоминающимся, в то время как приглушенные оттенки придают ему более утонченный образ.
Цветовая палитра — наравне с макетом и типографикой — формирует первое впечатление о дизайне, и, если все подобрано идеально, может положительно влиять на оценку компании в целом.
Однако с учетом тысяч возможных цветовых сочетаний выбрать правильную и подходящую именно вам цветовую палитру не так-то и просто. В этой статье мы разберем 16 цветовых палитр реальных сайтов, идеально подобранных для передачи пользователям нужных эмоций и чувств.
Содержание статьи
Почему цветовая схема так важна?
1. Tori’s Eye
2. Mea Cuppa
3. The Big Top
4. BarkBox
5. Cheese Survival Kit
6. Nordic Ruby
7. Lake Nona
8. Lemon Stand
9. Mint
10. Odopod
11. Fiverr
12. Digital Photography School
13. Ahrefs
14. Millo.co
15. Brian Gardner
16. Loom
Тестирование цветовых палитр
Заключение
Почему цветовая схема так важна?
Прежде чем перейти к выбору цветовой схемы, важно понять, почему она так важна:
- Цвет повышает узнаваемость бренда на 80%.
- На 90% формирует первое впечатление о сайте.
- Гармоничная цветовая палитра создает ощущение баланса и порядка. Вы можете использовать ее для установления иерархии контента на своих страницах.
- Позволяет выделить определенные элементы на странице («призывы к действию»).
- Упрощает связанные с дизайном решения. Сокращает время, необходимое для создания новых страниц.
Количество используемых цветов будет зависеть от сложности выбранного вами типа цветовых сочетаний. К примеру, если вы решите использовать монохромную палитру, вам может потребоваться семь или даже больше оттенков одного цвета, чтобы создать достаточное разнообразие на экране.
Необходимо будет определиться с цветом различных элементов, таких как текст, ссылки (обычный и при наведении), кнопки CTA, заголовки и цвет фона.
Читайте также: Цветовые схемы и палитры. Их значение и применение в веб-дизайне1. Tori’s Eye
Tori’s Eye — это инструмент для визуализации информации на Twitter. Этот сайт — отличный пример преимущественно однотонной цветовой схемы. В данном случае мы видим простую, но при этом мощную цветовую палитру, основанную на оттенках зеленого.
Такую цветовую схему легко скопировать, поскольку один оттенок цвета практически всегда будет сочетаться с другим оттенком того же цвета.
2. Mea Cuppa
Веб-сайт кофейни Mea Cuppa использует приятную для глаз цветовую палитру, включающую в себя пару ярких оттенков (рубиновый и изумрудный) для максимальной живости, но в остальном полагается на нейтральную монохромную палитру коричневых и серых оттенков.
Цветовая палитра сайта ассоциируется с кафе и отражается в основном изображении, что формирует целостность и связность всех элементов.
3. The Big Top
Сайт BigTop — сообщества, специализирующегося на оказании помощи сети стартапов — использует необычное, но чрезвычайно привлекающее внимание сочетание тонов, варьирующихся от фиолетового и синего до ярко-оранжевого и желтого.
Все основные цвета — это холодные оттенки. На их фоне отлично выделяются оранжевый и желтый. Благодаря такому сочетанию внимание пользователя на домашней странице в первую очередь приковывает «призыв к действию».
4. BarkBox
Доминирующий розовый цвет на домашней странице BarkBox повторяется по всему сайту в разных оттенках. Он прекрасно контрастирует с синим цветом, используемым в логотипе и CTA.
Использование комплиментарных цветов для привлечения внимания посетителей к определенным элементам поможет улучшить любую цветовую палитру веб-сайта.
Читайте также: Яркие цветовые решения для приложений и сайтов5. Cheese Survival Kit
Красный — чрезвычайно популярный цвет в веб-дизайне. Он может передавать богатую смесь эмоций, что делает его весьма универсальным. Особенно он эффективен при использовании в малых дозах, как, например, на веб-сайте Cheese Survival Kit.
Красный смягчают более нейтральные цвета, а синий используется для CTA и других элементов, к которым необходимо привлечь внимание пользователя.
6. Nordic Ruby
Веб-сайт Nordic Ruby, конференции проводимой в Стокгольме, оформлен в глубоких темных тонах. Цвета, выбранные для данной палитры, придают сайту изысканный вид и выгодным образом выделяют его среди конкурентов.
7. Lake Nona
Lake Nona — это веб-сайт отеля, расположенного на побережье. Следовательно, использование синего цвета здесь вполне ожидаемо и является правильным решением. Другие нейтральные цвета выделяют и хорошо подчеркивают его.
8. Lemon Stand
И снова нет ничего удивительного в том, что компания Lemon Stand, чье название содержит в себе слово «лимон», использует желтый цвет в своей цветовой палитре. Голубой и серый цвета прекрасно сочетаются с желтым и помогают смягчить его яркость.
Читайте также: Принципы контраста и подобия как средства выразительности в веб-дизайне9. Mint
Веб-сайт Mint посвящен финансам, поэтому использование здесь зеленых и синих оттенков является отличным выбором. Данные цвета помогают сформировать атмосферу спокойствия, миролюбия и доверия. Нейтральные оттенки в коричневой гамме создают общую природную цветовую гамму, обладающую умиротворяющим эффектом.
10. Odopod
Веб-сайт цифрового агентства Odopod имеет монотонную цветовую палитру, которая при этом не выглядит скучно благодаря градиенту. Крупная типографика обеспечивает превосходный контраст, и пользователю предельно очевидно, куда необходимо нажимать.
11. Fiverr
Вы могли заметить, что многие компании резервируют определенный цвет исключительно для CTA-элементов, и не задействуют его больше ни в каком другом месте сайта. В случае с Fiverr таким цветом является зеленый. Основными же здесь являются более нейтральные цвета.
12. Digital Photography School
Как правило, мы ожидаем, что у сайта, связанного с изобразительным искусством, будет удачно подобранная цветовая палитра, и Digital Photography School не является здесь исключением. Яркие цвета помогают привлечь внимание зрителя. И, как и в случае с Fiverr, оранжевый цвет, используемый в дизайне CTA (и логотипа), больше нигде не появляется в палитре, поскольку он используется для точечного воздействия на пользователя.
13. Ahrefs
Ahrefs — пример веб-сайта, свободно использующего свою цветовую палитру. Темно-синий служит доминирующим цветом, но его вариации встречаются по всему сайту. То же самое касается оранжевого, розового и бирюзового цветов.
Читайте также: 8 ярких цветовых трендов 2019 года14. Millo.co
Millo.co использует очень простую цветовую палитру, и это лучшее решение для него. Благодаря такому цветовому решению посетителю очень легко ориентироваться на сайте.
15. Brian Gardner
Некоторые компании и частные лица доводят монохромную цветовую палитру до крайности. Так, веб-дизайнер Брайан Гарднер (Brian Gardner) использует в дизайне своего сайта черно-белую цветовую схему. Она основывается на минимализме его бренда, и таким образом прекрасно отражает его ценности и убеждения.
16. Loom
Если вы хотите, чтобы ваш лендинг оказывал успокаивающее воздействие на пользователей, то остановите свой выбор на мягких цветах. Так, компания Loom обширно использует в дизайне своего сайта лососевый и светло-голубой цвета. Такое сочетание хорошо работает особенно в комбинации с фиолетово-синим цветом CTA и других важных элементов на странице.
Тестирование цветовых палитр
Когда вы создаете лендинг, вы тестируете свои CTA-элементы, заголовки и другие элементы. Так почему же в случае с цветом все должно быть иначе?
Инструмент сплит-тестирование от платформы LPgenerator дает прекрасную возможность выяснить, как аудитория реагирует на вашу текущую цветовую палитру.
Чтобы запустить тест, вам нужно создать копию/копии уже существующей посадочной страницы («Копировать вариант»), указать соотношение распределения трафика («Вес») на каждую из версий, внести изменения и наблюдать за реакцией посетителей:
По прошествии определенного срока после запуска теста, проанализируйте данные и выберите, какой из вариантов приносит лучший результат. Количество конверсий расскажет вам, привлекают ли цвета вашего лендинга ваших потенциальных клиентов.
Читайте также: Сколько времени нужно на сплит-тестирование?Заключение
Цветовая палитра должна не только выражать ценности вашего бренда, но и привлекать целевую аудиторию. В противном случае людей может неосознанно отталкивать ваш лендинг.
Выберите палитру, которая выгодным образом будет отличаться от других компаний в вашей нише, и после этого приступайте к тестированию.
Не упускайте возможности сделать вашу посадочную страницу или сайт максимально привлекательными для пользователей.
Высоких вам конверсий!
По материалам: crazyegg.com
06-02-2019
где найти и как выбрать / Skillbox Media
Различных инструментов создания палитры существует много; мы выбрали десятку самых популярных, среди которых сервисы и для начинающих дизайнеров, и для профессионалов.
Adobe Color CC — разработка компании Adobe, подарившей нам Photoshop, Illustrator и десяток других программ. Инструмент отличается гибкими настройками, а выбранные цветовые схемы для сайта можно сохранять в своей библиотеке.
Colormind — продвинутый сервис для создания цветовой схемы для сайта. Онлайн-инструмент не только генерирует палитру, но и позволяет очень тонко настраивать каждый из оттенков, а также составляет подборку цветов на основе загруженного изображения.
Colors — бесплатный генератор цветовой палитры, за считанные секунды создает хорошие варианты. Если предложенная системой подборка вам не нравится, то можно сгенерировать новую или задать определенные цвета и заменить какие-то оттенки.
Color Safe — этот инструмент понравится тем, кому небезразлична аббревиатура WCAG (Руководство по обеспечению доступности веб-контента, в которое входит множество рекомендаций, помогающих сделать информацию на сайте доступной разным пользователям — например, когда нужно учесть особенности восприятия слабовидящих людей). В алгоритм подборщика встроены необходимые параметры, что удобно при работе над сайтами.
Material Color Tool — сервис специально был создан в помощь дизайнерам пользовательских интерфейсов. Главная особенность в том, что выбранную цветовую палитру можно сразу применить к схеме веб-страницы и оценить, насколько удачным получится результат.
Paletton — еще один интересный инструмент для создания цветовых схем для сайта, во многом повторяющий возможности уже рассмотренного Adobe Color CC.
Colordot — сервис для тех, кто не привык проводить часы в поисках идеального цвета и готов довериться интуиции. Подбор оттенка осуществляется, пока вы водите мышкой по экрану: стоит кликнуть, и система запомнит цвет и предложит выбрать следующий.
Colourcode — во многом сервис похож на Colordot, но с более гибкими настройками и возможностью выбрать комбинацию оттенков по триадным, монохромным, аналоговым и другим стилям цвета.
Material Design Palette предлагает выбрать два основных оттенка для цветовой схемы для сайта, а потом показывает, как сочетание будет выглядеть на странице. Кроме того, сервис сразу же предлагает более расширенную палитру.
Palettr — очень необычный сервис, который наверняка оценят творческие натуры. В отличие от всех рассмотренных нами инструментов, этот предлагает создавать палитру не на основе цветов, а на основе места или явления. Просто вбейте в строку поиска какое-нибудь слово и увидите, что получится.
250 фото, гармоничные цветовые сочетания, советы
Каждый человек, хоть раз в жизни столкнувшийся с ремонтом в квартире или доме, решал животрепещущую проблему: какие цвета и оттенки выбрать для оформления интерьера? Понятно, что они должны быть приятными для тех, кто будет жить в данном антураже. Выбранные цвета не должны вызывать негативных реакций, отторжения, головной боли или ввергать в состояние тоски. Но ведь это далеко не все! Мало найти краску, обои или фасады гарнитура для гостиной, оттенок которых будет идеально соответствовать хозяйскому чувству прекрасного. Нужно грамотно совместить различные тона, дополнить интерьер интересными фокусными элементами.
Цвет способен на многое. Он создает определенное настроение в помещении. Полностью раскрывает достоинства комнаты и «прячет» недостатки. Он способен вдохновлять и восхищать, напитывать энергией и будить негативные стороны человеческого характера. Неправильно подобранный цвет – это катастрофа. То, что на фото в каталоге, в определенном освещении, смотрелось божественно, дома может превратиться в унылый, тусклый цвет. Он будет душить, полностью убивая впечатление от дорогой мебели и качественного текстиля.
Даже опытные дизайнеры множество раз перекрашивают стены при дневном и искусственном освещении в конкретной комнате, чтобы понять, какой именно результат будет получен. То же самое можно сказать о выборе обоев. Один и тот же рисунок по-разному смотрится на витрине магазина, под люминесцентными лампами, залитый солнцем, бьющим в окно, и в теплом свете домашней люстры. Восприятие также зависит от текстуры поверхности – глянцево-блестящей, фактурной, матовой. Еще более придирчиво подбирают сочетания оттенков разных цветов или одного цвета, но различной насыщенности.
Сегодня мы поговорим о правилах и нюансах, раскрывающих секреты цветовых сочетаний в различных интерьерах. Специалисты расскажут, какие тона можно смело компоновать, от чего лучше отказаться.
Какие факторы влияют на выбор?
Современные интерьерные направления раскрывают простор для творчества и нестандартного подхода к решению типовых задач. Нет четко заданных границ и канонов, поэтому любой владелец недвижимости может выбрать интерьер по своему вкусу. Цветовые сочетания выбирают, исходя из разных соображений.
Самым важным критерием является цветовое восприятие – глубоко личное, индивидуальное ощущение, вызываемое у человека тем или иным цветом. Кому-то больше нравятся теплые, огненные цвета, а для кого-то красный – это одна большая головная боль. Есть люди, которые предпочитают совершенно нейтральную, серую или бежевую гамму. Если оттенок вызывает интуитивное неприятие, не стоит включать его в интерьер.
Не стоит исключать и темперамент домочадцев, а также тот настрой в комнате, который планируется получить. Некоторые оттенки способны взбодрить, насытить энергией, стимулировать работу мозга. Они никак не подходят для спальни, зато создают отличную рабочую атмосферу в кабинете или гостиной. И, напротив, есть оттенки, которые помогут успокоиться, расслабиться, погрузиться в свой внутренний мир.
Пастельная, минимально контрастная палитра, создает легкие, воздушные интерьеры. Их невесомой прелестью можно наслаждаться в течение многих лет. Они умиротворяют, создают ощущение теплого, гостеприимного дома.
Контрастные, насыщенные цвета зовут к действию. Они очень хорошо подходят для сложных, творческих натур, а также лидеров, которые стремятся к доминированию во всем.
Если ремонт уже начат, а в голове нет абсолютно никаких идей по поводу цветовой палитры, стоит воспользоваться готовыми, давно и успешно отработанными, решениями.
Быстрый просмотр
58 198 ₽ 83 140 ₽
-30%Цена за всю кухню
Общие размеры
Быстрый просмотр
57 201 ₽ 81 716 ₽
-30%Цена за всю кухню
Общие размеры
Быстрый просмотр
56 715 ₽ 81 021 ₽
-30%Цена за всю кухню
Общие размеры
Быстрый просмотр
53 263 ₽ 76 090 ₽
-30%Цена за всю кухню
Общие размеры
Быстрый просмотр
Цена за всю кухню
Общие размеры
Быстрый просмотр
34 740 ₽ 49 629 ₽
-30%Цена за всю кухню
Общие размеры
Быстрый просмотр
62 857 ₽ 89 796 ₽
-30%Цена за всю кухню
Общие размеры
Схемы цветосочетаний
Если хозяева теряются с выбором, на помощь приходят готовые схемы цветовых сочетаний. Они созданы на основе цветового круга, и широко применяются профессиональными дизайнерами.
Быстрый просмотр
Цена за всю прихожую
Общие размеры
Быстрый просмотр
Цена за всю прихожую
Общие размеры
Быстрый просмотр
Цена за всю прихожую
Общие размеры
Быстрый просмотр
Цена за всю прихожую
Общие размеры
Быстрый просмотр
Цена за всю прихожую
Общие размеры
Быстрый просмотр
Цена за всю прихожую
Быстрый просмотр
Цена за всю прихожую
Общие размеры
Чтобы разобраться, как правильно комбинировать цвета, стоит понять, чем отличается каждый тон по-отдельности. Цвет имеет три основных характеристики. Изменение каждой из них приводит к тому, что мы видим его немного по-другому:
цвет – это особенность восприятия глазами человека световых волн. Электромагнитная волна несет собственную информацию, имеет свой спектр. Есть ахроматические – белый, серый, черный, и цветные, хроматические – зеленый, синий, красный, желтый. Также различают спектральные и неспектральные цвета (пурпур). Каждый из нас видит цвета по-особенному. Это зависит от строения глаза, особенностей психики;
насыщенность тонов зависит от их чистоты. Так, самыми насыщенными из желтой палитры будут лимонный и канареечный тона. Самыми приглушенными, пастельными – оттенки ванили, соломы, шампанского. Чтобы снизить насыщенность, его смешивают с чисто-белым, светло-желтым, добавляют немного черного. Например, медовые, янтарные и горчичные тона также являются приглушенными;
яркость – это степень близости к чисто-белому цвету. Наиболее светлыми считаются, например, мятные и весенние тона. А темными – оттенки хаки, хвои, изумруда и малахита, оливы.
При работе с цветовой палитрой, необходимо учитывать все три показателя. Проще всего совмещать разные цвета, имеющие одинаковую насыщенность и яркость. Например, розовый хорошо сочетается с небесно-голубым, бирюзовым или светло-зеленым. А бордовый замечательно смотрится с фиолетовым или бархатистым синим.
Применяя схемы, необходимо помнить: каждый человек индивидуален. Нет единого, идеального для всех рецепта. Если в предложенном сочетании один из оттенков не нравится, выглядит слишком мрачным, тусклым или вызывает внутреннее неприятие, его стоит заменить. Есть люди, которые вполне комфортно чувствуют себя в стерильно-белом пространстве. Найдется и оригинальный взгляд на жизнь, который выражается в смелом сочетании ярко-бордового, черного, белого и изумрудного.
Выбор цветовой гаммы в зависимости от назначения помещения
При выборе палитры огромное значение имеет функционал комнаты.
Для спален предпочтительны неяркие, спокойные природные тона. Можно создать монохромный коричнево-бежевый интерьер, или выбрать нежные розовато-зеленые тона, которые прекрасно успокаивают нервы, способствую крепкому, безмятежному сну.
При оформлении детской стоит поинтересоваться мнением самого ребенка, и учесть его характер. Спокойным, слегка флегматичным, малышам не повредят яркие, праздничные краски. А гиперактивному ребенку подойдет нейтрально-прохладный интерьер.
На кухне нежелательно использовать больше 2-3 цветов. Обычно выбирают один из трех вариантов: нейтральные стены с яркими фасадами кухонного гарнитура; сливающийся со стенами, неяркий гарнитур и выразительный кухонный фартук; насыщенные стены и мебель.
Гостиная предоставляет полную свободу творчества. Она может быть как воздушно-пастельной, так и феерично-красочной, в стиле авангард или поп-арт.
- Доставим завтра
Быстрый просмотр
25 578 ₽ 36 540 ₽
-30%Цена за всю гостиную
Общие размеры
- Доставим завтра
Быстрый просмотр
Цена за всю гостиную
Общие размеры
длина
272,4/152,4 см
Быстрый просмотр
Цена за всю гостиную
Общие размеры
Быстрый просмотр
Цена за всю гостиную
Общие размеры
Комбинации цветов
А теперь рассмотрим конкретные примеры цветовых сочетаний.
Монохромная гамма
Самый простой вариант, в котором очень трудно совершить непоправимую ошибку, – это сочетание оттенков одного цвета. Такой интерьер называется монохромным. Например, если нравится персиковый цвет, то его можно смело комбинировать со следующими вариантами:
дынный, коралл;
нежно-персиковый, карамель;
буйволовой кожи;
пляжного песка;
заварного крема.
Каковы основные правила?
Не нужно пытаться раскрасить интерьер во все доступные тона. Достаточно выбрать 3-4 подтона из тех, что вызывают наиболее приятные ощущения. Этого хватит, чтобы создать любой интерьер, от динамично-современного, до нежно-романтичного.
Не существует единых рекомендаций. Можно брать близкие друг к другу подтона, принадлежащие одному сектору цветового круга, и расположенные рядышком. Например, рубин и гранат. Или же выбирать самые насыщенные тона, выгодно выделяющиеся на фоне пастельных. Так, изумительно смотрится дуэт ванильного оттенка с канареечным или горчичным. Во втором случае интерьер получится высококонтрастным. В первом же один тон будет плавно, незаметно, переходить в другой.
Гармоничная гамма
Данное цветовое сочетание имеет еще одно название – аналогичное. Для оформления интерьера выбираются 2-3 цвета, лежащие на цветовом круге рядом друг с другом, то есть: синий – сине-фиолетовый; красный – красно-оранжевый; зеленый – бирюзовый – желто-зеленый. Можно брать их оттенки любой насыщенности. Благодаря дополнительным тонам, такой интерьер выглядит более богатым, роскошным, нежели одноцветные варианты.
Гармоничная гамма воспринимается подсознанием очень благосклонно. Такие цветовые сочетания часто встречаются в природе, а потому с детства привычны и знакомы. Даже насыщенные, фруктовые и цветочные оттенки, не раздражают глаз. Напротив, они поднимают настроение, дарят тепло и даже способствуют лучшему перевариванию пищи.
Быстрый просмотр
35 070 ₽ 35 536 ₽
-1%Цена за всю кухню
Общие размеры
Быстрый просмотр
Цена за всю кухню
Общие размеры
Быстрый просмотр
38 847 ₽ 39 355 ₽
-1%Цена за всю кухню
Общие размеры
- Хит
Быстрый просмотр
Цена за всю кухню
Общие размеры
Быстрый просмотр
52 000 ₽ 74 286 ₽
-30%Цена за всю кухню
Общие размеры
Быстрый просмотр
56 946 ₽ 81 351 ₽
-30%Цена за всю кухню
Общие размеры
Быстрый просмотр
Цена за всю кухню
Общие размеры
Комплементарная гамма
Контрастные цвета и оттенки добавляют в интерьер динамики. Они отлично оживляют интерьер, придают ему индивидуальность и энергию. В цветовом круге такие тона расположены друг напротив друга. Примеры таких пар:
лавандовый – лимонный или шампань – светло-лиловый;
апельсиновый – васильковый или светло-оранжевый – незабудковый;
мшисто-зеленый – насыщенно-красный или мятный – розоватый;
белый – черный или кремовый – серый.
Специалисты рекомендуют выбирать оттенки разных цветов одинаковой насыщенности. То есть, яркий синий требует такого же насыщенно-апельсинового тона, а нежные пастельные оттенки великолепно сочетаются друг с другом. Разбавить приглушенную гамму можно парой ярких акцентов. А насыщенные цвета лучше всего компонуются со спокойными, нейтральными красками.
Комплементарная палитра также часто встречается в природе: стоит лишь взглянуть на поросший полевыми цветами луг, выйти на лесную опушку или берег водоема. Именно поэтому она воспринимается естественно, не вызывая отторжения.
Тройная палитра
Более сложный дизайнерский прием – это цветовая триада. Интерьер в трех различных оттенках выглядит намного богаче. Но и требует наличия тонкого чувства прекрасного, умения грамотно сочетать различные цветовые решения. Традиционно используют два варианта:
по классической схеме берутся три цвета (любые их оттенки), расположенные на вершинах равнобедренного треугольника. Например, желтый – синий – красный. Или красно-оранжевый – желто-зеленый – сине-фиолетовый;
при раздельно-комплементарном цветовом сочетании используются цвета, расположенные друг напротив друга. Но, в отличие от традиционного метода, вместо одного, лежащего напротив, цвета берутся два, расположенные от него по бокам. То есть, фиолетовый сочетается с оливковым и желто-оранжевым. А огненный – с синим и зеленым.
Сочетание четырех цветов
Наиболее сложный для исполнения вариант называется «тетрада» или принцип прямоугольника. В интерьере сочетают сразу четыре различных цвета или их оттенка. Профессионалы используют два способа:
в традиционной тетраде один колер выступает в роли основного фона. Дополнительными становятся два оттенка, а последний используется для создания завершающих акцентов. При этом берут по два цвета, размещенных на круге рядышком и напротив. Например: желтый – желто-оранжевый; сине-фиолетовый – фиолетовый. Либо оттенки располагаются через один цвет: оранжевый – красный, синий – зеленый;
при использовании квадратной методики выделяют две пары контрастных цветов, отстоящих друг от друга на равном расстоянии, через два цвета: желтый – фиолетовый, огненный – бирюзовый. Чтобы резкие контрасты не бросались в глаза, дизайнеры рекомендуют выдерживать равные пропорции, по 25% каждого оттенка. Либо выбрать один основной цвет, дополнив его тремя оттенками.
Вариантов цветовых сочетаний в интерьере бесконечно много. Можно компоновать яркие и приглушенные, пыльные оттенки. Гармонично смотрятся холодные и теплые тона. Придают интерьеру особую изысканность глубокие, бархатистые темные цвета в сочетании со светлыми, пастельными тонами. Поэтому можно смело экспериментировать. Главное, чтобы результат пришелся по душе!
Подборка цветовой гаммы — 28 лучших инструментов
Подбор цветовой палитры – один из важнейших этапов в процессе создания хорошего дизайна.
Чтобы облегчить вам задачу, мы решили составить подборку, состоящую из лучших сервисов для создания цветовых схем. Они помогут сэкономить время, и при этом получить достойный результат.
Компания Adobe переименовала свой проект Kuler в Color
Вы можете быть знакомы с этим инструментом по его прежнему названию — Adobe Kuler. Однако совсем недавно компания Adobe переименовала одно из своих популярных веб-приложений в Adobe Colour CC.
Адоб колор онлайн позволяет подбирать, создавать и сохранять различные цветовые схемы, в каждой из которых может присутствовать до пяти цветов. Adobe color online доступен как в браузерной, так и в настольной версии. Если вы используете настольную версию adobe color cc онлайн, то вы сможете экспортировать цветовую схему прямо в Photoshop, Illustrator и InDesign.
Не знаете как подобрать сочетание цветов онлайн? Если вы не уверены по поводу вашей цветовой схемы, то у Mudcude есть собственная галерея готовых ресурсов
Mudcube Colour Sphere – очень удобный миниатюрный ресурс для дизайнеров, который не только предлагает hex-коды выбранных цветов, но и позволяет создавать цветовые схемы для собственных проектов. Также стоит отметить, что в Mudcube имеется собственная галерея готовых ресурсов, которые также можно использовать.
Check my Colours разработан специально для оценки и подборки комбинации фона и основного цвета для всех DOM-элементов. А также для того, чтобы выяснить, достаточно ли элементы гармоничны между собой. Все тесты основаны на алгоритмах, рекомендованных World Wide Web Consortium (W3C).
Приложение поможет узнать RGB, HEX, а также HSLA-значения выбранных цветов
iOS-инструмент The Color App позволит легко и просто определять цвета при помощи большой цветовой палитры. Он позволяет узнать RGB, HEX и HSLA-значения цветов, а также создавать собственные цветовые схемы для сайта.
Color Hunter формирует цветовую схему на основе выбранного изображения
Это очень удобный инструмент, особенно если необходимо найти какой-то конкретный цвет. Выберите изображение и загрузите его в Color Hunter. Инструмент создаст цветовую палитру на основе выбранного изображения. Это отличный метод создания собственных цветовых схем.
Если вам нужно получить конкретный цвет, просто введите HEX-значение в URL
На этом сайте используется база данных, состоящая из 10 миллионов изображений, доступных бесплатно по лицензионному соглашению Creative Commons, которые создатели тщательно отобрали с Flickr. Их можно использовать для генерации соответствующих цветовых схем.
Color позволяет находить идеальные цвета, перемещая курсор мыши
Удобное миниатюрное веб-приложение. Наведите курсор мыши на экран, и определите нужный цвет, затем прокрутите немного, чтобы подобрать оттенок. После чего инструмент выдаст все необходимые HEX-коды, которые можно использовать в собственных проектах. Один из самых простых в использовании инструментов.
Бесплатный генератор цветовых схем, который предоставляет информацию о цвете, а также позволяет конвертировать его в любые схемы (RGB, CMYK и другие). Здесь доступны различные форматы цветовых схем, включая триадные, монохромные и другие.
На Designspiration можно выбрать до пяти оттенков при помощи удобной палитры на всю страницу, которая поможет без труда найти именно те цветовые схемы HTML, которые вы ищете. После этого сайт сгенерирует страницу со всеми изображениями из базы данных, в которых используется похожая цветовая комбинация. Также будут предоставлены HEX-значения, которые можно использовать в собственных проектах. А изображения можно сохранять в коллекциях на сайте.
Один из самых продуманных веб-инструментов, который предлагает множество функций, связанных с дизайном, настройкой и аналитикой цветовых схем. Здесь представлены инструменты, которые помогут определить WCAG-валидность цветовых схем, а также сгенерировать собственные цветовые палитры.
Небольшой удобный инструмент для генерирования комбинации цветов на основе одного выбранного оттенка. Вставьте Hex-значение цвета, а инструмент предоставит набор подходящих цветов, которые можно будет использовать вместе с основным.
COLOURlovers представляет собой сообщество для обмена цветовыми схемами. Здесь можно черпать вдохновение из цветовых наборов других пользователей, а также создавать собственные и делиться ими.
Этот онлайн-инструмент предлагает интересные способы генерирования цветовых схем, позволяя настраивать их яркость и регулировать контраст. Здесь можно создать несколько популярных математических моделей цветовых схем, включая монохромную.
Один из инструментов с сайта COLOURlovers. Но COPASO достоин отдельного внимания, так как представляет собой невероятное решение «все в одном», и позволяет легко генерировать готовые цветовые схемы для сайта. Здесь представлено множество инструментов для подбора цвета, и все они размещаются в удобном и простом интерфейсе. Кроме этого к палитрам можно добавлять заметки, загружать изображения и т.п.
Colourmod представляет собой программное обеспечение, которое позволяет выбирать отдельные цвета из области виджетов, независимо от того, используете ли вы Mac или Konfabulator на Windows. Это не совсем простой инструмент для работы с цветовыми палитрами, однако он поможет быстро и просто определять цвета без необходимости загружать тяжеловесные программы.
ColorZilla доступен как для Chrome, так и для Firefox
Этот проект начинался как плагин для Firefox, однако сегодня он также доступен и для Google Chrome. ColorZilla представляет собой расширение, которое включает в себя несколько инструментов, предназначенных для работы с цветом, среди которых палитра, генератор css-градиентов и пипетка.
Удобный онлайн-инструмент для подбора цветовых схем от создателей Colormunki. С его помощью можно без труда создавать привлекательные цветовые палитры из образцов на основе Pantone с использованием нескольких методик.
Colr.org позволяет установить диапазон цветов любого изображения
Этот инструмент позволяет провести подробный анализ цветов изображения, который обычно автоматизирован в других инструментах. Это позволит выбрать наиболее подходящий цвет. Мы рекомендуем познакомиться с этим инструментом, хотя его интерфейс не настолько продуман, как в других приложениях.
Этот удобный инструмент создает цветовые палитры из любого изображения. Вставьте адрес изображения, которое хотите проанализировать, и сервис автоматически сгенерирует трехмерный график с информацией по использованным цветам. Хотя это приложение не совсем подходит для подбора цветовой схемы для сайта, но с его помощью можно изучить изображения и их цветовые характеристики.
ColorBlender генерирует палитру из пяти сочетающихся цветов
Один из простейших инструментов, который позволяет настраивать цветность и в режиме реального времени получать пять сочетающихся между собой цветов. Сгенерированную палитру можно скачать в Photoshop или Illustrator в виде EPS-файла.
GrayBit позволяет анализировать сайты, чтобы понять, как бы они выглядели в градации серого
Этот инструмент поможет увидеть, как ваш сайт смотрится в серых тонах. Отличный сервис, который позволит выявить проблемные по контрасту места.
Инструмент, который можно использовать в качестве источника вдохновения или для обмена цветовыми схемами. Конечно, этот ресурс не поможет с генерированием схем, но его обязательно следует взять на заметку.
Изображения можно фильтровать по цветовому балансу и яркости
Иногда проверить будет ли цветовая схема сочетаться легче всего путем просмотра стоковых картинок. Практически все основные стоковые ресурсы предлагают подобные инструменты, однако Shutterstock Spectrum имеет очень удобный интерфейс. После использования слайдера для определения цвета вы сможете указать ключевые слова, которые позволят определить тему снимков. Кроме этого можно отфильтровать изображения по цветовому балансу и яркости.
Может показаться, что этот инструмент уже давно устарел. Однако вы все равно сможете эффективно использовать его для создания готовых цветовых схем для сайта и привлекательных паттернов.
Colors on the Web принимает отдельные цвета в HEX или RGB, и выдает цветовые схемы, основанные на различных математических вычислениях. Подобный механизм используется и в Kuler. Этот веб-инструмент не будет работать на iPad или iPhone из-за использования технологии Flash.
Этот инструмент позволяет загружать изображения и генерировать цветовые схемы из используемых в них цветов. Проект совмещает в себе и другие инструменты, предлагая одновременно функционал Kuler и Colourlovers.
Необычный инструмент для создания цветовых схем, отвечающих требованиям WCAG. Сервис позволяет симулировать дальтонизм, плохое зрение, а также клиническую слепоту. Кроме этого здесь представлено множество ссылок на очень полезные ресурсы и инструкции.
Инструмент предлагает схожий с Kuler функционал, но при этом красиво визуализирует цветовые палитры, а также позволяет генерировать более пяти цветов в одной схеме. Его можно напрямую интегрировать в некоторые приложения Creative Suite. Этот инструмент также доступен в виде приложения для iPad, предлагая отличную интеграцию с Photoshop, где он может выступать в роли панели цветов.
Валентин Сейидовавтор-переводчик статьи «The 28 best tools for choosing a colour scheme»
Выбор цвета для дизайна сайта. Примеры: 50 великолепных цветовых схем
Цвета для веб-дизайна играют огромную роль. Чтобы грамотно подобрать цветовую схему для сайта, существуют специальные сервисы, но сначала познакомьтесь с информацией о том, что будут рассказывать цвета сайта о вашем бизнесе
Выбор цвета для дизайна сайта это ответственный шаг, так как цвета в значительной степени влияют на эмоции. Есть цветовые схемы, которые удачны, но бывает и наоборот. Веб-дизайнер должен создать положительный пользовательский опыт, чтобы посетителям сайта было комфортно просматривать контент и не появлялось желание закрыть веб-страницу.
Цветовая гамма. У каждого сайта должна быть основная цветовая гамма, в которой они используются для заполнения большего пространства. Использование этих цветов воздействует на разум и настроение человека в основном подсознательно, так что выбирать их нужно тщательно.
- Цвета могут устанавливать правильный тон и передавать необходимые эмоции посетителям
- могут взволновать, вызвать множество чувств и стимулировать к действиям
- Цвет является чрезвычайно мощным фактором воздействия на пользователей
- При выборе цветовой гаммы для сайта, важно сделать это правильно, руководствуясь основными принципами теории цвета
На что влияет выбор цветовой палитры
Цвета вашего сайта многое могут рассказать пользователям о вашем бизнесе. Правильно подобранная цветовая гамма создает нужное настроение для восприятие информации, которая представлена на на вашем сайте. Выбор цвета иногда оказывает решающее влияние на выбор пользователя, оставаться ли ему дальше на веб странице или уйти на сайт конкурентов.
Многие клиенты ошибочно пытаются настаивать на применении законов полиграфии при разработке дизайна сайта. Доверяйте профессиональным дизайнерам, используйте их рекомендации при разработке дизайна вашего сайта.
50 великолепных цветовых схем для дизайна вашего сайта
Цвет — это такая фундаментальная часть нашего восприятия мира, что мы часто воспринимаем его как должное.Подумайте об этом: от молодого и яркого оранжевого на чьем-то наряде до серого и мрачного неба над нами, цвета способны формировать наше восприятие других и даже обстоятельства, в которых мы находимся.
Вот почему одним из самых мощных инструментов в арсенале дизайнера является цвет. Цвет может или сломать дизайн или сделать его определяющим фактором в привлечении зрителей. Как же подобрать те самые цвета для сайта, которые усилят то, что вы хотите передать и будут выглядеть профессионально?
1. Красочные и сбалансированные
Теплые и прохладные оттенки объединены в этой красочной, но не подавляющей палитре. От привлекательной и яркой голубовато-зеленой до землистой терракоты, эта цветовая схема хорошо подходит для молодежных и современных сайтов. Она выглядит насыщенно, но не перегружено.
2. Яркие цвета с сильным акцентом
В этой комбинации оттенки синего и фиолетового сочетаются с сногсшибательными красными и оранжевыми акцентами. Обратите внимание на то, как контраст между ярким синим фоном и красно-оранжевыми акцентами сразу привлекает внимание к нужным местам, от верхней части страницы до видео внизу.
3. Природные и земные цвета
Ощущение того, что вас окружает утешительное голубое небо и заботливая сцена на открытом воздухе, немедленно вызывается этой очень «приземленной» цветовой схемой. Эта приятная цветовая комбинация идеально подходит для проектов, связанных с природой и устойчивостью, и может пригодиться для проектов, которые подчеркивают экологическое сознание.
4. Свежие и лаконичные цвета
Темный имперский синий и изумрудно-зеленый цвета объединяются в этой схеме для создания чистой и освежающей палитры. Эта комбинация, напоминающая об океане или о любой обстановке, связанной с водой, идеально подходит для проектов, призванных передать спокойствие и надежность. Вместе они успокаивают и располагают к себе..
5. Смелые и яркие
Это привлекательное сочетание кораллового красного и бирюзового, наряду с другими оттенками синего, является одновременно ярким и дерзким. Более холодные голубые оттенки чудесно компенсируются смелым цветом, что делает его идеальной цветовой схемой для любого остроумного и современного дизайна.
6. Черные с ярким акцентом
Распространенная техника, используемая на современных сайтах, эта страница создает привлекательный контраст, комбинируя черный фон с яркими акцентными цветами. В этом случае вариации красного, такие как ярко-красный и темно-рыжий, дополняются уникальным русским зеленым.
7. Стильные и утонченные
Эта элегантная цветовая гамма объединяет темные приглушенные тона для создания чистого и утонченного образа. Оттенки серого и синего идеально подходят для более консервативных дизайнов.
8. Оттенки красновато-коричневого
Оттенки темно-красновато-коричневого в сочетании с глубоким тосканским красным и старой лавандой создают уникальную палитру, которая привлекает вас своим теплом и глубиной. Эта схема идеально подходит для элегантных вещей, которые отражают энергию и богатство.
9. Мистические темные цвета
Эта темная и таинственная цветовая схема с ярким синим акцентом соответствует преобладающей тенденции веб-дизайна: использование темных фоновых цветов с яркими и смелыми акцентными цветами.
10. Современные и смелые
Привлекательная комбинация розового, красного, черного и серого цветов, эта современная палитра вызывает ощущение роскоши, изысканности и минимализма.
11. Живые и привлекательные цвета
Это прекрасное сочетание сладкого розового, зелено-желтого, лавандового и пастельно-коричневого цветов идеально подходит для дизайна, стремящегося создать яркий и привлекательный образ.
12. Поразительно простые цвета
Трудно отвести взгляд, когда сталкиваешься с минималистским, но поразительным дизайном, таким как этот. Темный дымчато-черный фон в сочетании с ярким электрическим синим цветом делают эту цветовую схему выигрышной, полезной для различных проектов.
13. Оттенки живого красного
Используя красный польский флаг в качестве основы для своей цветовой схемы, этот привлекательный веб-сайт сочетает темно-алый красный с темно-розовым на светло-сером фоне. Его живое и креативное и в то же время изысканное использование минималистской цветовой гаммы с разными оттенками одного и того же оттенка.
14. Вычурные и креативные
Это красочное сочетание золотисто-красного, темно-синего и темно-синего голландского цветов воплощает в жизнь этот художественный и креативный дизайн для онлайн-архива музыкальных произведений. Дарит легкое чувство ностальгии и отлично привлекает внимание.
15. Элегантные и доступные
Это уникальное сочетание оттенков кожи и более элегантных цветов, таких как темно-имперский синий и рубин, делает его идеальной цветовой схемой для дизайнов с нюансами сообщений. Утонченно и доступно, легко и забавно: это те виды серых оттенков, которые эффектно выглядят в этой приятной для глаз комбинации.
16. Футуристические цвета
Эта привлекательная смесь голубого сапфира, серо-металлического оружия и платины с одной стороны и персиково-оранжевого и коричневого с другой — подходит для современной и гладкой цветовой гаммы. Используемые здесь оттенки подходят, чтобы спроектировать футуристический образ, прохладные металлические цвета эффективно смягчаются более человеческими, землистыми тонами.
17. Инновационные и смелые
Эта комбинация оранжевого, ярко-желтого и нефритового оттенков на темно-сером, почти черном фоне вызывает ваше внимание. Смелая и полная энергии, эта цветовая комбинация идеальна, если вы ищете современный и дерзкий образ.
18. Текстурированные и динамичные
Темная палитра, уголь и всплеск бледно-красно-фиолетового делают эту цветовую схему обязательной для тех, кто ищет элегантный, футуристический, но динамичный вид и ощущение элегантности. Эта комбинация цветов достаточно универсальна, и ее можно использовать в проектах, начиная от современных корпоративных и заканчивая элегантными и футуристичными сайтами, она передает динамику и утонченность.
19. Теплые оттенки и минимализм
Оттенок белого в тональности яичной скорлупы, темно-ванильный и серовато-коричневый цвета с в сочетании с пастельно-красными тонами хорошо объединяются в минималистском, но теплом и лаконичном дизайне. Вспышка энергичного цвета в этом дизайне делает его элегантным и в то же время привлекательным.
20. Яркие и контрастные цвета
Темно-розовый, фиолетовый и темно-синий цвета смешаны в этом красивом и привлекательном дизайне. Насыщенные неоновые оттенки действуют как акценты на темно-фиолетовом фоне, привлекая зрителей к навигационному меню, как только они открывают сайт.
21. Чистые и энергичные
Оттенки бледно-синего, голубого и фиолетового на этом сайте особенно приятны для глаз и вызывают энергию и покой одновременно. Черника и небесно-голубой искусно сочетаются с аметистом, чтобы дать жизнь освежающей и приятной для глаз цветовой комбинации, подходящей для любого дизайна, который стремится вызвать положительные эмоции.
22. Традиционная бизнес-классика
Если вы ищете более приглушенный образ, эта цветовая схема объединяет оттенки зеленого, синего и коричневого, которые передают профессионализм и надежность. В этой сдержанной палитре используются оттенки серо-зеленого, темно-сланцево-серого и оловянно-синего которые хороши для корпоративного стиля.
23. Глубокий сдержанный синий
Диапазон синего, от яркого лазурита до глубокого синего цвета, делает эту сдержанную, но красивую цветовую гамму подходяще для корпоративных проектов. Его можно так же использовать в визуальных образах образовательных и консультационных сайтов.
24. Чистые и современные
Здесь сочетаются прекрасный миртово-зеленый с лазурным белым и простым белым в простой, но эффективной комбинации, которая выглядит профессионально и стильно.
25. Яркие и элегантные
Эта яркая и элегантная цветовая гамма объединяет очень насыщенный светло-холодный синий с другими оттенками, такими как темно-синий и бледно-васильковый. Это сочетание элегантно дополнено ярким и ярким оттенком розового, которые делают дизайн современным.
26. Веселые и задорные цвета
Эта игривая и красочная схема сочетает в себе несколько ярких оттенков: ярко-бирюзовый, мандариново-желтый и темная орхидея Она отличноподойдет для смелых молодежных проектов
27. Минималистичные контрастные цвета
Этот элегантный и ультрасовременный сайт может похвастаться элегантной и привлекательной комбинацией с эффектным контрастом. Яркий желто-зеленый хорошо сочетается с черным и серым на заднем плане и смотрится очень элегантно.
28. Эффектные цвета с четким акцентом
Это еще один пример сайта, который эффективно использует яркий акцентный цвет, чтобы направить взгляд зрителей на важное. В этом случае ярко-желтый цвет привлекает внимание сначала к заголовку, затем к пути вверх по горе и, наконец, к кнопкам призыва к действию в нижней части страницы.
29. Современные и актуальные цвета
Эта комбинация океанического зеленого, аквамаринового и морского зеленого прекрасно передает концепцию современности и в то же время жизни и плодородия, что полностью совпадает со словами в центральном сообщении сайта. Отличное решение проектов объединяющих технологичность, современность и натуральность.
30. Природные естественные цвета
Эта природная комбинация зеленого с рядом синих оттенков идеально подходит для консервативных проектов, призванных создать образ стабильности, надежности и изобилия.
31. Ярко-розовые и пастельные
Этот оживленный сайт объединяет ярко-малиново-розовый с более мягкими цветами, такими как пастельно-синий и светло-пастельно-фиолетовый. Результатом является удивительно свежая и беззаботная цветовая гамма, которая создает ощущение легкости и свежести.
32. Уникальная необычная комбинация цветов
Эта невероятная смесь темно-розового и синего цветов делает эту уникальную и привлекательную комбинацию выделяющейся и захватывающей внимание, она может быть использована для проектов в специфических областях.
33. Яркие цитрусовые цвета
Эта свежая и цитрусовая смесь светло-зеленовато-желтого, светло-зеленого и черного цветов является фаворитом среди брендов, связанных со спортом, высокоадреналиновыми энергетическими напитками и экстриме.
34. Энергичные голубые и апельсиновые цвета
Яркий бирюзовый фон и оранжевая кнопка призыва к действию на этом сайте могут быть немного громкими для некоторых посетителей, но комбинация определенно передает эмоции высокой энергии, которые сопровождают изображение на заднем плане.
35. Оттенки бородово-красного и и синего
Эта гамма бордовых и красных цветов с ярко-синей кнопкой призыва к действию создает визуального интерес и сразу привлекает к себе внимание. Хорошо подходит для интересных уникальных проектов
36. Дерзкие, смелые и современные
Это смелое и уникальное сочетание королевского синего и золотого с яркими голубыми бликами захватывает взгляд. Его неожиданное и несколько нестандартное решение поможет сделать этот сайт победителем и стать лучшим среди многих в своей нише.
37. Веселые и энергичные
Голубой, синий и апельсин на этой странице делают этот дизайн сайта особенно привлекательным и энергичным, и его можно применять к проектам с оптимистичным и вдохновляющим посланием.
38. Снежный, но теплый
Это зимнее сочетание красного и синего цветов одновременно вызывает одновременно ощущения прохлады и тепла, отличный вариант для дизайна, связанного с зимними праздниками.
39. Богатство насыщенных красок
Эта яркая и насыщенная цветовая комбинация объединяет яркие желтые, синие и розовые цвета в этом прекрасном минималистском дизайне, который можно использовать в минималистичных, профессиональных проектах.
40. Элегантный минимализм
Этот сайт демонстрирует привлекательный дизайн с несколькими элементами и хорошо подобранной цветовой гаммой. Всего пары геометрических фигур с искусно подобранными цветами на черном и сером фоне достаточно, чтобы привлечь внимание зрителя.
41. Простые и бесстрашные цвета
Эта эффектная цветовая комбинация использует оттенки синего и красного, чтобы создать ощущение смелости и истинного профессионализма, идеально подходит для дизайна, стремящегося передать силу и компетентность.
42. Плоские и простые цвета
Даже если вы не знакомы с термином плоский дизайн, вы наверняка видели его раньше: сайты без теней, градиентов и скосов; короче говоря, нет трехмерных элементов. В то время как сайт выше добавляет немного теневого эффекта мальчику справа, технически это можно назвать плоским дизайном 2.0, который является не чем иным, как добавлением нескольких очень тонких трехмерных эффектов. Как видно здесь, цвета плоского дизайна, как правило, очень яркие и супер насыщенные.
43. Комфортный и спокойный
Это уникальное сочетание оттенков кофе с небесно-голубым и различных оттенков коричневого делает эту успокаивающую и утешительную цветовую схему: чем-то напоминающим вашу любимую кофейню или гостиную. Отлично подходит для сферы HoReCa.
44. Классический и традиционный
Эта комбинация розового, голубого и гранитно-серого очень утонченная и отлично подчеркнет серьезность и актуальность проекта. Классическая палитра с современными нотками эта схема может быть использована в любом дизайне, требующем как серьезности, так и немного живости.
45. Популярные акцентные цвета
Эта цветовая схема прекрасно использует виноградный акцент против очень темного ненасыщенного фиалкового. Такой дизайн может использоваться для любого проекта, где есть небольшое количество элементов и центральное сообщение, к которому вы действительно хотите привлечь внимание посетителей.
46. Серьезный корпоративный
Оксфордский синий с несколькими ярко-синими и красными бликами делает этот сайт очень традиционным и корпоративным. Синий и зеленый, которые передают профессионализм и стабильность, обычно используются в корпоративных сайтах.
47. Гламурные и стильные цвета
Эта смесь золота, пурпура и черного ассоциируется с такими понятиями, как богатство и расточительность. Эта комбинация может быть применена к дизайнам, связанным с модой, роскошью и продуктами высокого класса.
48. Привлекательный и насыщенный
Это прекрасное сочетание бирюзового и насыщенно-розового на темном фоне создает повышенный визуальный интерес и сразу притягивает взгляд. Смелая, но профессиональная, эта цветовая комбинация, при правильном использовании, может даже применяться к корпоративному дизайну.
49. Контрастные кислотные цвета
Эта комбинация преднамеренно бросская до такой степени, что она может оттолкнуть некоторых зрителей. Однако, когда вы хотите сделать смелое заявление, эта цветовая комбинация может хорошо сработать, если все сделано правильно, ее просто невозможно пропустить.
50. Оптимистичные, живые успокаивающие цвета
Это расслабляющее, но веселое сочетание лимонного, желтого, мятного и темно-голубого цветов делает эту идеальную цветовую схему подходящей для любого сайта, стремящегося передать энергию, оптимизм и, в то же время, гармонию и рост.
Публикация адаптирована в веб-студии АВАНЗЕТ на основе опыта гуру индустрии дизайна и статьи Найоми Чибана. Вдохновляйтесь вместе с visme и найдите для себя идеальную цветовую палитру!
17.10.2021
← Поделиться с друзьями !
33 красивых цветовых сочетания для вашего следующего дизайна
Создаете ли вы новый бренд с нуля или создаете новый интересный продукт, цвет может оказать огромное влияние на его общее послание и эффективность. Определенные цветовые сочетания могут привлечь наше внимание, вызвать эмоции и, в конечном итоге, надолго заявить о себе.
В этом руководстве мы рассмотрим несколько отличных цветовых схем, которые помогут вашему бренду оказать большое влияние.
Комбинирование цветов на цветовом круге: краткий обзор
—
Ключ к успешному сочетанию цветов — понимание того, как разные цвета взаимодействуют друг с другом.Освоение цветового круга и цветовых гармоний (что работает, что нет и как цвет передает информацию) поможет вам комбинировать цвета, создавать лучший бренд и грамотно общаться с вашими дизайнерами и печатниками.
Понимание того, как цвета взаимодействуют и их отношения на цветовом круге, важно для успешного сочетания цветов.Цветовой круг состоит из трех основных цветов (красный, желтый, синий), трех вторичных цветов (цветов, созданных при смешивании основных цветов: зеленого, оранжевого, фиолетового) и шести третичных цветов (цветов, созданных из основных цветов). и вторичные цвета, такие как сине-зеленый или красно-фиолетовый).
Проведите линию через центр колеса, и вы отделите теплые цвета (красный, оранжевый, желтый) от холодных цветов (синий, зеленый, фиолетовый).
Теплые цвета ассоциируются с энергией, яркостью и действием, а холодные цвета часто ассоциируются со спокойствием, умиротворением и безмятежностью. Когда вы узнаете, что у цвета есть температура, вы можете понять, как их использование может повлиять на ваше сообщение.
Когда цвета работают вместе, они создают цветовую схему или цветовую комбинацию.
Дополнительные цвета противоположны на цветовом круге. Поскольку между двумя цветами есть резкий контраст, они действительно могут сделать изображения яркими, но чрезмерное их использование может утомить.
Аналогичные цвета располагаются рядом друг с другом на цветовом круге. При создании аналогичной цветовой схемы один цвет будет преобладать, один поддерживать, а другой — акцентировать.
Триадные цвета равномерно распределены по цветовому кругу и имеют тенденцию быть очень яркими и динамичными.Они создают визуальный контраст и гармонию, выделяют каждый предмет и делают общий образ ярким.
Используя цветовое колесо, вы можете создавать всевозможные великолепные цветовые схемы. Все дело в том, чтобы подобрать правильное сочетание цветов для подходящего случая.
33 красивых цветовых сочетания для вашего следующего дизайна
—
1. Розовый и изюм
Разработка логотипа: merci dsgn, шестнадцатеричный код: # e52165 и # 0d1137
.Высокий контраст между этими двумя цветами создает яркую динамичную энергию.Ярко-розовый цвет вызывает веселье и юность с оттенком женственности.
2. Красный, морская пена, нефрит и фиолетовый
Дизайн: Mad PepperШестнадцатеричный код: # d72631, # a2d5c6, # 077b8a и # 5c3c92
Эта комбинация, основанная на триаде, представляет приглушенные цветочные цвета, которые вызывают умиротворение и обновление с винтажным чутьем.
3. Желтый, пурпурный, голубой и черный
Дизайн обложки книги Стивена.Шестнадцатеричный код: # e2d810, # d9138a, # 12a4d9 и # 322e2f
Почти каждый проект печати основан на этих четырех цветах чернил.Вместе они могут составить любой цвет, который только можно вообразить. По отдельности они создают яркую, современную и полную жизни цветовую схему.
4. Горчично-черный
Дизайн упаковки НаталиноШестнадцатеричный код: # f3ca20 и # 000000
Сочетание желтого и черного создает ощущение мужественности, современности и доступности. Это сочетание также имеет культурный подтекст, означающий «опасность» или «предупреждение».
5. Пурпурный, золотарник, бирюза и кирпич
Дизайн упаковки: Холли Макалистер.Шестнадцатеричный код: # cf1578, # e8d21d, # 039fbe и # b20238
.Эта разноцветная комбинация объединяет в одной палитре много индивидуальности.Желтый цвет, как наиболее заметный цвет, указывает на дружелюбие и доступность, в то время как акцентные цвета добавляют тон игривости и зрелости.
6. Оттенки розового и коричневого
Дизайн упаковки Мартиса ЛюпусаШестнадцатеричный код: # e75874, # be1558, # fbcbc9 и # 322514
Pink — современный, молодой и роскошный, а сочетание различных оттенков придает дизайну еще больше движения и глубины. Сочетание розового с темно-коричневым добавляет важный уровень контраста и серьезности.
7. Золото, уголь и серый цвет
Дизайн упаковки выполнен ananana14Шестнадцатеричный код: # ef9d10f, # 3b4d61 и # 6b7b8c
Идеальное сочетание солнечного света и серьезности. Золото олицетворяет природу и жизнерадостность, которое прекрасно сочетается с двумя разными оттенками черного и серого, которые добавляют слой зрелости.
8. Темно-синий, миндальный, красно-оранжевый и манго
Дизайн фирменного стиля — ложка lancerШестнадцатеричный код: # 1e3d59, # f5f0e1, # ff6e40, # ffc13b
На фоне нейтрального миндаля эта цветовая гамма темно-синего цвета в сочетании с огненными акцентами придает надежности и энергичности.
9. Желто-коричневый, глубокий бирюзовый и черный
Дизайн этикетки: merci dsgn, шестнадцатеричный код: # ecc19c, # 1e847f, # 000000
На основе натурального мужского загара эта комбинация выводит бирюзу на первый план, чтобы продемонстрировать ее универсальность как цвет, пробуждающий природу и возрождение.
10. Темно-синий, охра, жженая сиена и светло-серая
Дизайн упаковки Mad pepperШестнадцатеричный код: # 26495c, # c4a35a, # c66b3d, # e5e5dc
Нейтральный фон помогает естественным цветам этой землистой схемы проявиться на их упаковке.
11. Сиреневый, сапфировый и синий порошкообразный
Дизайн упаковки разработан ananana14Шестнадцатеричный код: # d9a5b3, # 1868ae, # c6d7eb
Вместе богатый лиловый и нежный голубой пудр в этой цветовой комбинации кричат о женственности. Яркий сапфир добавляет второй слой современного шика.
12. Синий, бордовый и индиго
Веб-дизайн: MithumШестнадцатеричный код: # 408ec6, # 7a2048, # 1e2761
Являясь центральным цветом этой цветовой схемы, синий символизирует доверие и ответственность.По мере того, как градиент движется к индиго и темно-бордовому, мы испытываем крайнюю страсть.
13. Малина и оттенки синего
Дизайн плаката Яна ДугласаШестнадцатеричный код: # 8a307f, # 79a7d3, # 6883bc
Подобно палитре выше, надежный синий составляет основу этой комбинации, а розовато-пурпурная малина добавляет роскошной женственности.
14. Глубокий сосново-зеленый, оранжевый и светло-персиковый
Разработка логотипа VulcanШестнадцатеричный код: # 1d3c45, # d2601a, # fff1e1
Оранжевый, как один из наименее используемых цветов бренда, действительно выделяется из толпы.Этот цвет бодрит и бодрит. Светло-персиковый оттенок придает ему немного молодости, а глубокие акценты сосново-зеленого цвета создают тепло и естественный комфорт.
15. Морская пена, лосось и флот
Дизайн — ложка lancerШестнадцатеричный код: # aed6dc, # ff9a8d, # 4a536b
Идеальная пляжная палитра. Это пастельное сочетание морской пены, лосося и темно-синего цвета демонстрирует любимые всеми прибрежные цвета и вызывает умиротворение и тепло, которые исходят от дня, проведенного на берегу океана.
16.Руж, зеленый и пурпурный
Дизайн обложки книги Яна ДугласаШестнадцатеричный код: # da68a0, # 77c593, # ed3572
Яркая женственность, богатая роскошь и акцент смелой жизни. Это блестящее сочетание всего в трех простых цветах оживит любой простой черно-белый дизайн.
17. Бирюзовый, коралловый, бирюзовый и серый
Дизайн: sheva ™Шестнадцатеричный код: # 316879, # f47a60, # 7fe7dc, # ced7d8
Эта бесплатная комбинация сочетает умиротворение сине-зеленых оттенков с небольшими всплесками коралловой страсти.Элегантный серый цвет завершает палитру.
18. Фуксия, сепия, ярко-розовый и темно-фиолетовый
Дизайн Душана Клепича. DK ™Шестнадцатеричный код: # d902ee, # ffd79d, # f162ff, # 320d3e
Яркое тепло оживляет закат в золотой час в этой потрясающей комбинации. Три оттенка розового и фиолетового оттенков создают ощущение роскоши, а акцент сепии добавляет винтажной дружелюбности.
19. Светло-розовый, шалфейный, небесно-голубой и виноградный
Упаковка кофе от Дарьи В.Шестнадцатеричный код: # ffcce7, # daf2dc, # 81b7d2, # 4d5198
Еще одна прекрасная тропическая палитра: эти четыре цвета напоминают о лучшем из пляжной жизни.Их пастельные оттенки сохраняют их индивидуальность молодой, современной и беззаботной.
20. Бежевый, черно-коричневый и коричневый
Дизайн этикетки: GiocovisionШестнадцатеричный код: # ddc3a5, # 201e20, # e0a96d
Три оттенка коричневого цвета сочетаются в винтажной палитре, одновременно классической и серьезной, а также теплой и гостеприимной.
21. Сепия, бирюзовый, бежевый и шалфейный
Дизайн упаковки Томас МиляускасШестнадцатеричный код: # edca82, # 097770, # e0cdbe, # a9c0a6
Идеально подходит для продуктового питания или ресторана. Эта органическая цветовая гамма сочетает в себе четыре пастельных землистых тона, подчеркивающих природу и окружающую среду.
22. Желто-зеленый, оливковый и лесной зеленый
Можно спроектировать с помощью cynemesШестнадцатеричный код: # e1dd72, # a8c66c, # 1b6535
Эти три оттенка зеленого — идеальная палитра для этого напитка с мятой и лаймом. Вместе они образуют блестящую смесь азарта и молодости.
23. Пурпурный, желтый и пурпурный
Дизайн плаката LitlastШестнадцатеричный код: d13ca4, # ffea04, # fe3a9e
Модерн: проверка. Молодой: проверьте. Жирным шрифтом: чек, чек, чек.Эта динамичная цветовая комбинация не требует больших усилий, чтобы произвести первое впечатление.
24. Горчица, шалфей и зеленый лес
Дизайн упаковки Мартиса ЛюпусаШестнадцатеричный код: # e3b448, # cbd18f, # 3a6b35
Эти три грубых тона намекают на дерево, деревья и листья — те же естественные цвета в самом продукте.
25. Бежевый, шиферный и хаки
Дизайн этикетки Аги АмриШестнадцатеричный код: # f6ead4, # a2a595, # b4a284
Два дополнительных оттенка коричневого худого мужского.Акцент серого цвета хаки добавляет нотку элегантности и зрелости.
26. Бирюза и фиолетовый
Дизайн ANAMOLLYШестнадцатеричный код: # 79cbb8, # 500472
Холодные тона не обязательно должны означать приглушенные тона. Эта бирюзово-фиолетовая комбинация создает контрастное волнение.
27. Светло-розовый, зеленый и морская пена
Разработка логотипа svart inkШестнадцатеричный код: # f5beb4, # 9bc472, # cbf6db
Триада мягких оттенков: это сочетание натуральных зеленых и голубых оттенков с женственными розовыми акцентами создает ощущение безмятежности, тепла и роскоши.
28. Алый, светло-оливковый и светло-бирюзовый
Дизайн обложки альбома NevergohungryШестнадцатеричный код: # b85042, # e7e8d1, # a7beae
Чрезвычайно приглушенный взгляд на основные цвета, эта комбинация добавляет много серого, чтобы сохранить индивидуальность палитры серьезной и загадочной.
29. Красный, желтый, голубой и ярко-фиолетовый
3D-дизайн Pinch StudioШестнадцатеричный код: # d71b3b, # e8d71e, # 16acea, # 4203c9
Эта палитра — праздник! С удобными для детей основными цветами вы получите комбинацию, полную радости, юности и оптимизма.
30. Оливковый, бежево-коричневый
Дизайн упаковки YokaonaШестнадцатеричный код: # 829079, # ede6b9, # b9925e
Красивое сочетание коричневого предлагает серьезный профессионализм. Оливковое масло дает намек на природу. Вместе это цветовая схема, которая передает обоснованную зрелость.
31. Оттенки синего и зеленого
Веб-дизайн: DSKYШестнадцатеричный код: # 1fbfb8, # 05716c, # 1978a5, # 031163
Эта комбинация холодных тонов, наполненная яркими, естественными цветами, по-прежнему позволяет передать ощущение движения и жизни благодаря высокой контрастности.
32. Бирюзовый, горчичный и черный
Дизайн этикетки _fra_Шестнадцатеричный код: # 7fc3c0, # cfb845, # 141414
Это классическое сочетание холодных и теплых тонов вызывает умиротворение и бодрость. Черный цвет добавляет смелый современный акцент.
33. Персик, лосось и чирок
Иллюстрация felipe_charriaШестнадцатеричный код: # efb5a3, # f57e7e, # 315f72
Лосось и персик — два оттенка, которые идеально дополняют друг друга. Бирюзовый акцент создает второй слой глубины.
Создайте свой бренд с помощью комбинаций летучих цветов
—
От теории цвета до классических комбинаций — мы рассмотрели отличные цветовые схемы из разных уголков спектра. Будь то гладкая и простая или острая и эклектичная, правильная цветовая палитра будет поддерживать ваш бренд во всех отношениях, делая его узнаваемым и культовым.
Идите вперед, погонитесь за радугой.
Нужно что-то оформленное?
Наши дизайнеры могут создать для вас все, что угодно.
50 красивых цветовых комбинаций (и способы их применения в вашем дизайне)
Один из ключей к оживлению вашего дизайна — выбор правильной цветовой комбинации.
Пытаетесь ли вы вызвать чувства, связанные с захватывающим дух пейзажем, романтическим закатом или яркой динамичной сценой, требуется натренированный глаз, чтобы собрать воедино идеальные оттенки, чтобы донести свое послание до дома.
Чтобы сэкономить ваше время и усилия в поисках идеальной цветовой комбинации, мы создали список красивых цветовых схем, которые вы можете использовать в любом из ваших проектов.
Эти предустановки цвета уже доступны для вас в Visme, поэтому вы можете легко применить их к любому из ваших собственных дизайнов, просто щелкнув цветовую комбинацию по вашему выбору, как показано ниже.
Теперь, когда вы увидели, как просто применять собственные цветовые схемы прямо в Visme, вот 50 уникальных и ярких цветовых комбинаций, которые наша команда дизайнеров создала специально для вас.
1 Синий закат
Сочетание ярких желтых и оранжевых оттенков с темно-синим и ярко-оранжевым делает эту комбинацию привлекательной практически для любого дизайна, который должен посылать послание энергии и жизненной силы.
2 Классика и ретро
Эта комбинация преимущественно темных цветов — от темно-серовато-голубого и темно-умеренно-красного до темно-оранжевого — делает эту комбинацию идеальной для создания приглушенного образа. Для более простых дизайнов вы также можете использовать только три верхних цвета.
3 мерцающих синих и зеленых
Здесь у нас есть сочетание сильного и яркого синего с мягким желтым и ненасыщенным темно-оранжевым, что идеально, если вы хотите что-то более захватывающее и динамичное, чем типичные синие и коричневые.
4 Закат над болотом
Это сочетание ненасыщенного темно-синего с мягким желтым и ярко-оранжевого и красного делает эту красочную комбинацию подходящей для беззаботной, юношеской темы.
5 Средиземноморский блюз
Это идеальное сочетание серовато-синего с ненасыщенным темно-синим и ряда коричневых оттенков пробуждает чувства, связанные с этой волшебной и таинственной средиземноморской атмосферой. Он идеально подходит для дизайнов, связанных с путешествиями или природой.
6 экзотических орхидей
Здесь представлена гамма синего, дополненная темно-голубым и ярко-оранжевым — идеально подходит для яркого и яркого дизайна.Вы также можете выбрать цвета, которые больше всего подходят вашему дизайну, например, верхний темно-синий и оранжевый в качестве акцентного цвета.
7 Утонченность и спокойствие
Эта цветовая комбинация достаточно универсальна, чтобы ее можно было использовать в различных дизайнерских проектах, от изысканных и высококлассных до спокойных и комфортных.
8 пурпурных и желтых
Пурпурный цвет в сочетании с яркими желтыми и оливковыми тонами делает эту палитру освежающей и нетрадиционной.
9 Голубые горные вершины и облака
Эта гамма синего в сочетании с темно-желтым и светло-серовато-розовым делает эту универсальную цветовую схему идеальной для профессионального и консервативного дизайна.
10 Оранжевый закат
Темно-розовый и темный ненасыщенный фиолетовый сочетаются здесь с мягким красным и мягким оранжевым, чтобы создать яркую и красочную палитру, которую можно использовать в различных дизайнах, чтобы передать энергию и тепло.
11 Винтаж 1950-х
Для создания классического ретро-образа, вызывающего легкую ностальгию, вот уникальное сочетание слегка ненасыщенного синего и оранжевого цветов сверху и снизу, а также насыщенного голубого и мягкого желтого.
12 Яркие и ретро
Это оригинальное сочетание красного, розового и ярко-оранжевого делает эту универсальную и привлекательную палитру, которую можно использовать по-разному, например, применяя первые три цвета или, альтернативно, три нижних цвета. дизайн.
13 красных и желтых орнаментов
Эта палитра состоит из очень темных красных и ряда желтых и оранжевых оттенков. Выберите любой из этих цветов, чтобы придать вашему дизайну смелый вид.
14 Бирюзовый и красный
Это красочное изображение спелых фруктов создает уникальное сочетание синего, голубого и красного цветов.Если вы решите смешивать и сочетать два или три цвета за раз, вы можете создать ряд палитр для своих дизайнов, от профессиональных с холодными цветами до более оптимистичных и энергичных.
15 Голубая росянка
Это изображение плотоядного растения дает начало синей гамме, дополненной темно-красным и коричневым тоном.
16 Классика 70-х
Если вы ищете что-то напоминающее 70-е, вы можете создать множество цветовых схем с этим изображением кемпера Volkswagen, курсирующего по пляжу.
17 Готическая архитектура
Это изображение собора в Нормандии послужило вдохновением для создания этой схемы, подходящей для крутого, контролируемого и профессионального дизайна.
18 Огненно-красный пейзаж
Эта ледяная швейцарская гора, окруженная облаками, имеет эту цветовую схему, которая включает черный и ряд красных.
19 Городской пейзаж
Если вы ищете современную, динамичную цветовую схему, эта палитра, вдохновленная этим изображением городского пейзажа, предоставляет уникальную группу цветов на выбор.
20 Естественная элегантность
Этот красивый портрет невесты вдохновляет эту гармоничную палитру, которую можно использовать в широком спектре дизайнов, чтобы передать профессионализм и консерватизм или изысканность и естественную элегантность.
21 Летняя черника
В этой палитре сочетаются фиалковый, насыщенный розовый и желтый, переполненный цветами, напоминающими весеннее и летнее время года.
22 На пристани бухты
Эти морские цвета идеально подходят для пробуждения прохлады и спокойствия после полудня, проведенного на пристани в заливе, «наблюдая за приливом».«
23 землисто-зелёных
Эти оливковые и коричневые тона отлично подходят для тем, связанных с экологичностью, природой и приземленностью.
24 старых автомобиля и синие джинсы
Вот еще одна уникальная комбинация, состоящая из темно-синего и темно-зеленого с мягким желтым и ненасыщенным темно-красным.
25 ягод в большом количестве
Эти сочные многоягодные цвета можно использовать все сразу или, в зависимости от вашего проекта, два или три за раз. Например, вы можете добиться монохроматического эффекта, используя только первые три.
26 Освежает и бодрит
Это захватывающее дух изображение каменной арки в национальном парке послужило вдохновением для создания этой веселой и веселой цветовой схемы, которая, несомненно, добавит значительную дозу жизни и жизненной силы вашему дизайну.
27 Безмятежность и расслабление
Эта успокаивающая цветовая палитра напоминает расслабляющую прогулку вдоль берега пляжа, когда ветер треплет волосы. Цветовая гамма зеленого с серым оттенком делает эту схему идеальной для множества проектов.
28 Аква Грин
Эта гамма голубых и зеленых лаймов напоминает все, что связано с подводными лодками, лодками, подводным плаванием и кораблями.
29 Летние каникулы
Этот микс синего в сочетании с бежевым и коричневым оттенками пробуждает эмоции, связанные с веселым летним днем на солнце.
30 Сумеречная луна
Ищете тему Хэллоуина? Эта линейка оранжевого и черного идеально подходит для любого дизайна, связанного с осенью или Хэллоуином.
31 Swiss Meadows
Темно-синий в сочетании с золотом и бронзой в этой комбинации часто встречается в официальных цветах школьных команд.Однако розовый цвет добавляет уникальности и красочности, с помощью которых можно выделить ваш дизайн.
32 Дикая природа тропиков
Если вы хотите добавить энергии своему дизайну, вы можете применить все цвета в этой схеме или только два или три цвета за раз (например, три верхних или нижних цвета).
33 Детские игры
В этом веселом, но стильном сочетании сочетаются следующие цвета: темно-синий, умеренно-красный, ярко-оранжевый и серовато-оранжевый.
34 Закат в Гамбурге
Это изображение завораживающего заката в Гамбурге напоминает об этих теплых цветах, варьирующихся от темно-красного и умеренно оранжевого до серовато-синего и серовато-оранжевого.
35 Лимон в воде
Смесь нежно-желтого и оливкового с черным и серовато-фиолетовым цветом создает смелый и привлекательный дизайн.
36 Вдохновляющее и романтическое
Этот красивый снимок захватывающего дух заката вдохновил на создание этой палитры, состоящей из темно-розового, фиалкового и красного цветов.
37 Риверсайд Лондон
Хотя технически эта цветовая палитра состоит из коричневого, оранжевого и серовато-красного цветов, ее можно использовать в качестве монохромной схемы в любом из ваших дизайнов.
38 Черный и ярко-оранжевый
В этой контрастной схеме сочетаются апельсиновый, черный и темно-серовато-салатовый цвета.
39 Индийских полей
Это экзотическое изображение послужило вдохновением для создания этой красочной схемы, состоящей из ряда зеленых и ярко-красных цветов.
40 Ночь джаза
Выберите два или три из этих цветов, чтобы добавить характер вашему дизайну. Вы можете использовать либо два верхних в сочетании со светло-серовато-желтым, либо три нижних вместе.
41 Яркий и энергичный
Если вы хотите передать энергию и доступность, эта яркая цветовая схема сделает свое дело. Более прохладные цвета наверху идеально дополняются мягкими красными внизу.
42 Землистый и естественный
Это сочетание зеленых и коричневых цветов идеально подходит для любого дизайна, связанного с окружающей средой, устойчивостью, природой или дикой природой.
43 Чешская архитектура
Эта уникальная палитра напоминает красочные фасады домов по всей Европе. Вы можете использовать все эти цвета одновременно или придерживаться двух или трех цветов для каждого отдельного проекта.
44 Синий акцент
Если вы ищете дизайн, который наверняка привлечет чей-то взгляд, выберите этот диапазон оттенков серого, дополненный идеальным мягким голубым акцентом.
45 Иллюзий калейдоскопа
Лаймовая зелень в сочетании с коричневым и персиковым приводит к этой палитре, которую можно разделить на несколько других комбинаций с двумя или тремя цветами.
46 Зимний амбар
Сделайте свой дизайн ярким с помощью этой уникальной цветовой схемы, состоящей из диапазона холодного синего и характерного темно-красного.
47 Ярко-фруктовый
В этом веселом сочетании холодных и теплых цветов сочетаются дизайны, связанные с едой, диетой и питанием.
48 Пурпурный чеснок
В этой схеме сильные красные оттенки дополняются светло-серовато-пурпурным и темно-красным с серыми оттенками.
49 Краски природы
Диапазон синих и коричневых оттенков делает эту цветовую схему привлекательной для тем, стремящихся передать постоянство, прозрачность и надежность.
50 Восточная роскошь
Светло-фиолетовый, синий и оранжевый с серыми оттенками сочетается здесь с темно-синим и ярко-оранжевым, чтобы добавить цвет и живость к схеме.
Попробуйте эти цветовые комбинации в своем следующем дизайнеГотовы начать использовать одну из этих цветовых комбинаций в своем следующем дизайне? Зарегистрируйте свою учетную запись Visme и введите шестнадцатеричные коды прямо в палитре цветов!
49 красивых цветовых палитр для вашего следующего дизайн-проекта
Ищете цветовую палитру для своего следующего дизайн-проекта? Я знаю, что иногда бывает сложно выбрать цвета для проекта, особенно если вы начинаете с нуля, а это сольный проект.
Но не о чем беспокоиться, здесь на помощь приходит множество инструментов, таких как Color-hex, Adobe Color, Color Hunt и многие-многие другие.
Точно так же Color Lab — отличная учетная запись Instagram, которая может быть полезна для поиска вдохновения для цветовой палитры. Они регулярно делятся красивыми цветовыми палитрами в своей учетной записи вместе с шестнадцатеричными кодами и цветовыми градиентами.
Они заимствовали эти великолепные цветовые палитры из красивых изображений природы, домашних животных, архитектуры, пейзажей и потрясающих моментов.Давайте посмотрим на некоторые из них.
1. Ярко-оранжевый
2. Осенняя прогулка
3. Холодный закат
4. Багровый Форрест
5. Mountain Sky
6. Пастельные чернила
7. Санторини Блю
8. Бледная пустыня
9. Закат силуэт
10. Обед в деревенском стиле
11. Глаза совы
12. Банджи синий
13. Глубокое море
14. Неоновый восторг
15. Оранжевая туманность
16.Горчично-желтый
17. Ленивое воскресенье
18. Крадущийся тигр
19. Осенние листья
20. Горная дорога
21. Потускневшая кабина
22. Фуксия Vista
23. Ультрафиолетовый
24. Открыто до конца
25. Бирюзовые оттенки
26. Темно-синий
27. Неоновые огни
28. Бесконечный океан
29. Поездка на пляж
30. Beach Hut
31. Розовый закат
32. Медные тона
33.Лаки Красный
34. Изысканный красный
35. Летние фрукты
36. Красный Додж
37. Mountain Glow
38. Расплавленная лава
39. Промышленный кирпич
40. Розовый фламинго
41. Шотландское нагорье
42. Оушен-Хайлендс
43. Зеленый фарватер
44. Прекрасная игра
45. Каскадный мох
46. Извилистые дороги
47. Утреннее отражение
48. Шотландский восход
49.Бледные тона
Вы нашли идеальную цветовую палитру для своего следующего дизайн-проекта? Или вы хотите сделать свой собственный? Если да, то можете ознакомиться с этим постом, который поможет вам в создании собственной цветовой палитры: How To Make Your Own Color Palette
Надеюсь, вам понравилась эта коллекция. Если да, сообщите нам и The Color Lab. Поделитесь им с друзьями, которым, возможно, понравится, и поделитесь своими взглядами в разделе комментариев ниже 🙂
СвязанныеОкончательное руководство по цветам и цветовым палитрам
Следует помнить, что не все цвета в выбранной вами палитре должны быть представлены одинаково.Всегда есть доминирующий (или несколько) . Таким образом можно привлечь внимание к определенным частям страницы. Есть техника, известная как эффект изоляции, когда вы используете один цвет только для определенной цели. Например, кнопка «Добавить в корзину». Вы бы сделали их все в одном ярком цвете и не стали бы использовать этот цвет ни для чего другого.
Типы цветовых схем
Цветовые палитры можно разделить на типы в зависимости от того, какие цвета используются. Итак, это типы цветовой палитры:
Монохроматическая цветовая схема использует вариации оттенков и оттенков одного и того же оттенка. Аналогичная цветовая схема использует цвета, расположенные рядом друг с другом на цветовом круге. Дополнительная цветовая схема использует цвета, противоположные друг другу на цветовом круге. Раздельный дополнительный — это цветовая схема, в которой используется один цвет и два других, которые находятся по обе стороны от противоположного цвета. Triadic Complementary (Triad) — это цветовая схема, в которой используются цвета, равномерно распределенные по кругу. Tetradic (Double Complementary) использует два набора дополнительных цветов.Если вы чувствуете себя достаточно уверенно, вы всегда можете пойти на что-то совершенно нестандартное, но в большинстве случаев лучше всего просто, поэтому не старайтесь создавать что-то новое, когда хорошо известные и часто используемые палитры работают. так же, как и.
Генераторы цветовой палитры
Работайте умнее, а не усерднее. Отличный совет для жизни, и я думаю, что генераторы цветовой палитры — отличный способ работать умнее. Конечно, вы можете создавать свои собственные полностью настраиваемые цветовые палитры, но генераторы — отличный инструмент, чтобы сделать процесс быстрым и простым.Некоторые из них богаты функциями, которые позволяют настраивать каждую деталь, так что это будет так, как вы хотите.
Но для тех, кто просто хочет получить красивую цветовую палитру и не возиться со всеми настройками — есть случайные варианты палитры, палитра из изображения, галереи готовых цветовых палитр и все такое. иначе, чтобы палитра была как можно быстрее. Я расскажу вам больше о некоторых из самых популярных генераторов цветовой палитры, чтобы вы могли выбрать, какой из них лучше всего соответствует вашим потребностям.
Adobe Color CC
- Генератор цветовых схем на основе типов цветовой палитры (монохроматическая, аналоговая и др.) ;
- Можно отдельно настраивать цвета в палитре;
- Раздел «Обзор» имеет несколько палитр, а также цветовые палитры с соответствующими изображениями;
- Имеет возможность создавать палитру на основе изображения;
- Возможность сохранения созданных вами палитр.
Paletton
- Простота использования — перетаскивание круга в цветовом круге;
- Вы можете проверить, как каждая цветовая палитра будет выглядеть на реальной странице, с помощью опции «Примеры»;
- Имеет раздел с предустановками, которые можно использовать и настраивать при необходимости;
- Может экспортировать палитры в разные форматы.
Coolors
- Интуитивно понятный интерфейс, который создает палитру, просто щелкая пробел;
- В генераторе можно настроить всю палитру вместе или каждый оттенок отдельно;
- Coolors также имеет библиотеку готовых цветовых палитр;
- Вы также можете отфильтровать результаты, выбрав такой параметр, как, например, определенный цвет или «темный»;
- Расширение для Photoshop и иллюстратора;
- Особый вид для дальтонизма.
Canva
- Может создавать палитру из изображения;
- Простой генератор на основе цветового круга;
- Позволяет настраивать каждый цвет палитры;
- Можно создать графику Canva с помощью созданной вами палитры;
- Не так много вариантов, как у других генераторов, но очень простые;
- Идеально подходит для тех, кто не хочет тратить много сил на выбор цвета.
0to225
- Инструмент, который создает более темные и светлые цвета для определенного цвета, который вы выбрали;
- Простой интерфейс, в котором вы можете сразу щелкнуть по выбранному цвету;
- Есть возможность ввести определенный цвет;
- Когда вы щелкаете по любому из созданных цветов, он мгновенно копируется в буфер обмена.
Примеры цветовой палитры
Есть несколько цветовых схем, которые чаще всего используются для определенных случаев и полей, поэтому позвольте мне рассказать, что это такое. Чтобы дать вам вдохновляющее направление, просмотрите витрину Visual Composer и найдите выдающиеся веб-сайты, подобные приведенным ниже.
Цветовые палитры для свадьбы
Свадебная страница обычно элегантна, легка и проста. Так что цветовая палитра должна отражать это ощущение. Пастель, розовый, белый, бежевый — они очень хорошо представлены.
Хелен и Джош
The Pittmans
Цветовые палитры для технологий
Технологии — это обычно область, где веб-сайты могут быть более драматичными и необычными. Вот почему цветовые палитры могут быть более экспериментальными и смелыми. Вы увидите более темные цвета, так как они ассоциируются с роскошью.
drawmote
JetStyle
Bloody
Цветовые палитры для окружающей среды
Веб-сайты, связанные с окружающей средой, часто используют «природные» цвета, такие как зеленый и коричневый, из-за ассоциаций, которые они вызывают.Поскольку «зеленый» является ключевым словом, тесно связанным с природой, здесь это отличный выбор. Помните эффект изоляции? Он очень часто используется на сайтах такого типа, на которых выделяется зеленый цвет.
HuffPost
Дикая тайга
Sooma
Цветовые палитры для бизнеса
Корпоративные веб-сайты просты и удобны для чтения. Обычное сочетание белого фона и однотонной цветовой гаммы. С точки зрения психологии синий очень популярен, так как это цвет, который нравится большинству людей.Это всегда безопасный выбор.
QAccounting
notis
Zapare Technologies
Better Therapeutics
Цветовые палитры для продуктов питания
Веб-сайты, связанные с пищевыми продуктами (как и связанные с природой), хорошо работают с цветовыми схемами на основе ассоциаций. Так что черпать вдохновение в пищевых красителях, которые вы хотите добавить, — хорошая идея.
El Burro
Jude’s Ice Cream
Völlerei Restaurant & Bar
Заключение
Раскрасить много, поэтому непросто охватить все аспекты в одной публикации (а не той, которую выиграли бы вы По крайней мере, не нужно читать часами), но в контексте создания веб-сайта вы теперь должны обладать базовыми знаниями, чтобы принять хорошо продуманное решение.Примите во внимание психологию цвета, посмотрите несколько хороших примеров, попробуйте генераторы, и все будет хорошо.
30 цветовых палитр для веб-сайтов — выберите цвета для своего веб-сайта
Цвет — это первое, что люди замечают на вашем сайте. Начните с этих профессионально созданных цветовых комбинаций.
Создание онлайн-присутствия является абсолютной необходимостью для любого бизнеса. Помимо создания собственного веб-сайта, внешний вид и оформление вашего веб-сайта должны дополнять ваш бренд и товарное предложение.Психология цвета и брендинг идут рука об руку; тон и настроение, привязанные к определенным цветам, говорят потребителям, какой у вас бизнес. Бренды, в которых используются землистые оттенки, могут казаться естественными и экологичными, в то время как бренды, использующие розовый цвет, могут казаться более женственными.
Ваш продукт или услуга и ваша целевая аудитория также во многом определяют цвета, которые вы используете в своем бренде и на веб-сайте. Ваш бизнес ориентирован на детей до десяти лет или он интересен взрослой аудитории в возрасте от двадцати пяти до сорока пяти лет? Если вам сложно понять, какие цвета нравятся вашей целевой аудитории, узнайте, как ваши конкуренты подходят к использованию цвета.
Как выбрать цвета для вашего веб-сайта
Выбирая цветовую схему для своего веб-сайта, лучше всего ограничить палитру четырьмя оттенками или меньше. Простая формула — найти один доминирующий оттенок, один вторичный оттенок и один акцентный оттенок. Доминирующие и второстепенные оттенки могут иметь цветовые вариации, например оттенки, оттенки или тона. Доминирующие цвета должны говорить о типе вашего бренда и бизнеса. Второстепенные или вторые по популярности оттенки должны контрастировать или дополнять ваш доминирующий оттенок.Акцентные цвета должны выделяться и лучше всего подходить для ссылок, кнопок, значков и других мелких элементов. Если у вас есть логотип яркого оттенка, попробуйте добавить его в качестве основного цвета.
При разработке веб-сайта придерживайтесь четырех или менее цветов. Изображение через Visual Generation.Конфликтующие цветовые палитры могут оттолкнуть потребителей от вашего веб-сайта. Лучшие оттенки приятны для глаз и легко читаются на экранах разных размеров и форматов. Хорошо спроектированный веб-сайт не сочетает в себе ярко-желтый и белый цвета, поскольку сочетание двух светлых оттенков затрудняет чтение информации.Также очень важно учитывать слои и цвета, а также то, как они выглядят рядом друг с другом.
Цветовая схема вашего веб-сайта имеет решающее значение для имиджа вашего бренда. Он формирует то, как посетители видят ваш сайт, развивает чувство порядка и иерархии и позволяет выделять важную информацию. Согласованная цветовая схема также создает ощущение потока и баланса между разными страницами. Гармоничная цветовая палитра действительно больше, чем просто эстетика.
Читайте дальше, чтобы найти тридцать цветовых палитр для различных отраслей, а также десять макетов веб-сайтов, которые помогут вам визуализировать свою собственную палитру веб-сайта.
Цветовые палитры для сайтов о здоровье и красоте
Отрасли здоровья и красоты обычно способствуют благополучию, заботе о себе и счастью. Выбирая оттенки для своего салона красоты, подумайте о выборе приглушенных тонов в холодных или теплых вариантах. Целая палитра ярких цветов может быть резкой для глаз и ощущать что угодно, только не спокойствие и умиротворение.
1. Аромат лаванды
Использование холодных тонов, таких как фиолетовый, зеленый и синий, — отличный способ вызвать умиротворение и умиротворение на вашем веб-сайте.Фиолетовый символизирует роскошь и покой, синий символизирует верность и безмятежность, а зеленый внушает чувство безопасности и роста. В сочетании эти оттенки идеально подходят для брендов, рекламирующих товары, которые способствуют спокойствию.
Используйте холодные тона, чтобы придать дизайну безмятежность. Изображение предоставлено Эйрен Фагус.2. Безмятежное небо
Nature предлагает лучшие цветовые палитры. Небо на рассвете и в сумерках служит источником вдохновения для любого веб-сайта, особенно тех, которые продвигают товары для здоровья.При использовании по отдельности кораллово-розовый и апельсиновый цвета могут казаться резкими, но в сочетании с зелеными и серыми оттенками палитра получается гармоничной и сбалансированной.
Не бойтесь черпать вдохновение в природе. Изображение предоставлено Тананья Питхи.3. Йога на открытом воздухе
Вдохновение из пейзажей идеально подходит для пропаганды практик йоги и медитации. Используйте акцентные цвета, такие как глубокий кораллово-розовый, чтобы компенсировать более прохладные тона природы.
Используйте яркие цвета, чтобы добавить свежести палитре с естественной тематикой.Изображение Юлия Григорьева.4. Очаровательный аптекарь
Оранжевые оттенки создают дружелюбное поведение, особенно в его ярких формах. Приглушая этот популярный оттенок и добавляя оттенки и тона, бренды могут привнести намек на изысканность в свои веб-сайты.
Медовые тона придают веб-дизайну изысканность и гламур. Изображение предоставлено Ефетовой Анной.5. Спа-центр
Оранжевый и синий — классические дополнения. Выбирайте приглушенные версии, чтобы уравновесить эти теплые и холодные тона.При умеренном использовании в качестве акцента оранжевый может придать яркости веб-сайту спа или косметолога.
Приглушенный оранжевый цвет придает энергию успокаивающей зелени. Изображения через Anna Ok, PureSolution и васанаджай.Цветовые палитры для предприятий по продаже продуктов питания и напитков
Использование ярких и привлекательных оттенков является ключевым моментом при продвижении еды и напитков на вашем сайте. Яркие цвета выглядят более привлекательно, чем мутные серые оттенки. Нанося привлекательные цвета на свой сайт, обязательно применяйте их вдумчиво, а не небрежно.
6. Яркая чаша
Яркие цвета продуктов представляют собой красивую цветовую палитру для блогов о еде, ресторанов и бакалейных лавок. Красновато-розовый и зелень авокадо отлично сочетаются друг с другом в качестве классического дополнения.
Разбудите аппетит свежей зеленью и ярким цветом. Изображение предоставлено Тимолиной.7. Звездный синий
Blueberries — настоящая звезда шоу. Глубокие синие и пурпурные тона этого универсального фрукта являются отличным источником вдохновения для магазинов напитков и кулинарных блогов.Палитра холодных тонов гармонична и радует глаз.
Мягкие прохладные тона привлекают внимание зрителя, не отвлекая его. Изображение предоставлено Ольгой Мильцовой.8. Контрастный цитрус
Яркость апельсиновых цитрусовых выделяется на голубом фоне. В паре оранжевый выделяется больше, чем в паре на красном фоне. Добавьте изюминку в свой сайт, используя эту классическую цветовую схему.
Яркий оранжевый и успокаивающий синий — классическая привлекательная комбинация.Изображение предоставлено Kiian Oksana.9. Богатые красные
Red вызывает у зрителей бурные эмоции и повышенный аппетит. Рестораны используют эту цветовую психологию при создании элементов брендинга. При использовании в Интернете ярко-красный цвет может быть слишком резким для зрителей; вместо этого выберите оттенки, оттенки и тона красного, чтобы вызвать аналогичные психологические реакции.
Более мягкие красные тона обладают всей глубиной настоящего красного без резкости. Изображение предоставлено Daxaio Productions.10. Фермерский рынок
Земляные тона и фермерские рынки идут рука об руку. Вместо того чтобы выбирать непривлекательные мутные тона, выберите яркие зеленые и желтые тона в сочетании с насыщенным коричневым.
Цвета урожая вызывают ассоциации с пышными садами и фруктовыми садами. Изображение через marcin jucha и chelovector.Цветовые палитры для сайтов блогов и портфолио
Выбор привлекательной цветовой палитры для вашего блога или веб-сайта портфолио имеет решающее значение для поиска вакансий и клиентов.Хотя большая часть веб-сайта сосредоточена вокруг контента и изображений, нельзя упускать из виду общую палитру. Ключевым моментом является использование игривых и энергичных оттенков; те же оттенки должны дополнять (а не противоречить) вашей работе.
11. Работа с сеткой
Ваша палитра всегда должна хорошо сочетаться с вашим портфолио. Если сомневаетесь, используйте привлекательный розовый в качестве акцента, а затем компенсируйте яркость этого оттенка глубокими синими и зелеными оттенками.
Выбирайте цвета, которые дополняют вашу работу.Мокап через нелелену. Значок заголовка через Mio Buono. Иллюстрации через miniwide, GoodStudio, GoodStudio, Moremar, Ardea-studio, Lavrushka, GoodStudio и GoodStudio.12. Красочная эстетика
Если ваша индивидуальность такая яркая, как эта цветовая палитра, то ваш веб-сайт должен это отражать. Эта комбинация желтого, синего и красного оттенков выделяет любое портфолио или блог.
Используйте радостные цвета, чтобы отразить общительный характер. Изображение предоставлено AlessandroBiascioli.13. Красивая в розовом
При умеренном и преднамеренном использовании розовый цвет успешно пробуждает женственность и беззаботность, что идеально подходит для блоггеров, работающих в женском стиле. Добавьте оттенки желтого, чтобы сайт был веселым и ярким.
Мягкие розово-розовые тона добавляют всплеск женственности. Изображения через Юлию Завалишину, Серенко Наталью и босоточку.14. Коралловая зелень
В то время как сочетание красного и зеленого обычно представляет рождественские праздники, приглушенные вариации этих дополнительных цветов вызывают что угодно, только не.Этот кораллово-красный цвет идеально подходит для акцента на темно-зеленом.
Используйте дополнительные цвета, чтобы придать вашему сайту живость. Изображение предоставлено Victoria43.15. Простая красота
Приглушенный желтый цвет — жидкое золото при правильном использовании. Сместите богатую яркость этого оттенка с бирюзовым и глубоким синим, и вы получите победителя.
Простота тоже работает. Мокап через нелелену. Значок заголовка через Mio Buono. Иллюстрации через Mio Buono, Mio Buono, Mio Buono, Mio Buono, Mio Buono и createvil.Цветовые палитры для экологических сайтов
Веб-сайты, пропагандирующие окружающую среду (или причины, связанные с окружающей средой), становятся все более популярными, поскольку изменение климата становится огромной проблемой. Хотя движение и причина намного перевешивают внешний вид веб-сайта, наличие привлекательного сайта очень полезно.
16. Зеленая красавица
Лесная зелень — потрясающее зрелище при демонстрации окружающей среды на веб-сайте. Добавьте тона натурального дерева и бамбука, чтобы гармонизировать эту палитру и создать ощущение леса.
Теплые нейтральные и глубокие тона драгоценных камней передают изысканность и гармонию. Изображение предоставлено Абрамовой Александрой.17. Рыба-клоун
Океан предлагает множество прекрасных оттенков, которые послужат источником вдохновения для вашего веб-сайта. Классическая комбинация оранжевого и синего цветов оживает с этой рыбой-клоуном и анемоном.
Яркие красно-оранжевые и темно-синие оттенки, напоминающие морскую жизнь. Изображение предоставлено J’nel.18. Воздействие на океан
Пластик сеет хаос на нашей планете, и многие группы начинают действовать.Продвигайте свою преданность планете и своему делу, создав веб-сайт, на котором освещается красота океанского блюза и вред, который наносит пластик.
Черпайте вдохновение в самом море. Изображения через Mr.anaked и WindAwake.19. Блестящие лилии
Лилии действительно прекрасны; их яркие лепестки и дурманящий запах — это то, о чем можно мечтать. В сочетании с темно-зеленой зеленью эти привлекательные желтые оттенки выделяются и подчеркивают любой экологический веб-сайт.
Яркие желтый и глубокий зеленый цвет придают вашему сайту весеннюю свежесть. Изображение предоставлено JUTARAT BUADOK.20. Амазонский тукан
Что не нравится в тукане? Их ярко-оранжевые клювы особенно выделяются на фоне зелени. Как и в случае с клювом этой популярной птицы, нанесите эти яркие апельсины на небольшие акцентирующие элементы, такие как кнопки, ссылки или значки, чтобы создать контраст в более естественных тонах.
Спокойные яркие тропические тона с мягкими нейтральными оттенками. Изображение через MarcusVDT.Цветовые палитры для сайтов фитнеса и тренировок
Яркие, энергичные оттенки — звезда шоу на сайтах, посвященных фитнесу и тренировкам. В этом случае выбор цвета имеет огромное значение и может означать разницу между успешной страницей фитнеса и красивой страницей фитнеса. Мягкие пастельные тона не совсем соответствуют силе и энергии, необходимой для упражнений. Насыщенные красные, синие или желтые цвета действительно символизируют интенсивность тренировок.
21. Силовые тренировки
Гири — распространенное оборудование для силовых тренировок.Как видно на этом изображении ниже, насыщенные желтый и синий контрастируют с окружающими его серыми и черными цветами. Применяя эту палитру к своему веб-сайту, посвященному упражнениям, подумайте об использовании жирного синего и желтого цветов в качестве акцентов для кнопок, ссылок, деталей и логотипов.
Спортивные синие и желтые цвета придадут вашему сайту энергичные акценты. Изображение через ColorMaker.22. Тренажерный зал Excel
Целевая страница, которую ваши зрители видят при первом посещении вашего сайта, должна отражать настроение и тон вашего бизнеса.В этом случае насыщенные красные оттенки, примененные к более глубокому красному, позволяют выделить важную информацию, побуждая ваших зрителей переходить по этим ссылкам.
Глубокий красный цвет — мощный фоновый образ. Изображения через sportpoint и Alex_Colt.23. Ряд мощности
Хотя эти оттенки не такие яркие, как их насыщенные аналоги, темно-розовый и желтый так же выделяются в сочетании с темно-синим. Это говорит о том, что сочетание цветов вашего веб-сайта имеет решающее значение для создания гармоничной страницы, которая соответствует характеру вашего бизнеса.
Глубокие розовый и желтый цвета согревают успокаивающий синий цвет. Изображение предоставлено Dmitrydesign.24. Бесстрашный фитнес
Нет ничего более мощного и сильного, чем насыщенный красный фон. В то время как красные лучше всего подходят для акцентных оттенков, более глубокий тон действительно может оказать влияние, когда другие оттенки сохранены чистыми и простыми. Добавьте ярко-желтый, чтобы побудить зрителей нажать на эту важную кнопку.
Глубокий золотисто-желтый цвет выделяется на фоне теплых красных тонов. Изображения через Джейкоба Лунда и Зубдаша.25. Поход в горы
Суровые пейзажи — отличный источник цветового вдохновения. Оранжевые и серые оттенки хорошо сочетаются с их приглушенным характером. Сочетание яркого красного с этими ненасыщенными цветами легко сделает ваш сайт ярче.
Тренируйтесь и вдохновляйтесь на свежем воздухе. Изображение через everst.Цветовые палитры для сайтов одежды и одежды
Веб-сайты с одеждой и одеждой должны быть связными, веселыми и привлекательными. Тусклый, унылый веб-сайт не побуждает зрителей просматривать или покупать товары.И приглушенные, и насыщенные оттенки отлично подходят для этого типа веб-сайтов. Однако цветовая палитра все равно должна соответствовать тону одежды и самому бренду.
26. Яркая одежда
Ярко-желтый, розовый и синий обычно конфликтуют при неосторожном применении. Однако при осознанном и преднамеренном использовании эти насыщенные цвета могут говорить о живом характере вашего бизнеса. Используйте синий и розовый в качестве доминирующих оттенков, а затем сделайте акцент на желтом.Как всегда, вы также можете уменьшить яркость, добавив белый, серый или черный цвет, чтобы получить более ненасыщенный вид.
Пастельные тона добавляют энергии и оживляют шоппинг. Изображение предоставлено Africa Studio.27. Cool Collective
Выбирая палитру для своего сайта одежды, всегда сосредотачивайтесь на самом продукте. Палитра должна дополнять одежду и модели, но не подавлять их. Нейтральные оттенки могут казаться тусклыми, но при правильном использовании они позволяют продукту действительно сиять.
Нейтральные изображения — отличный фон для сайтов розничной торговли. Изображение предоставлено Якобом Лундом.28. Коралловый наряд
Если вы когда-нибудь хотели сделать свой веб-сайт ярким, тогда используйте кораллово-розовый и апельсиновый цвета. Выбирайте более светлые или темные вариации популярного оттенка, а затем контрастируйте теплые тона с прохладным акцентом бирюзы.
Добавьте немного чирка или бирюзы, чтобы охладить тропические кораллы. Изображение предоставлено Indigo Photo Club.29. Приглушенный стиль
Muted — не значит тусклый и тусклый.В тех случаях, когда ассортимент минимален, использование более нейтральной палитры визуально более привлекательно, чем использование полностью насыщенных оттенков. Вдохновение самой одеждой — всегда отличная отправная точка при выборе цветовой схемы для вашего веб-сайта.
Вдохновляйтесь своей продукцией. Изображение предоставлено Екатериной Зубал.30. Дорожные мелодии
Если сомневаетесь, выберите дополнительные оттенки. Классический контраст теплого оранжевого и холодных синих и коричневых оттенков добавляет глубины и азарта любому веб-сайту.
Холодный синий и теплый коричневый и апельсиновый цвета передают ощущение страсти к путешествиям. Изображение предоставлено OSABEE.Изображение обложки через SkyPics Studio.
Ищете другие способы повысить свое присутствие в Интернете? Ознакомьтесь с этими статьями ниже:
38 красивых цветовых палитр | Кураторская коллекция цветовых палитр
- Home
- Цветовые палитры
- 38 Красивых цветовых палитр
38 Собранная вручную коллекция цветовых схем с 190 цветами.Вы можете загрузить всю эту коллекцию цветовых палитр в один файл. Доступные форматы файлов: Pdf, образцы Adobe (ase), образцы Photoshop (aco).
Палитры, включенные в эту коллекцию
# 7b5957
# 5c5f60
# b3c2c9
# 29323d
# 10222d
# c6a337
000 # 9752000 9752000 # c6a337000 # 9752000 9752000 9752000 #aabbbc
# 4b5156
# 796d69
# 403d3b
# c47474
# 10100f
# 41453b
# 8a8c8c
86
000 # 8a8c8c
86
000 # 8a8c8c
86 # d4dca9 982252000 982d3
# 182c42
# b9a08b
# 9ea897
# 878a61
# 0e0f09
# 1c130d
# ac9c30
# cfd1c6
# 4e4c41
# b2ca2d
# bdcb5f
# 929494
# d3d7de
# 684bca
# e0ac49
# 9397f0
# c6562f
# 518abc
# 5a7297
# 3675a6
# 2f5476
# 6c94ac
# 969a2a
# 566017
# e1d167
# 4c3e17
# 28c26e
# ffb9b7
000 # ffb9b7
000 # f982000 # f982000000 # f982000 # f982000
# 6faaf4
# 9bca53
# fbc8d8
# 32177f
# 9bcaec
# 132130
# b32909
# 0b14ff19
000
000 # 0b14ff19 9802000
000 # 0b14ff19 9802000
000 # 0b14ff19
000 # 00323b
# 09385e
# a2b4f0
# 5373ed
# 5a6bd0
# 0f2460
# 6d6cd8
# 5f7d13
cd8# 5f7d13
000000 fcc # dcc # dcc# f6f6c9
# f3eca8
# f2bc83
# 5f7d13
# 5520f1
# 5978fb
# 150438
# 0c0420003 c
# fbd1fb
# 6b3395
# c483a9
# d4ac36
# 4c642c
#
7
# 2f2c23
000
000 #000
#000
#000
# 5c49ac
# d3d2cf
#fcfbfa
# 0f0c0d
# 44304e
# f5d27c
# 9d4974
# 564458
000 #
000 # 564458
000 #
000 # 564458
000
000 # 564458
000
000 # 564458
000
000 80b4b8
# dbd6d2
# ba789f
# b3b8bb
# bcb8a8
#bebabb
# 163b18
# 30311e
000 # 163b18
# 30311e
000
000
000
000
# 2d141d
# 17121b
# 0b251b
# c19015
# 8a9787
# aca48a
# bdc2c0
# cfd4d4 # a0004220002 003
# ebe9ee
# c03ca5
# e0d3ef
# 34278d
# f6f7f7
# d6c8c1
# d66174
# e6e5da
# e4dbd9
# c0d8e3
# 9ebcc5
# 96abb1
# bfcac8
# acccd8
# 648a66
# e48f76
# 919f81
# 7fb492
# 3c9474
# e4dacd
000# e4dacd
000# b4a
# facc28
# 417a62
# 5d9e58
# 2f6619
# f7efeb
# f29d3e
# d0c4c4
00030003
0003
0003
# b48c0f# 362e0d
# 563009
# 251f12
# ac6604
# f79604
# 7a6c6c
# 656058
# 212531
# 212531 002 # 969a9c# 36373d
# 494b5c
# e460a7
# 846065
# d88d9e
# cd3888
# fab0ec
Сохранить здесь, чтобы сохранить файл в формате PDF. чтобы сохранить файл изображения палитры Загрузить Нажмите здесь, чтобы сохранить изображение обоев ЗагрузитьColor Scheme Параметры загрузки: коллекция в один файл.Доступные форматы файлов: Pdf, образцы Adobe (ase), образцы Photoshop (aco)
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 — это один уникальный генератор цветовой палитры. Что он делает, так это то, что он показывает вам множество вариантов цвета + отображает похожие цвета рядом с цветом, который вы создаете. Таким образом, вы сможете копнуть глубже и доработать только лучшие цвета.
КОПАСО
Как ни удивительно название, 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.
Заключение
Теперь, когда вы знаете, что нужно для выбора правильных цветов для вашего бренда, пора приступить к созданию своей цветовой палитры.Я надеюсь, что приведенные выше генераторы цветовой палитры помогут вам сделать это с легкостью.
.