13 лучших генераторов цветовых схем для бренда

Содержание:

Всё семейство

И так, мы перебрали все возможные комбинации контрастирующих цветов. Теперь обратимся к двум типам схем, где используются родственные цвета — монохроматической (monochromatic) и аналогичной/сходственной (analogous). Монохроматичный набор цветов, как свидетельствует его название, использует один цвет и все его оттенки и вариации. При правильном использовании, эта схема может придать веб-сайту аккуратный, чистый вид. Аналогичная схема цветов с другой стороны использует цвета, которые расположены по соседству друг с другом на цветовом круге. Как можно судить по рисунку F. аналогичная схема весьма похожа на монохроматическую.

Рис. F.: «Аналогичная» схема очень напоминает монохроматическую

Как выбрать цвет правильно?

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

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

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

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

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

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

Создаем палитру в графическом редакторе

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

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

В качестве эксперимента давайте попробуем собрать простую палитру светлой однушки в Марьино.

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

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

Вот, что у нас получилось. Кажется, неплохо. 

Как использовать главный цвет на вашем сайте

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

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

Например, позвонить по телефонному номеру, заполнить форму, подписаться на обновления и т.п.

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

Чек-лист хорошей цветовой палитры

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

 1 

В палитре не более пяти цветов, и только один ключевой.

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

 2 

Пользуйтесь бесплатными сервисами по подбору цветовой палитры.

Adobe Color Wheel, Coolors, Swiss Color и другими — их очень много.

 3 

Вам хватает цветов в палитре.

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

 4 

Элементы интерфейса сочетаются между собой.

Сайт не выглядит, как цветная «каша»: текст и заливка разного цвета, якорные объекты выделены одним цветом, цвет не мешает воспринимать информацию.

 5 

На сайте нет явных и грубых ошибок.

Например: красная кнопка «Купить» и зеленая кнопка «Отмена».

 6 

Подключите «Яндекс.Метрику» и Google Analytics.

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

Немного теории: три вида оттенков

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

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

Источник — by Square Studio

Акцентный — работает на контрасте с основным

Оттеняет его и выделяет элементы, на которые вы хотите обратить внимание: кнопки СТА (call to action — призыв к действию), названия разделов или заголовки. . Источник -by Joel Maynard

Источник -by Joel Maynard

Фоновый — фон страницы. Его выбор зависит от специфики бизнеса

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

Источник — by Rajat Mehra

Сочетание цветов онлайн, что это такое

Здравствуйте, друзья! Сочетание цветов онлайн – это дополнение одного цвета к другому цвету. Такие цвета есть на специальных сервисах в Интернете и отображаются в виде палитры, круга, цветовых схем. Цвета могут быть разными: абстрактные, перемешанные в градиент, гармоничные, аналоговые и другие (скрин 1).

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

Далее мы разберем инструкцию по подбору цветов и создадим цветовую гамму.

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

Кодирование цвета в формате HEX — это, по сути, шестнадцатеричное представление рассмотренной выше модели RGB.

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

Для браузеров возможна и упрощённая форма записи цвета в HEX-формате, где указываются всего три символа кода вместо 6. В таком случае, подразумевается что каждая из трёх групп состоит из одинаковых символов. Например, AAFF11, можно сократить до AF1.

Примеры передачи цвета в WEB при помощи HEX-модели для CSS-стилей элементов:

Помимо указанных особенностей, HEX-модель поддерживает и alpha-канал для управления прозрачностью, в таком случае добавляется четвертый коэффициента в диапазоне от 00 и FF (256 значений). В таком случае использование сокращённой формы записи уже недопустимо.

Пример передачи цвета в WEB при помощи HEXA-модели для CSS-стилей элементов:

ColorScheme.Ru

Colorscheme.ru – это сервис, который дает пользователям возможность не только подобрать гармоничные цвета и оттенки, используя цветовой круг, но и познакомиться с цветовой теорией. На сайте вы найдете множество интересных статей из книги Иоханнеса Иттена “Искусство Цвета”. Рекомендую обязательно их прочитать. В них содержится базовая информация о цвете.

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

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

Какие ассоциации вызывают цвета?

Цвет — это самый быстрый способ создать первое впечатление, ведь мы считываем визуальные элементы на эмоциональном уровне. Фирменный цвет может на 80% повысить узнаваемость бренда, а значит, и привязанность потребителей.

Какой оттенок вы представляете, когда думаете о Coca Cola? Компания не зря выбрала красный: он вызывает эмоции любви и радости. Кстати, это один из цветов, который чаще всего используют топ-бренды. Его выбрали 29% компаний с мировым именем. На первом месте — синий (33%), а на третьем — черный или серый (28%). Рассказываем подробно, какие ассоциации вызывают краски:

Теплые:

  • красный — активность, эмоциональность, страсть, сила, любовь, радость (McDonalds, CNN, Netflix, Pinterest, H&M);
  • розовый — сладость, романтика, игривость, теплота, сострадание (Barbie, LG, Victoria`s Secret);
  • оранжевый — успех, решительность, дружелюбность, восторг (Amazon, Firefox, Fanta);
  • желтый — молодость, свежесть, оптимизм (DHL, Shell, IKEA, Nicon).

Источник — by Social Design House

Холодные:

  • зеленый — свежесть, спокойствие, расслабленность, доверие, мир, надежда (Animal Planet, Starbucks, Android);
  • синий — комфорт, ясность, честность, верность, надежность (Samsung, Skype, Ford, Facebook);
  • фиолетовый — гламур, сила, амбиции (Hallmark, Yahoo, Cadbury).

Источник — by Elliot Pessah

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

белый, серый, черный — элегантность, роскошь, уважение, современность, мудрость, стиль (Nike, Apple, Chanel, Puma, Toyota).

Источник —

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

Предложите решения

Если вы только начинаете работать в дизайне, используйте бесплатные инструменты и сервисы: Adobe Color Wheel, Coolors, Swiss Color. Они помогут составить первоначальную цветовую палитру за несколько минут и выбрать основные цвета для будущего сайта. Чтобы лучше понимать композицию и цветовые сочетания, прочитайте книгу «Искусство цвета» Иоханнеса Иттена. В ней хорошо сформулированы и описаны принципы выбора.

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

Не присылайте клиенту цветовую палитру в таком виде.

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

Пример UI-кита с Behance. Автор Raul Taciu.

Если вы хотите создавать приятные и лаконичные палитры для сайтов, приходите на курс «Веб-дизайн с 0 до PRO»

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

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

Курс «Веб-дизайн с 0 до PRO»

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

  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

LAB

Цветовая модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. При разработке Lab преследовалась цель создания цветового пространства, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.

HEX в RGB
HEX в RGBA
HEX в RGB(%)
HEX в RGBA(%)
HEX в HSL
HEX в HSLA
HEX в CMYK
HEX в HSB/HSV
HEX в XYZ
HEX в LAB
RGB в HEX
RGB в RGBA
RGB в RGB(%)
RGB в RGBA(%)
RGB в HSL
RGB в HSLA
RGB в CMYK
RGB в HSB/HSV
RGB в XYZ
RGB в LAB
RGBA в HEX
RGBA в RGB
RGBA в RGB(%)
RGBA в RGBA(%)
RGBA в HSL
RGBA в HSLA
RGBA в CMYK
RGBA в HSB/HSV
RGBA в XYZ
RGBA в LAB
RGB(%) в HEX
RGB(%) в RGB
RGB(%) в RGBA
RGB(%) в RGBA(%)
RGB(%) в HSL
RGB(%) в HSLA
RGB(%) в CMYK
RGB(%) в HSB/HSV
RGB(%) в XYZ
RGB(%) в LAB
RGBA(%) в HEX
RGBA(%) в RGB
RGBA(%) в RGBA
RGBA(%) в RGB(%)
RGBA(%) в HSL
RGBA(%) в HSLA
RGBA(%) в CMYK
RGBA(%) в HSB/HSV
RGBA(%) в XYZ
RGBA(%) в LAB
HSL в HEX
HSL в RGB
HSL в RGBA
HSL в RGB(%)
HSL в RGBA(%)
HSL в HSLA
HSL в CMYK
HSL в HSB/HSV
HSL в XYZ
HSL в LAB
HSLA в HEX
HSLA в RGB
HSLA в RGBA
HSLA в RGB(%)
HSLA в RGBA(%)
HSLA в HSL
HSLA в CMYK
HSLA в HSB/HSV
HSLA в XYZ
HSLA в LAB
CMYK в HEX
CMYK в RGB
CMYK в RGBA
CMYK в RGB(%)
CMYK в RGBA(%)
CMYK в HSL
CMYK в HSLA
CMYK в HSB/HSV
CMYK в XYZ
CMYK в LAB
HSB/HSV в HEX
HSB/HSV в RGB
HSB/HSV в RGBA
HSB/HSV в RGB(%)
HSB/HSV в RGBA(%)
HSB/HSV в HSL
HSB/HSV в HSLA
HSB/HSV в CMYK
HSB/HSV в XYZ
HSB/HSV в LAB
XYZ в HEX
XYZ в RGB
XYZ в RGBA
XYZ в RGB(%)
XYZ в RGBA(%)
XYZ в HSL
XYZ в HSLA
XYZ в CMYK
XYZ в HSB/HSV
XYZ в LAB
LAB в HEX
LAB в RGB
LAB в RGBA
LAB в RGB(%)
LAB в RGBA(%)
LAB в HSL
LAB в HSLA
LAB в CMYK
LAB в HSB/HSV
LAB в XYZ

Итак, всё вместе

Теперь, когда мы вывалили вам на голову столько комбинаций цветов, считаем своим долгом дать несколько предостережений. Первое и самое главное: цветовые схемы, упомянутые здесь, сами по себе могут и не сработать. Вам по-прежнему придётся кое-что поменять в цветах (насыщенность или яркость), чтобы они «ужились». Приведённые здесь схемы — лишь отправная точка, а не вершина мастерства. Ведь в конечном счёте решающим фактором будет читаемость текста на веб-сайте и его внешний вид (look and feel). Чтобы увидеть, как цвета уживаются друг с другом, дизайнеры советуют воспользоваться любой графической программой, где есть функция «слои», и сравнить различные варианты схем, переключаясь между ними. Например, на рис. G, одни комбинации работают нормально, в то время как другие требуют дополнительной обработки.

Рис. G.: не всякая комбинация годится в дело

Как выбрать цветовую гамму сайта?

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

Источник — by Liv Andare

В какой нише вы работаете?

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

Источник — by tubik

Как воспринимает цвета ваша аудитория?

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

Источник — by Aleksandr Romanukha

Где живут ваши клиенты?

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

Источник —

К какому полу принадлежат

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

Источник —

Какого возраста ваши покупатели?

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

Лайфхак. Чтобы упростить анализ, воспользуйтесь тестом на сервисе Grasshopper. Ответьте на семь простых вопросов (к примеру, что лучше всего описывает ваших клиентов и какой тип продукта вы предлагаете) — и получите вариант основного цвета для бренда.

Источник — by Jason Amor

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

Как только вы определились с преобладающим цветом, нет ничего проще, чем подобрать акцентные цвета с помощью таких программ, как Adobe Color CC Tool:

На основе преобладающего цвета

Шаг 1. Для начала узнайте код вашего преобладающего цвета. Например, на сайте ColorPicker.com. Код цвета указан в прямоугольнике прямо над квадратом с цветовой палитрой.

Скопировав код с ColorPicker.com, вставьте его в поле «НЕХ» инструмента Adobe Color. Убедитесь, что вы вставили код в колонку посередине:

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

Шаг 2. В левой верхней стороне вы увидите прямоугольник со следующими цветовыми схемами:

  • Последовательная;
  • Монохромная;
  • Треугольная;
  • Комплементарная;
  • Составная;
  • Оттенки.

Выберите цветовую схему

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

Шаг 3. Сделайте цветовую схему еще продуманнее, перемещая один из указателей цвета.

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

CMS и конструкторы сайтов позволяют вставить цветовые коды (HEX) для выделения любой части вашего сайта:

HEX

На основе понравившейся фотографии

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

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

Шаг 1. Загрузите фотографию:

Шаг 2. Выберите одно из пяти цветовых настроений:

  • Красочное;
  • Яркое;
  • Приглушенное;
  • Насыщенное;
  • Темное.

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

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

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

Чтобы увидеть коды (HEX) цветов, нажмите на цветное колесико, расположенное в правом верхнем углу:

HEX

10 лучших сервисов онлайн подбора сочетания цветов

Рассмотрим 10 сервисов для онлайн подбора цветов:

  1. Colorhunter.com. Бесплатный сервис, с помощью которого выберите любые цвета.
  2. ColorScheme. Этот сервис предоставляет готовые схемы подобранных цветов.
  3. Color.adobe.com/ru/create/color-wheel. Данный сервис предлагает бесплатно выбрать цвет и его сохранить. Для скачивания цветов на компьютер нужна регистрация.
  4. Mecolor.ru. Здесь цвета подбираются на цветовом круге. Сохраняются в виде кодов.
  5. Cvetovoy-krug.ru/podbor-cveta-v-interiere-online-service. Сервис подбирает цвета в интерьере.
  6. Colourco.de. Ресурс поможет выбрать цвет. Достаточно провести курсором мыши в нужном окне цветов и скопировать код цвета. Также, цвета скачаете на компьютер.
  7. Web.colorotate.org. На сервисе доступен трехмерный инструмент по подбору цветов. Созданный цвет можно скопировать.

Еще ресурсы:

  • Webcolourdata.com. У ресурса есть готовые цвета, которые вы можете использовать для сайтов.
  • Javier.xyz/cohesive-colors/. На данном сайте можете выбрать цвета с помощью регулятора или по схеме.
  • Designspiration.com/palette/8E39EF-3626AF-3169D1/. На сайте расположены шаблоны цветов и возможность создания новых.

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

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

На кого преимущественно рассчитан ваш сайт, на мужчин или на женщин? А может и на тех, и на других?

Яркие и приглушенные цветовые схемы для сайта

Мужчины предпочитают яркие цвета, а женщины приглушенные.

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

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

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

Светлые и темные оттенки

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

Женщины

Наиболее предпочтительные цвета: синий, фиолетовый, зеленый.

Наименее предпочтительные цвета: оранжевый, коричневый, серый.

Мужчины

Наиболее предпочтительные цвета: синий, зеленый, черный.

Наименее предпочтительные цвета: коричневый, оранжевый, фиолетовый.

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

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

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

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

Часто люди покупают определенные товары или услуги, чтобы произвести конкретное впечатление на других.

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

HTML

Теперь ясно?

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

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

Инструменты создания палитр онлайн

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

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

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

ColorScheme

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

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

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

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

Adobe Color CC — разработка компании Adobe, подарившей нам Photoshop, Illustrator и десяток других программ. Инструмент отличается гибкими настройками, а выбранные цветовые схемы для сайта можно сохранять в своей библиотеке.

Сервис Adobe Color CC

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

Сервис Colormind

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

Сервис Colors

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

Сервис Color Safe

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

Сервис

Paletton — еще один интересный инструмент для создания цветовых схем для сайта, во многом повторяющий возможности уже рассмотренного Adobe Color CC.

Сервис Paletton

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

Сервис Colordot

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

Сервис Colourcode

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

Сервис Material Design Palette

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

Mycolor.Space

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

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

Дополнительный функционал

  • Поддерживает HEX и RGB
  • Создание 2-х цветного градиента CSS
  • Создание 3-х цветного градиента CSS

Всего доброго. Ваш MrVector 🙂

Мы в соц медиа: Инстаграм | ВК | Фейсбук | Твиттер | Телеграм Канал | Телеграм Чат для Микростокеров

Трендовые темы для микростоковых авторов на: Patreon и VK Donate

Обсудить эту новость можно на нашем форуме о фотобанках и микростоках.

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

Используйте цветовой круг

Цветовой круг — универсальный инструмент для гармоничного сочетания красок. Комбинации бывают таких видов:

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

Источник —

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

COLOURlovers

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

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

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

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

Я считаю, что внезапно стать успешным колористом или дизайнером по цвету – невозможно. Но можно понемногу приучить глаза и голову видеть и воспринимать цвет, сочетания цветов, замечать оттенки.
Именно таким источником вдохновения является бесплатный онлайн ресурс IN COLOR BALANCE ( https://color.romanuke.com/ ). Здесь создана отменная коллекция невероятно красивых фото . К каждой фотографии добавлена подборка цветов, составляющих цветовую композицию.

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

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

Как правильно подобрать цветовую палитру?

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

Второй вариант мы рассматривать не будем, а пойдем по пути наименьшего сопротивления и начнем с первого. Готовые цветовые палитры найти довольно просто. Например, для этого идеально подойдет сайт Coolors.co.

Переходим на сайт и нажимаем на кнопку «Start the generator!».

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

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

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

Я надеюсь, данная статья помогла вам определиться с цветовой схемой для вашего сервиса

Спасибо за внимание!

ColoRotate

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

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

ColoRotate прекрасно работает самостоятельно или в паре с Adobe Photoshop. Также он доступен в качестве приложения для iPad.

Типы цветовых сочетаний

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

Монохромные цвета (mono)

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

Соседние (аналоговые) цвета (analogic)

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

Дополняющие (противосторонние) цвета (complement)

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

Дополняющие совмещенные цвета (triad)

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

Парная четверка

К паре дополняющих цветов добавляется пара аналоговых.

Акцентирование аналоговых цветов

Четверка состоит из основного цвета, пары его аналоговых и дополняющего акцента.

Заключение

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector