Подбор цветов и генерация цветовых схем

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

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

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

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

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

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

Триада образована тремя цветами, равномерно распределяя цветовой круг (120°). Цветовые схемы триады имеют много возможностей по сочетанию цветов, регулировке контраста, акцентов и баланса теплых/холодных цветов.

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

Меньшая дистанция между цветами вызывает в результате меньше напряжения. Тем не менее, тетрада всегда является более «нервной» и «вызывающей», чем другие цветовые схемы. Работая с ней, вы должны заботиться о связях между одним цветом и его смежным дополнительным цветом (комплементом). В случае тетрады (угол 90°), необходимо хорошее чувство цвета и очень деликатный подход к сочетанию цветов.

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

Вы можете задать дистанцию смежных (вторичных) цветов, угол не должен превышать 60°.

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

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

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

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

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

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

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

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

Значение оттенка основного цвета. Кликните для ввода числового значения.

Угол/дистанция оттенка вторичных цветов. Кликните для ввода числового значения. Имеет смысл только в цветовых схемах, использующих вторичные цвета.

Значение RGB основного цвета. Кликните для ввода числового значения.

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

Значения RGB основного цвета.

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

Яркость и Насыщенность. Перетаскивайте ползунок по квадрату для регулировки яркости (вверх = светлее, вниз = темнее) и насыщенности (вправо = насыщенное, влево = разбавленное).

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

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

Коррекция Вариантов. Панель для регулировки яркости и насыщенности по отдельности для каждого цвета.

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

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

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

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

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

Пример веб-страницы (светлая/позитив). Кликните чтобы посмотреть пример веб-страницы, созданной при помощи текущей цветовой схемы. Это только пример, цвета палитры могут использоваться в сотнях разных вариаций.

Пример веб-страницы (темная/негатив). Кликните чтобы посмотреть пример веб-страницы, созданной при помощи текущей цветовой схемы. Это только пример, цвета палитры могут использоваться в сотнях разных вариаций.

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

18 сервисов для подбора цветов и палитры

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

Почему важно правильно подбирать цвета

Зрительное восприятие — основной источник получения информации. В первые полторы минуты мы оцениваем внешний вид, форму и цвет — так возникает первое впечатление. При этом до 90% впечатлений основаны на восприятии цветов.

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

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

Есть много разных подходов к работе с цветом. Для профессионального подбора палитры нужно учитывать огромное количество факторов. Например, Институт цвета Pantone (Pantone Color Institute) ежегодно анализирует глобальные тренды, модные показы, социальные сети, кинематограф и выставки современного искусства, чтобы выбрать цвет года.

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

Генераторы цветовых палитр

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

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

Coolors

Сайт. https://coolors.co/ Версии для работы. Веб-версия, iOS- и Android-приложения, плагин для Figma, расширение Chrome, расширение Adobe.  Стоимость. Бесплатно с ограничениями, про-версия — $3 в месяц.  Язык интерфейса. Английский.

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

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

Кроме веб-сервиса, у Coolors есть мобильные приложения, расширение для Chrome и Adobe, плагин для Figma. 

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

Paletton

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

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

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

Adobe Color CC

Сервис помогает создать палитру с учётом выбранного правила гармонии цветов и цветового режима. Основной цвет можно выбрать на круге или указать код вручную, а потом — скопировать коды цветов. Плюс работы с продуктами Adobe: после входу в систему можно сохранить палитру в Creative Cloud и потом использовать её в Photoshop, Illustrator, Fresco и других сервисах Adobe. 

Ещё из интересных возможностей сервиса:

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

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

Color Hunt

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

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

А ещё у Color Hunt есть расширение для Chrome, которое показывает случайную палитру из лучших коллекций при каждом открытии новой вкладки.

In Color Balance

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

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

My Brand New Logo

Сервис My Brand New Logo от одноимённого производителя логотипов предлагает компьютерный подбор схемы. Генератор автоматически выбирает цвета, которые хорошо сочетаются. От пользователя требуется лишь указать вид цветов — яркие, винтажные, серые, гладкие. 

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

Seo Checker: Color palette and schemes generator

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

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

ColorScheme

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

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

Дополнительные возможности ColorScheme:

• просмотр примеров светлой и тёмной страницы в выбранной палитре;
• каталог цветов — можно посмотреть название и код понравившегося оттенка;
• отдельный каталог с названием автомобильных красок и именами цветов в HTML.

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

Color-Wizard

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

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

Palette Generator

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

ColorSpace

Для создания палитры в ColorSpace достаточно указать цвет или его код — и запустить генерацию. Система сформирует 25 палитр по разным схемам на основе указанного цвета. Для каждого оттенка в палитре указан код. Также в сервисе можно создавать двух- и трёхцветные градиенты из выбранных цветов.

Colormind

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

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

CopyPalette

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

В созданной схеме HEX-код каждого цвета копируется по отдельности. Или готовую палитру можно скопировать в SVG и добавить Figma или Sketch для дальнейшего использования в дизайне.

Дополнительные сервисы для работы с цветом

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

Color Grid

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

Brand Colors

Здесь можно посмотреть фирменные цвета известных компаний. Список брендов с удобной поисковой строкой доступен на сайте.

Все цветовые схемы, которые показывает сервис, можно скопировать простым кликом или скачать в разных форматах.

Get UI Colors

Get UI Colors помогает проверить, как будет выглядеть текст белого цвета на цветном фоне. Для этого просто выберите цвет и кликните на кнопку, чтобы посмотреть результат. 

Multicolr Tineye

Инструмент помогает подбирать фото по цветам среди 20 млн. изображений с Flickr.

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

Shutterstock Spectrum

Инструмент помогает искать изображения с лицензией royalty-free — она предполагает оплату за использование контента только в момент покупки.

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

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

Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

Статьи почтой

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

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Как запустить email-маркетинг с нуля?

В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️

*Вместе с курсом вы будете получать рассылку блога Unisender

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

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

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

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

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

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

Примените любой из этих прекрасных наборов цветов к своим проектам. Попробуйте бесплатно

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

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

СВЯЗАННЫЕ: 50 красивых цветовых комбинаций (и как их применять в ваших проектах)

1 Красочный и сбалансированный

Active Theory

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

2 Bright Accent Colors

Paypr

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

3 Натуральный и земляной

Resn

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

4 Прохладный и свежий

Grosse Lanterne

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

5 Смелый и яркий

W&CO

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

6 Vermillion и Russian Green

Stinkdigital

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

7 Стильный и утонченный

Bordel Studio

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

8 фиолетовых оттенков и тонов

ReedBe

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

9 Deep Purple and Blues

Samsy

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

10 Современная и смелая

Bryan James

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

11 Живой и привлекательный 9№ 0021

Anton & Irene

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

12 Яркий и простой

Bert

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

13 Красный и живой

BrightMedia

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

14 Художественный и креативный

Julie Flogeac

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

15 Элегантный, но доступный

Эпический

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

наш браузер не поддерживает тег видео.

Хотите использовать эти цветовые схемы в своих визуальных эффектах?

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

Зарегистрироваться. Это бесплатно.

16 Элегантный и футуристический

MediaMonks

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

17 Инновационный и дерзкий

eDesign Interactive

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

18 Текстурированный и динамичный

HAUS

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

19 Минималистичный, но теплый

Gusto Ids

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

20 Vivid and Sharp

FCINQ

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

21 Чистый и Энергичный

Цифровой Изменить

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

22 Корпоративный и традиционный

Watson/DG

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

23 Синий и освежающий

Supremo

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

24 Чистота и современность

Umwelt A/S

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

25 Яркий и элегантный

Waaark

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

26 Молодость и веселье

Five Hundred

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

27 Великолепный контраст

Immersive Garden

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

28 Эффективные акцентные цвета

SMFB

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

29 Современность в полном расцвете

Nurture Digital

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

30 Ближе к природе

Born05

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

31 Ярко-розовый и пастельные тона

Stinkdigital

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

32 Уникальное сочетание

AILOVE

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

33 Яркие цитрусовые цвета

Чизкейк «Супергерой»

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

34 Ярко-синий и оранжевый

Бюрократ

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

35 Rose Red и Blueberry

Google Brand Studio

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

36 Смелый и уникальный

Детали

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

37 Веселый и энергичный

Cher Ami

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

38 Снежный, но теплый

Оливковый камень

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

39 Богатый и красочный

Elespacio

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

40 Современный и минималистичный

SFCD

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

41 Неустрашимый и бесстрашный

Great Works Copenhagen

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

42 Цвета плоского дизайна

Resn

Даже если вы не знакомы с термином плоский дизайн, вы, вероятно, видели его раньше: веб-сайты без теней, без градиентов, без фасок; Короче говоря, никаких трехмерных элементов.

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

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

43 Эклектичный и спокойный

Play

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

44 Стильный и традиционный

details.ch

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

45 Акцентные яркие цвета

stinkdigital

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

наш браузер не поддерживает тег видео.

Хотите использовать эти цветовые схемы в своих визуальных эффектах?

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

Зарегистрироваться. Это бесплатно.

46 Корпоративный и серьезный

EPIC

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

47 Гламурный и модный

Apart

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

48 Эффектный и стильный

FUTURAMO

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

49 Громко и прямо в лицо

Паника

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

50 Живой, но успокаивающий

madeo

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

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

Логотипы, веб-сайты и многое другое…

Логотипы, веб-сайты, обложки книг и многое другое…

Получить дизайн

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

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

Учет психологии цвета для цветовых схем веб-сайта

—

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

«Взаимодействие цвета». Йозеф Альберс через Phillips. они помогут вам выбрать цвета веб-дизайна в соответствии с вашими услугами и подчеркнут индивидуальность вашего бренда, чтобы донести его до потребителей.

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

Принятие идеальной цветовой палитры для вашего веб-сайта создает положительное восприятие и доверие потребителей.

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

1. Красный : скорость, энергия и страсть. Красный — отличный цвет для использования, когда вы хотите, чтобы ваша аудитория действовала. Красный часто используется для цветовых схем веб-сайтов электронной коммерции, а также ресторанов и приложений для еды на вынос — когда вы голодны и заказываете еду на вынос, вы страстно хотите, чтобы еда была быстрой!
2. Оранжевый : оптимизм и счастье. Оранжевый повсеместно считается «забавным» цветом, и использование его в веб-дизайне — отличный способ показать, что вы не относитесь к себе слишком серьезно.
3. Желтый : тепло, манящее чувство, позитив. Цвет солнца, желтый ассоциируется со счастьем и радостью. Супер весело и доступно. Это отличный цвет веб-сайта для сферы услуг — вы будете рады помочь!
4. Зеленый: природа и здоровье. Успокаивающий и естественный зеленый — идеальный выбор для цветовой схемы при разработке здорового бренда. Зеленый также является отличным выбором цвета, чтобы передать экологичность и устойчивость.
5. Синий: самый универсальный и универсальный. Было показано, что синий вызывает чувство доверия, что делает его фаворитом в цветовых схемах веб-сайтов.
6. Фиолетовый : творчество, мудрость и уверенность. Фиолетовый — это уникальный, сильный цвет для использования в цветовой гамме веб-сайта, поскольку он привлекает внимание и выделяется.
7. Розовый : творчество и изобилие. Розовый цвет сейчас актуален, больше, чем когда-либо, его принимают люди всех полов и национальностей, а это означает, что бренды следуют его примеру и включают его в ряд отраслей.
8. Коричневый : Доброта, теплота и честность. При использовании в веб-дизайне коричневый — успокаивающий цвет. Он придает веб-сайтам естественную, приземленную атмосферу и часто идет рука об руку с традиционным винтажным дизайном.
9. Черный: современный, элегантный, нейтральный. Его минимализм отлично подходит для роскошных веб-сайтов; многие косметические бренды используют черный цвет в качестве своего основного цвета, чтобы показать, что их продукт качественный, что, возможно, помогает вам оправдать такие большие расходы..?
10. Белый: минимализм, прозрачность. Иногда лучший выбор цвета для минимального веб-дизайна — это вообще отсутствие цвета. Белый — нейтральный оттенок, а это значит, что его можно легко комбинировать с другими цветами в целях брендинга. Он в основном используется в качестве акцента или фонового цвета.
11. Серый: зрелость, авторитет. Если у вас есть более серьезный веб-сайт, серый — отличный выбор цвета, он показывает людям, что вы настроены серьезно.

Мы только что отправили вам первый урок.

By OrangeCrush

11 прекрасных цветовых схем для веб-сайтов, которые вас вдохновят

—

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

1.

Цвета для умных экологически чистых продуктов

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

Конопляно-зеленый, бледно-лимонный, овсяный и темно-синий:

Цветовая схема веб-сайта в тонах конопли от Tonitrix: #f5eec2 #416a59#39395f #73a24e #a9c25d

2. Яркие и безопасные для здоровья цвета

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

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

Бледно-персиковый, оранжевый, мятный и темно-зеленый:

Эко-оттенки Millennial от Your Daye: #f6c453 #fefbe9 #f0a04b #183a1d #e1eedd

3. Стильные, подобранные цветовые схемы

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

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

Сиреневый, ржавый, кремовый и угольный:

Цветовая схема Contemporary Lilac от Collagerie: #e4ddf4 #943d24 #fffbf0 #2d2d2d #282612

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

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

Нежно-розовый, зеленый, оранжевый и фиолетовый:

Полихроматическая цветовая схема веб-сайта от Brent & Jo Studio: #397754 #f0a3bc #70be51 #eb6b40 #9b45b2

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

Желтый, неоново-синий и черный:

Контрастная цветовая схема веб-сайта от e2infinity: #5bccf6 #fcde67 #030e12

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

Персиковый, кремовый и угольный:

Успокаивающая нейтральная цветовая гамма от Lovely Grit Studio: #ef9273 #fef9f8 #0d0d0d

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

Бирюзовый, серый, синий, ярко-белый, темно-серый и цвет морской волны:

Trustworthy Teal Оттенки через N26: #2b6777 #c8d8e4 #ffffff #f2f2f2 #52ab98

8. Успокаивающие, но уверенные цветовые схемы

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

Бледно-розовый, коралловый, серый, сиреневый и темно-синий:

Медитативная цветовая гамма от Spoon Lancer: #fae5df #f5cac2 #ed7966 #303179 #141850

9.

Современные, модные цветовые решения

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

Фиолетовый, розовато-лиловый, мятный и оранжевый:

Via Saluto: #5f2c3e #d1adcc #c2d2bd #c65032 #f6e9d7

10. Жизнерадостные и благотворительные цветовые палитры

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

Синий, желтый, серовато-зеленый и белый:

Веселые некоммерческие цвета от Lovely Grit Studio: #1b4d89 #f9e45b #6db784 #ffffff

11.

Яркие и эмоциональные цветовые схемы

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

Розовая пудра, фуксия и нефрит:

Цветовая схема цвета фуксии и зеленого для Fertility Tribe от Lovely Grit Studio: #eddcd9 #f2ebe9 #de5499 #264143 #e99f4c новый диван, губная помада или велосипед, выбор правильного цвета может оказаться довольно сложным. Если это для веб-сайта, который вы пытаетесь запустить, все становится сложнее. Вы должны оценить психологические и культурные последствия различных цветовых палитр веб-сайтов и то, как это повлияет на восприятие вашего бренда.

This entry was posted in Популярное