Программа подбора цветовой гаммы. Генераторы палитр в помощь веб-дизайнеру. Создаем цветовую палитру
Одна из важных составляющих работы веб-дизайнера – создание палитры, подбор гармонично сочетающихся друг с другом цветов. Процесс это достаточно сложный, требующий творческого подхода. Есть ряд ресурсов, способных значительно упростить работу с цветом.
Недавно вы могли встретить детальную статью про . А чуть ранее я публиковал похожую заметку о инструментах для выбора с обзором Kuler и СolorBlender. Сегодня решил дополнить тему и предоставить чуть больше вариантов выбора палитр цветов для сайта.
ColoRotate
Инструмент ColoRotate позволяет выбирать самые подходящие цветовые схемы из большого числа готовых предложений или создавать собственные. Выбирая цвета в разных местах на вращающейся 3D палитре, можно получать сочетания, построенные на гармонии или на контрасте, работать с оттенками, яркостью, насыщенностью, смешивать разные краски. Можно также извлекать цвета из готовых изображений. Есть версия для iPad, доступна синхронизация с Photoshop. Очень красивый сервис.
Adobe Color CC
Генератор палитр и цветовых схем Adobe Color CC позволяет:
- экспериментировать с комбинациями цветов на интерактивном цветовом кругу (доступно 7 разновидностей цветовых систем);
- генерировать цветовые темы, пользуясь предварительно заданными стилями;
- создавать цветовые схемы, используя цвета с фотографии или любого другого готового изображения;
- делиться своими работами и знакомиться с чужими, черпая в них вдохновение.
Созданные цветовые темы можно сохранять в приложениях для ПК или мобильных устройств, а также в разделе “Мои Темы” на сайте.
DeGraeve
На сайте DeGraeve представлено множество инструментов, в том числе генератор цветовых схем на основе готовых изображений. Достаточно найти в интернете картинку с интересной цветовой гаммой, загрузить URL этого изображения в соответствующую строку на сайте и нажать кнопку генерации палитры. Через несколько секунд программа разложит картинку на 10 основных цветов, 5 приглушенных (dull) и 5 ярких (vibrant), присвоив каждому свой код. Сгенерированную палитру удобно использовать при работе над дизайном сайта, цвета будут отлично сочетаться друг с другом.
Contrast-A
Инструмент Contrast-A со слоганом «Найдите доступное сочетание цветов» предназначен для создания пользовательских палитр в процессе экспериментов с сочетающимися цветами. Программа основана на руководстве о сочетаемости цветов веб-контента (текста и фона). Для работы с ней желательны базовые знания по этой теме.
Сервис позволяет выбирать на палитре 2 цвета, и оценивать, как они будут смотреться вместе, будучи использованными как текст и фон. Причем демонстрируются результаты для нормального цветовосприятия и различных форм цветовой слепоты.
ColorZilla
Приложение ColorZilla для Firefox (есть также версия для Google Chrome) в помощь веб-мастерам и специалистам по графическому дизайну, работающим с цветом. Будет полезно как новичкам, так и продвинутым пользователям. Программа производит цветовой анализ любой точки и любой страницы в браузере, извлекает нужные цвета для использования в других приложениях. Определение цветовой палитры страницы, выбор цветов из предустановленного набора, сохранение в составе пользовательской палитры тех, что чаще всего употребляются,– таков набор ее возможностей.
Pictaculous
Pictaculous — еще один генератор цветовых палитр на базе готовых изображений. Нужно только загрузить на сайт выбранную картинку объемом не больше 500 КБ, и тут же начнется его цветовой анализ. Под результатом с цветовой гаммой изображения выводится еще десяток палитр, но уже созданных вручную, членами сообществ ресурсов Kuler и COLOURLovers. Их тоже вполне можно использовать в качестве цветового решения для разрабатываемого сайта. Доступна пересылка результата себе на почту, и шеринг в социальных сетях.
Если вы знаете еще какие-то генераторы цветовых палитр, делитесь ссылками в комментариях.
Один из самых важных факторов при создании уникального и узнаваемого дизайна - цвет. Грамотный выбор цветовой схемы может определить успех или провал сайта. Когда посетитель бросает первый взгляд на веб-страницу, то выбранные вами цвета посылают ему мгновенное сообщение об этой странице. К счастью, существует много инструментов, которые помогут выбрать правильную цветовую схему. Вот пять лучших из них.
1. Kuler
Kuler от компании Adobe давно признан лучшим помощником профессионального веб-дизайнера. В отличие от конкурентов, здесь есть обширное коммьюнити и можно делиться созданными палитрами или брать чужие цветовые схемы и модифицировать под свои нужды. Для общения в сообществе нужно зарегистрироваться и получить Adobe ID. Цвета в Kuler представляются в различных форматах, включая RGB, CMYK, LAB и HSV.
Вдохновение может возникнуть под влиянием самого неожиданного повода. Например, вы можете наткнуться на красивую фотографию с привлекательной цветовой гаммой. Этот генератор цветовой палитры создан как раз для обработки таких фотографий. Загружаете файлы в форматах JPG или PNG - и получаете подробную раскладку по ключевым цветам. Независимо от того, какую реакцию вы пытаетесь вызвать у ваших посетителей, генератор цветовой палитры поможет создать уникальный внешний вид для любого веб-сайта.
Отдельные цвета никогда не висят в вакууме, и каждый оттенок воздействует на окружающие. Инструмент Contrast-A применяет сугубо технический подход к конфигурации палитры, предоставляя подробную информацию о соотношение канала яркости (Luminance Ratio) и отличиях в яркости и цвете. Это идеальный инструмент, если нужно создать минималистский сайт с небольшим количеством цветов, которые дополняют друг друга.
Этот популярный плагин для Firefox позволяет прямо в браузере определить значения отдельных цветов и измерить разницу между ними. Есть «браузер цветовых схем» для выбора отдельных цветов из заранее подобранных наборов. Простой в использовании и чрезвычайно многофункциональный, плагин ColorZilla - словно швейцарский армейский нож среди расширений браузера для веб-дизайнеров и художников.
В отличие от большинства других генераторов цветовых схем типа «цветового колеса», Colorotate показывает палитру на трёхмерном конусе. Как и Kuler, пользователи могут сохранять и редактировать свои цветовые схемы, а также просматривать палитры, сделанные другими дизайнерами. Инструмент интегрирован с популярными дизайнерскими программами Adobe Fireworks и Photoshop.
Когда речь идёт об эффективном веб-дизайне, то говорят об интуитивном пользовательском интерфейсе и макетах, однако цветовые схемы имеют такое же большое значение, а то и бóльшее. Перечисленные здесь инструменты должны направить вас в верном направлении, чтобы выбрать отличную цветовую палитру для сайта с первой попытки. В интернете можно найти и другие полезные инструменты, но именно с этих вы можете начать подбор идеального арсенала, который соответствует вашему персональному стилю. Удачи и счастливого дизайна!
Цвета для веб-дизайна играют огромную роль. Чтобы грамотно подобрать цветовую схему для сайта, существуют специальные сервисы. Уверена, что у каждого веб-дизайнера в закладках есть хотя бы один такой.
Иногда вот сидишь и думаешь, какой оттенок голубого выбрать основным для сайта, чуть светлее или чуть ярче, а может потемнее взять… А к нему еще надо дополнительные подобрать. Можно конечно делать это и на глаз, но лучше воспользоваться одним из специальных сервисов.
Я не буду рассказывать про теорию цвета (это слишком объемная информация), а просто опубликую здесь сервисы, которые есть у меня в закладках и которыми я пользуюсь.
С этим инструментом я дружу уже много лет. Наиболее удобный инструмент для подбора цветов (на мой взгляд). У него много дополнительных возможностей. Например можно посмотреть пример светлой и темной страницы с выбранными цветами.
Есть возможность оценить, как будут видеть вашу цветовую гамму люди с дальтонизмом и другими особенностями зрения. Можно выбрать безопасные веб-цвета.
Adobe Kuler второй веб инструмент, который я довольно часто использую. Подбор цветовой схемы происходит практически также, как и на предыдущем сайте, но люблю я его не за это. Кроме того, что вы сами можете создавать цветовые схемы, вы можете посмотреть и использовать схемы, созданные другими людьми.
Для этого надо нажать кнопку в левом верхнем меню «Смотреть». И перед вами откроется галерея всевозможных цветовых сочетаний.
Этот инструмент немного похож на Сolorscheme, но имеет меньше функций, зато есть возможность посмотреть, как будут выглядеть цветовые блоки.
Этим сайтом я практически не пользуюсь, но раз уж он есть у меня в закладках, то решила добавить и его.
Следующие два сайта генерируют палитру из выбранного вами изображения. It is magic:)
Вы выбираете любую картинку, цвета которой вам нравятся, сервис ее анализирует и выдает вам цветовую палитру. Эти два сайта отличаются лишь тем, как предоставлять им картинку.
На этот сайт нужно загрузить картинку со своего компьютера.
Очень удобный инструмент для подбора цвета. Основан на принципе «Нравится — Не нравится».
Как видно из названия, здесь можно подобрать цвета для модного сейчас, плоского дизайна. Сайт интересен тем, что выбрав палитру, вы можете скачать ее для программ Corel и Photoshop.
Еще один модный тренд — материал дизайн. Данный сайт помогает подобрать сочетания цветов для UI (user interface). Дополнительно на сайте есть большой набор иконок.
И напоследок снова user interface. Здесь просто набор цветов для UI дизайна. Нажав на любой цвет, можно посмотреть как на определенном фоне будет читаться белый текст.
Вот такие инструменты есть у меня в закладках.
Напишите в комментариях, какими сайтами подбора цвета для веб-дизайна пользуетесь вы?
Любой веб-дизайнер понимает насколько важен . При помощи цвета расставляются акценты - подчеркиваются важные детали и скрадываются вспомогательные. При помощи цвета создается настроение. Цвет - первое, что видит посетитель сайта, еще до того как прочитает хоть одну букву или осознает, что изображено на той или иной фотографии. Цветовая палитра Вашего сайта может задержать посетителя, а может отпугнуть его.
Выбор правильной цветовой палитры - первый шаг на пути построения идеального и безупречного сайта. Цвет каждого элемента страницы должен гармонировать не только с визуально связанными элементами, но и с общей цветовой схемой страницы и сайта в целом.
Для того, чтобы не ошибиться в начале пути мы подготовили небольшой обзор генераторов цветовых схем , позволяющих выбрать правильное количество и сочетание основных цветов, которые Вы будете использовать при разработке сайта. Одни из них достаточно просты и имеют стандартную функциональность, другие обладают рядом уникальных функций. Но все они, несомненно, окажут неоценимую помощь в разработке уникального дизайна сайта.
Adobe Color CC
Adobe Color CC - своеобразный стандарт подобных приложений, которое позволяет создавать различные цветовые схемы используя для этого цветовой круг . В помощь дизайнеру будет и прямой доступ к сообществу Adobe Kuler , где можно подобрать тысячи всевозможных цветовых решений.
Paletton
Один из старейших (работает с 2002 года) в нашем обзоре инструментов для создания цветовых комбинаций и цветовых решений .
Stylify me
Исследует указанный в строке поиска сайт и предоставляет отчет об используемых в нем цветовых комбинациях , шрифтах, размерах изображений и т.п. Это позволит дизайнеру построить собственные решения, взяв за основу понравившийся сайт.
Coolors
Позволяет сгенерировать базовую цветовую комбинацию , а затем выполнить тонкую настройку полученной палитры по своему вкусу и сохранить ее в различных форматах - SVG, PDF или SCSS.
Цвет – один из самых важных элементов в работе дизайнера. Но его, как концепцию, довольно сложно освоить: из-за множества комбинаций палитр зачастую трудно решить, каким образом лучше оформить интерфейс веб-страниц и приложений. Ранее мы публиковали обзоры инструментов по выбору и . А сегодня хотим расширить тему, разместив в блоге перевод статьи Essential Color Tools for UX Designers от Nick Babich.
В заметке содержится список лучших сервисов подбора цвета для сайтов и UX-дизайна, которые помогут значительно сэкономить вам время. Благодаря данным проектам вы узнаете:
- откуда черпать вдохновение;
- как создать собственную палитру;
- как сделать дизайн доступным людям с нарушениями цветового зрения.
1. Ищем вдохновение
Краски природы
Черпайте из окружающего вас мира. Все, что вам нужно – просто осмотреться. Модная одежда, обложки книг, дизайн интерьера… вас окружает так много потрясающих вещей. Но лучшие цветовые сочетания – это краски природы. Запечатлите красивый момент и попробуйте создать собственную подборку на основе конкретного изображения.
Лучшие сочетания красок – в природе. Можете получить цветовую схему из любого фото
Behance
В популярном сервисе найдете интересные работы, включенные в наилучшие онлайн-портфолио настоящих профессионалов своего дела. Этот сайт – также прекрасный источник вдохновения. Чтобы просмотреть новые достойные примеры проектов, просто выберите нужный цвет.
Dribbble Colors
Dribbble – одна из лучших , которая пригодится при создании пользовательского интерфейса. Если вы желаете визуально понять, каким образом другие специалисты использовали конкретный цвет, откройте страницу по ссылке dribbble.com/colors и укажите нужное значение.
Подбирая цвет для сайта здесь можно задать минимальный его процент — поэкспериментируйте, например, попробуйте поставить 30 % синего.
Попробуйте указать минимальный процент определенного цвета в Dribbble
Designspiration
Designspiration – полезный инструмент в первую очередь тем, у кого уже есть идеи цветовых комбинаций и кто хочет увидеть примеры таких сочетаний. Выберите от 1 до 5 вариантов, и найдете картинки, соответствующие указанным параметрам.
В Designspiration найдете разные примеры цветовых комбинаций
Tineye Multicolr
С помощью сервиса подбора цвета Tineye Multicolr сможете определить желаемую гамму изображения и даже задать процент каждого из них (соотношение). Сайт интегрирован с базой данных, состоящей из 20 млн фоток Creative Commons от Flickr. Это определенно один из самых быстрых способов найти в идеальной палитре.
Colorzilla
ColorZilla – расширение для установки в браузерах Chrome и Mozilla Firefox. Оно включает в себя такие инструменты, как «пипетка», функции просмотра палитр, создания и многое другое.
Расширение ColorZilla доступно в Chrome и Firefox
Shutterstock Spectrum
Один из лучших способов представить, как же будет выглядеть цветовая гамма, – посмотреть соответствующие изображения. Большинство решений, предлагающих выбор цвета для дизайна сайта, включают подобную функцию, но Shutterstock Spectrum располагает невероятно удобным интерфейсом и предварительным просмотром, что действительно может оказаться полезным.
Причем вам не потребуется подписка, поскольку предварительной оценки картинки будет вполне достаточно (даже несмотря на то, что на ней присутствует «водяной знак») .
W3Schools
Недавно в блоге рассматривали подборку от W3Schools. Там собрано очень много информации по теме, начиная от их названий/кодов оттенков, теории сочетания палитр и заканчивая описанием разных форматов: HEX, RGB, CMYK, HWB и др. Также найдете простенькие генераторы, конверторы и тому подобные «мини-сервисы». В целом, интересно посмотреть.
2. Создаем цветовую палитру
Material Design Color Tool
Сервис подбора цветов для сайта Material Design Color Tool позволит создавать цветовые схемы, делиться ими и просматривать приблизительный пользовательский интерфейс для подобранных вами параметров. Одна из полезных его функций – измерение уровня доступности любого сочетания цветов.
Coolors
Coolors – сайт для создания многоцветной палитры. Просто закрепите определенный цвет и нажмите на «пробел». Инструмент хорош также тем, что вы получите не один результат, а можете сгенерировать несколько вариантов, изменив лишь начальные данные.
Цветовая схема в Coolors на основе фото
Adobe Color CC
Сервис подбора цвета Adobe Color CC (ранее Kuler), сейчас довольно популярен. Он находится в свободном доступе в интернете, но существует также и десктор-версия. С помощью данного веб-приложения вы сделаете свою палитру, используя цветовой круг:
А можете получить определенный результат из готового изображения:
Подбор цвета для сайта по картинке
Здесь есть сотни готовых комбинаций, ищите их в разделе «Смотреть»:
Если пользуетесь десктоп-версией, то сможете в один клик экспортировать созданную вами цветовую систему в InDesign, Photoshop и Illustrator.
Paletton
Его часто сравнивают с предыдущим Adobe Color CC, поскольку эти проекты очень похожи. Разница лишь в том, что в Paletton вы не ограничены пятью параметрами, а можете экспериментировать с дополнительными тонами интерфейса.
Дополнительно можете глянуть на . Вместе с другими приложение позволяет работать в любом месте, просто используя свой смартфон. Кроме непосредственно задач по созданию/экспорту цветовых палитр, здесь можно выбирать определенные цвета из картинок или использовать базовые варианты.
3. Делаем палитру доступной
В настоящее время нарушения цветового восприятия куда более распространены, чем мы предполагаем. Около 285 млн человек в мире испытывают проблемы со зрением. Всегда нужно проверять, доступна ли выбранная вами таким пользователям.
WebAIM Color Contrast Checker
Одни тона прекрасно сочетаются друг с другом, другие же – совсем наоборот. Огромное количество проектов не проходят тест А/А, и это факт. Очень важно проверять визуальное оформление интерфейса и контрастность тонов, особенно если на странице много текста. Для этих целей используйте при подборе цветов сайта.
WebAIM Color Contrast Checker – веб-инструмент, с помощью которого проверяются цветовые коды в шестнадцатеричных значениях.
Coolors
О данном сервисе мы уже упоминали выше. Кроме всего прочего Coolors также поможет вам проверить придуманную палитру на цветовую слепоту.
Тип цветовой слепоты в схеме
Вместо режима «Обычный» выберите тот тип проблемы со зрением, который вы желаете сымитировать. В результате поймете, как именно человек, неспособный различать определенные цвета, увидит ваш дизайн.
Так человек с протаномалией видит палитру
NoCoffee Vision Simulator для Chrome
С помощью сайта NoCoffee Vision Simulator сможете просмотреть, как люди с цветовой слепотой или слабым зрением будут воспринимать определенные веб-страницы. Например, указав параметр «Ахроматопсия» в секции «Color Deficiency», вы увидите веб-страницу в сером цвете.
Так выглядит проект CNN для человека с дейтеранопией
Заключение
Все сервисы подбора цвета для сайтов и UX-дизайна, упомянутые в статье, определенно помогут вам в поисках интересной и эффективной гаммы. Но помните: лучший способ научиться создавать удивительные палитры – много практиковаться и экспериментировать.