Выбор цветовой схемы для сайта является одним из важных моментов в процессе дизайна. Подбор сочетания цветов - достаточно сложный и творческий процесс. К счастью, существует достаточно много сервисов, которые могут оказать существенную поддержку для правильного выбора.
Некоторые ресурсы, упомянутые в данном обзоре, предоставляют возможность выбора из большого количества уже готовых цветовых схем, а другие позволяют в интерактивном режиме построить собственную схему.
Kuler
Adobe Kuler содержит большую библиотеку готовых цветовых схем. Вы можете просмотреть схему онлайн и загрузить ее для использования в продуктах серии Adobe Creative Suite.
Colour Lovers в текущий момент имеет почти 2 миллиона созданных пользователями цветовых схем. Вы можете просматривать их, сортируя по дате, рейтингу, количеству просмотров.
ColoRotate имеет библиотеку готовых цветовых схем. Также вы можете создать свою собственную схему с помощью уникального 3D инструмента. Цветовую схему можно использовать напрямую в Photoshop и Fireworks с помощью плагина ColoRotate .
Color Scheme Designer позволяет выбрать тип цветовой схемы (моно, комплиментарную, триада, тетрада, аналоговая). Затем можно будет настроить цвета и посмотреть действие схемы на примере.
ColorSchemer располагает большой библиотекой созданной пользователями цветовых схем. Вы можете сортировать их по дате размещения, рейтингу или количеству загрузок.
Pictaculous - простой онлайновый инструмент для генерации цветовой схемы. Вы можете загрузить изображение, а сервис сгенерирует схему для использования с картинкой.
Color Spire
Color Spire очень простой в использовании сервис. Вы выбираете базовый цвет, а он предлагает цветовую схему. Также можно посмотреть внешний вид схемы на простом шаблоне.
Маленькая, стильная и аккуратная программка подбора цвета для оформления HTML-страниц и других задач, требующих подбора сочетающихся цветов.
Давайте посмотрим, что умеет эта программа.
Установка Color point
Поскольку программа не требует инсталляции, просто сохраняем архив на жёсткий диск, распаковываем в удобное место, открываем папку и запускаем файл с расширением exe. По умолчанию программа запускается в виде маленькой кнопки:
Работа с программой
Нажимаем на этот значок и перед нами раскрывается окно программы:
Экран
В этой вкладке программа позволяет "взять" любой цвет прямо с экрана. То есть, с любой части экрана, которая была видна в момент запуска программы. Весь экран полностью отображается в уменьшенном виде в окне "Выберите участок".
Если в этом окне нажать на любую часть, она появится в следующем окошке поменьше "Выберите цвет". Здесь уже можно более точно прицелиться и взять цвет с конкретной точки.
Также в правой части этого окна есть вспомогательные кнопки для копирования в буфер, а снизу кнопки "Обновить" (обновляет содержимое экрана) и "Применить" (сохраняет выбранный цвет и переключает окно на вкладку "Подбор").
Подбор
Здесь находятся основные инструменты для удобного подбора цвета: "Черепица", "Круг", "Web" и "Win", которые переключаются с помощью дополнительных вкладок.
Работать с этими инструментами не сложно. Просто тыкаете мышкой в тот цвет, который Вам понравился, корректируете его ползунками RGB (или HSV - если Вам ближе такой формат), и смотрите - подходит он или нет.
Если подобранный цвет понравился, можно скопировать его код из строчки "Текстовое представление". Причём, код можно выбрать также в любом из стандартных форматов, нажав маленькую стрелочку раскрытия списка.
Также, обратите внимание на третье цветовое окно в правом верхнем углу. В нём кроме выбранного цвета (вертикальная полоса) показаны ещё три цвета, хорошо сочетающиеся с выбранным.
Таким образом, программа сразу подсказывает несколько сочетающихся цветов, которые можно применить в других элементах проектируемого дизайна.
В программе довольно много разных вспомогательных кнопок. Чтобы узнать их назначение, просто наводите на них мышью и читайте подсказки, появляющиеся в самом низу окна программы.
Настройки
Здесь можно подстроить некоторые параметры вроде типа и размера шрифта и некоторых косметических свойств программы. Работать с программой будет удобнее, если убрать галочки в пунктах "Открываться на вкладке "Экран"" и "Запускаться в режиме миниокна".
О программе
В этой последней вкладке можно найти контакты разработчика и посмотреть не вышла ли новая версия программы, перейдя на его сайт.
Достоинства и недостатки программы
- в наличии множество разных инструментов для подбора цвета (круг, черепица и т.д.);
- позволяет удобно сравнивать цвета, пододвигая окно программы вплотную к другим элементам экрана;
- есть подсказки по всем кнопкам.
- немного мудрёный интерфейс;
- запуск в свёрнутом виде и на вкладке "Экран" не очень удобен (хотя, можно отключить это в настройках);
- не всем понравится цвет окна программы.
Выводы
Программа довольно мощная для бесплатной, предоставляет практически всё необходимое чтобы удобно осуществить подбор цвета при создании дизайна сайта. Есть некоторые незначительные недостатки вроде цвета окна программы (сиреневый - на любителя), но они не мешают работе с ней.
P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Богданова.
P.P.S. Если программа показалась Вас сложной, есть варианты и попроще:
Любой веб-дизайнер понимает насколько важен . При помощи цвета расставляются акценты - подчеркиваются важные детали и скрадываются вспомогательные. При помощи цвета создается настроение. Цвет - первое, что видит посетитель сайта, еще до того как прочитает хоть одну букву или осознает, что изображено на той или иной фотографии. Цветовая палитра Вашего сайта может задержать посетителя, а может отпугнуть его.
Выбор правильной цветовой палитры - первый шаг на пути построения идеального и безупречного сайта. Цвет каждого элемента страницы должен гармонировать не только с визуально связанными элементами, но и с общей цветовой схемой страницы и сайта в целом.
Для того, чтобы не ошибиться в начале пути мы подготовили небольшой обзор генераторов цветовых схем , позволяющих выбрать правильное количество и сочетание основных цветов, которые Вы будете использовать при разработке сайта. Одни из них достаточно просты и имеют стандартную функциональность, другие обладают рядом уникальных функций. Но все они, несомненно, окажут неоценимую помощь в разработке уникального дизайна сайта.
Adobe Color CC
Adobe Color CC - своеобразный стандарт подобных приложений, которое позволяет создавать различные цветовые схемы используя для этого цветовой круг . В помощь дизайнеру будет и прямой доступ к сообществу Adobe Kuler , где можно подобрать тысячи всевозможных цветовых решений.
Paletton
Один из старейших (работает с 2002 года) в нашем обзоре инструментов для создания цветовых комбинаций и цветовых решений .
Stylify me
Исследует указанный в строке поиска сайт и предоставляет отчет об используемых в нем цветовых комбинациях , шрифтах, размерах изображений и т.п. Это позволит дизайнеру построить собственные решения, взяв за основу понравившийся сайт.
Coolors
Позволяет сгенерировать базовую цветовую комбинацию , а затем выполнить тонкую настройку полученной палитры по своему вкусу и сохранить ее в различных форматах - SVG, PDF или SCSS.
Цвета для веб-дизайна играют огромную роль. Чтобы грамотно подобрать цветовую схему для сайта, существуют специальные сервисы. Уверена, что у каждого веб-дизайнера в закладках есть хотя бы один такой.
Иногда вот сидишь и думаешь, какой оттенок голубого выбрать основным для сайта, чуть светлее или чуть ярче, а может потемнее взять… А к нему еще надо дополнительные подобрать. Можно конечно делать это и на глаз, но лучше воспользоваться одним из специальных сервисов.
Я не буду рассказывать про теорию цвета (это слишком объемная информация), а просто опубликую здесь сервисы, которые есть у меня в закладках и которыми я пользуюсь.
С этим инструментом я дружу уже много лет. Наиболее удобный инструмент для подбора цветов (на мой взгляд). У него много дополнительных возможностей. Например можно посмотреть пример светлой и темной страницы с выбранными цветами.
Есть возможность оценить, как будут видеть вашу цветовую гамму люди с дальтонизмом и другими особенностями зрения. Можно выбрать безопасные веб-цвета.
Adobe Kuler второй веб инструмент, который я довольно часто использую. Подбор цветовой схемы происходит практически также, как и на предыдущем сайте, но люблю я его не за это. Кроме того, что вы сами можете создавать цветовые схемы, вы можете посмотреть и использовать схемы, созданные другими людьми.
Для этого надо нажать кнопку в левом верхнем меню «Смотреть». И перед вами откроется галерея всевозможных цветовых сочетаний.
Этот инструмент немного похож на Сolorscheme, но имеет меньше функций, зато есть возможность посмотреть, как будут выглядеть цветовые блоки.
Этим сайтом я практически не пользуюсь, но раз уж он есть у меня в закладках, то решила добавить и его.
Следующие два сайта генерируют палитру из выбранного вами изображения. It is magic:)
Вы выбираете любую картинку, цвета которой вам нравятся, сервис ее анализирует и выдает вам цветовую палитру. Эти два сайта отличаются лишь тем, как предоставлять им картинку.
На этот сайт нужно загрузить картинку со своего компьютера.
Очень удобный инструмент для подбора цвета. Основан на принципе «Нравится — Не нравится».
Как видно из названия, здесь можно подобрать цвета для модного сейчас, плоского дизайна. Сайт интересен тем, что выбрав палитру, вы можете скачать ее для программ Corel и Photoshop.
Еще один модный тренд — материал дизайн. Данный сайт помогает подобрать сочетания цветов для UI (user interface). Дополнительно на сайте есть большой набор иконок.
И напоследок снова user interface. Здесь просто набор цветов для UI дизайна. Нажав на любой цвет, можно посмотреть как на определенном фоне будет читаться белый текст.
Вот такие инструменты есть у меня в закладках.
Напишите в комментариях, какими сайтами подбора цвета для веб-дизайна пользуетесь вы?
