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

Екатерина Малярова

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

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

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

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

1. Adobe Kuler

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

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

Несомненным плюсом Adobe Kuler является наличие его плагина в графическом редакторе Adobe Photoshop. То есть вы можете работать с Adobe Kuler он-лайн, либо используя программу Adobe Photoshop на своём компьютере.

2. ColorScheme

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

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

3. BigHugeLabs

BigHugeLabs – ещё один ресурс, на котором существует сервис Color Palette Generator, позволяющий подобрать цветовую палитру по изображению. Вы можете загрузить изображение с компьютера или прямо из социальных сетей (Фейсбук, Инстаграм).

После загрузки нажимаете «Create palette» (создать палитру) и получаете цветовую палитру. При этом каждому цвету в палитре будет присвоено название и специальный код. Полученную палитру вы можете скачать в формате ASE и использовать в дальнейшем для работы в Adobe Photoshop.

4. Pictaculous

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

5. COLOURlovers

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

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

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

6. ColorCombos

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

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

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

7. ColorExplorer

ColorExplorer – многофункциональный ресурс с большими возможностями работы с цветом. Он был разработан специально для профессиональных дизайнеров. Набор инструментов данного ресурса позволяет не только подбирать цвета и составлять цветовые палитры, но и изучать популярные библиотеки цветов, объединять библиотеки, экспортировать палитры в такие программы, как Adobe Photoshop, Illustrator, InDesign и др.

Для того чтобы получить цветовую тему понравившегося изображения, следует загрузить его через вкладку Image Color Import. Вы увидите все цвета и оттенки (от 3 до 50), имеющиеся на данном изображении.

Очень интересно работать во вкладке Color Matching – это цветовой блендер, позволяющий изменять компоненты цвета с помощью значений RGBи HSL. Подобрав необходимую цветовую палитру, вы можете добавить её к уже существующей, либо сделать замену, ну, и как вариант, сохранить в своих палитрах My Palettes.

8. ColoRotate

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

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

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

9. ColRD

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

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

10. Яндекс

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

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

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

Пример картинки для будущей палитры цветов

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

10 шагов к созданию собственного комплекта с необходимыми цветовыми тонами

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

Панель «Образцы»

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

Чтобы удалить набор, с каждым образцом придётся работать отдельно, в программе нет такой функции как «очистить все образцы». Поэтому для удаления одного цвета необходимо нажать кнопку Alt (Win) или Option (Mac) и при наведённом на него курсоре мыши удаляем его простым кликом. Всего образцов 122, столько же раз придётся кликнуть. В конечном итоге после проделанной операции панель должна остаться пустой.

Инструмент «Пипетка»

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

Первый цветовой образец, полученный с изображения

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

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

Выбор необходимого цвета для палитры с помощью пипетки

Добавление цвета на панель «Образцы»

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

Создаём набор с цветовыми оттенками

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

Выбираем нужный цвет и кликаем по пустой области на панели с образцами;

Сохраняем цвет в качестве образца, при надобности присваивая ему имя.

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

Готовая новая палитра

Сохранение образцов в отдельном наборе

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

Восстановление цветовых образцов, заданных по умолчанию

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

Загрузка набора цветовых оттенков

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

Палитры и образцы цветов

Выбор основного цвета на панели «Образцы»

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

Задаём фон

Чтобы задать фон, необходимо определиться с цветом. Затем нажимаем и удерживаем клавишу Ctrl (Win) или Command (Mac) и кликаем на нужный цвет на панели. В результате вся рабочая область программы приобретёт фон. Далее все выбранные цвета из собственного набора можно использовать по своему усмотрению, всё зависит от фантазии. Воспользовавшись инструментами Photoshop, можно оформлять плакаты в определённой цветовой гамме.
Таким образом, данная статья позволяет создавать собственный набор с необходимыми цветовыми оттенками в программе Photoshop. Если следовать представленной пошаговой инструкции, данная операция не займёт слишком много времени.

Макет изделия с использованием ранее созданной пользовательской палитры цветов

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

Немного теории

Цвета для веб делаются при помощи сочетаний красных, зелёных и синих оттенков, этот способ сочетания цветов называется RGB (Red Green Blue).

Каждый цвет представлен целым числом от 0 до 255, и у каждого цвета есть значение для красного, зеленого и синего. Черный, например, не имеет никакого тона, и в RGB он обозначается как 0, 0, 0. Первая цифра всегда означает значение красного цвета, вторая-зелёного и третья-синего.

Поскольку есть 256 разновидностей каждого оттенка, cуществует и 16 миллионов всевозможных цветовых комбинаций RGB. Большинство компьютеров на сегоднешний день может точно отображать все эти 16 миллионов оттенков цветов. Есть так называемые «безопасные цвета», о необходимости их использовать мы уже писали .

При указании цвета Вы можете употреблять значение RGB или же шестнадцатеричную систему HEX. Цвета HEX обозначаются шестью цифрами, перед которыми стоит знак #. HEX состоит из комбинации чисел и букв; 0- самое маленькое значение, FF (255) — самое высокое. Каждый из этих шести знаков в HEX соответствует числам в кодировке RGB. Черный цвет имеет значение HEX #000000.

147 цветов определяются по названию для HTML и CSS согласно w3schools.com . Есть 17 стандартных цветов - морская волна (aqua), чёрный (black), синий (blue), фуксия (fuchsia), серый (gray), серый (grey), зелёный (green), лайм (lime), тёмно-бардовый (maroon) , тёмно-синий (navy), оливковый (olive), пурпурный (purple), красный (red),серебряный (silver), сине-зелёный (teal), белый (white) и жёлтый (yellow). У каждого цвета есть своё определенный RGB и значение HEX . У тёмно-бардового, например, есть значение RGB 128, 0, 0 а значение HEX #800000; у серебристого — 192, 192, 192 или #C0C0C0.

Создаём палитру

Иногда создание палитры кажется легче, чем это есть на самом деле. Некоторые опытные дизайнеры могут создавать палитру с нуля; другие черпают вдохновение с других сайтов или внешних источников (рассматривая цвета на упаковке с чипсами в хозяйственном магазине или находя нужные решения в природе).

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

Чтобы использовать цвета, которые Вы нашли на других источниках, возьмите цифровую фотографию и откройте ее в каком-нибудь графическом редакторе, например в Adobe Photoshop. Увеличьте масштаб изображения, пока пиксели не станут чётко видны и используйте инструмент «Пипетка», чтобы выбрать оттенки, которые Вам понравились, затем запишите их значения.

Полезные ресурсы

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

Инструмент для создания палитры из шести цветов, которую дизайнеры могут скачать в формате.atc для Фотошопа, .epc для Иллюстратора или отправить на электронную почту. Установите оттенок для каждого цвета при помощи ползунка или укажите сами его значение.

У есть большая библиотека готовых цветовых комбинаций из пяти систем цветов. Для определения цвета можно использовать инструмент «Пипетка». Есть множество возможностей (просматривать цвета вместе с текстом, генерировать шаблоны сайтов с выбраными цветами и т.д.). При помощи этого сервиса также можно определить цвета понравившегося веб-сайта(просто введите его url).

Color Palette Generator

Serg
24 февраля 2012 в 21:33
Отличная и полезная подборка. От себя могу отметить colorschemedesigner.com, в котором кроме всего прочего имеется различные режимы представления для людей с заболеваниями восприятия цвета. Можете проверить, например, как будут видеть вашу работу люди с тританопией)
Константин
25 февраля 2012 в 8:47
Очепятка в самом начале — RGB (Read Green Blue) — Читать Зелёный Синий)))
Elena17 Ответ:
февраля 25, 2012 at 3:30 пп

Спасибо;), уже исправила.
Ирина
25 февраля 2012 в 22:55
Создателям сайта!
Очень люблю ваш сайт и постоянно читаю свежие посты..
По какой то причине в последнее время Касперский(лицензия) стал ругаться и блокировать Вашу страницу!
Обращаю Ваше внимание на это..
Im Ответ:
февраля 26, 2012 at 7:51 пп

Спасибо, разберемся))
Елена
26 февраля 2012 в 11:50

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

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

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

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

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

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

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

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

8. Главная идея Сolr : игра с цветом и цветовыми схемами. Этот сайт является одновременно игрушкой и серьезным генератором идей.

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

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

11. На Сolrd можно создавать схемы цветов, шаблоны, загружать изображение, чтобы узнать его цветовую гамму и многое другое.

12. ColorHunter – это ресурс, на котором можно найти и создать цветовые палитры, сделанные из изображений. Чтобы найти цветовые палитры на сайте, нужно ввести поисковый запрос в поле в верхней части страницы. Поиск можно осуществить по тегам, шестнадцатеричному коду цвета или ссылке на изображение. Изображение, также, можно загрузить из ПК.

13. позволяет имитировать девять видов цветовой слепоты.

14. Etsy – это самый забавный и необычный способ подобрать цвет.

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

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

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

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

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

Начнем с краткого введения в теорию цвета.

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

Подготовка

Вам необходимо вдохновение?

1.

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

Ищете готовую палитру?

2.

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

Палитра сопровождается говорящими названиями: Шторм в Уитсанди (тихоокеанский архипелаг в Коралловом море), Сумерки в Уитсанди, Остров Уитсанди

3.

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

4.

В ColoRotate вы найдете библиотеку цветовых схем, которые можно просматривать, выбирать и изменять. Сделать собственную палитру на основе найденной поможет специальный 3D инструмент (3D color tool). Цветовую схему, созданную вами, можно сразу применить в PhotoShop или Fireworks, установив ColorRotate plugin или приложение для iPad.

В соответствии с требованиями бренда

Что, если у вас уже есть картинки, логотипы или требования бренда, которым нужно соответствовать?

1.

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

2.

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

3.

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

4.

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

5.

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

6.

Этот плагин для Chrome помогает гармонизировать цвета, учитывать дальтонизм и идентифицировать HEX-коды. Цветовые палитры можно сразу экспортировать в Illustrator, PhotoShop и CoIRD.com.

7.

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

8.

Этот инструмент подбирает цвета, которые сочетаются с вашим. Он немного примитивнее, чем другие ресурсы в этом списке. Нужно вставить HEX-код цвета в строку или выбрать его на представленном в форме колеса спектре. Генератор выдает 3 цвета, которые подходят вашему, и сопровождает их HEX-кодами.

Создать свой цвет

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

1.

Это приложение для iOS помогает выбрать из нескольких цветов, которые размещаются рядом через небольшое расстояние, что намного удобнее градиентного представления, кругов и спектров. Большие цветовые сетки позволяют использовать весь экран (что особенно ценно для владельцев iPad Pro). В приложении можно создавать образцы цвета, находить RGB, HEX и HSLA значения и делать палитры из набросков.

3. Color

В Color от HailPixel не определиться с цветом нельзя. Вы точно поймете, что хотите и получите HEX-код оттенка.

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

Получить код цвета

Если вы увидели где-то цвет и хотите узнать его код и название, эти ресурсы для вас.

1.

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

2.

HTML Color Codes находит HEX-код для цветов на изображении. Вы выбираете картинку, открываете ее для просмотра и получаете код цвета, наведя на него курсор.

Протестировать свою палитру

Создав цветовую схему, хочется удостовериться в ее эффективности.

Check my Colours проверяет основные и фоновые цвета на соответствие требованиям контрастности для тех, чье цветовое восприятие имеет отклонения от нормы. Если вы хотите убедиться, что ваш сайт подходит для людей с дальтонизмом или получить работающие и интуитивно понятные цветовые сочетания с точки зрения UX, этот ресурс незаменим. Достаточно ввести адрес сайта, чтобы ознакомиться с отчетом по его внешнему виду.

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

Заключение

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