Содержание

4 способа и 2 онлайн-сервиса подбора цветовой гаммы в веб-дизайне

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

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

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

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

Правила подбора цветовой гаммы для сайта:

  • Кол-во цветов: 2-3 шт.
  • Цвет текста: белый или черный (исключение заголовки)
  • Контрастные цвета фона и элементов сайта (если у вас фон темный, то цвет текста или элемента сайта поверх фона должен быть светлый и наоборот)

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

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

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

Также стоит учитывать то, что постоянной рекламой через телевизор, билборды, листовки и т.п. нам «запрограммировали» в мозг ассоциации цвета с какими-то компаниями и соответсвенно какими-то качествами. Например зеленый — сбербанк (очереди, негатив), красный- cocacola (жажда, радость).

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

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

  • Игровой портал (аудитория: школьники и студенты) — соответсвенно у них все хорошо со зрением поэтому можно использовать 3-7 цветов и очень яркие оттенки.
  • Информационный сайт по выращиванию морковки (аудитория: пенсионеры) — со зрением почти у всех буду проблемы, поэтому цветов 1-2 максимум, фон обязательно белый или светло-серый и никаких ярких оттенков.

Как сфера деятельности сайта влияет на подбор цветовой гаммы?
Давайте для примера возьмем два сайта:

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

Как тип сайта может повлиять на выбор цветов для сайта?
Давайте рассмотрим еще один пример:

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

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

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

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

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

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

4) Самый лучший способ, не придумывать а скопировать уже оптимальную цветовую гамму:
Зайдите на themeforest или 365psd и просто возьмите самые популярные шаблоны, с вероятность в 80-90% там будет гармоничная цветовую гамму.
Дальше вам просто нужно сохранить картинку, открыть в фотошопе и с помощью пипетки определить основные цвета.

[sociallocker id=»346″]

Теперь давайте рассмотрим 2 классных сервиса которыми я сам пользуюсь и рекомендую вам, особенно если вы любите стили flat и material:

  • www.flatuicolors.com — здесь уже заготовка из 20 готовых цветов в стиле flat, даже если вы будете тыкать мышкой наугад, то скорее всего цветовая гамма все равно получится гармоничной, чтобы ее испортить нужно еще иметь талант 🙂
  • www.materialpalette.com — аналогичный сервис, также с подборкой из 20 готовых цветов, но уже в стиле material (в отличаи от flat гораздо более ярких). Лично я использую почти всегда именно этот сервис.

[/sociallocker]

Трендовые Инструменты и Цветовые Схемы для Разработки

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

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

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

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

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

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

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

Какие инструменты являются наиболее подходящими и популярными для выбора схем веб-цвета в оформлении

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

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

Kuler


Пример интерфейса сервиса Kuler. Источник.

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

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

Плагины этого сервиса доступны для многих структур Adobe, Photoshop, Illustrator и InDesign. Все эти факторы делают этот сервис необходимым для работы многофункциональным инструментом.

ColorExplorer

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

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

Color on the Web

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

ColourLovers


Пример подборки палитры по картинке при помощи ColourLovers. Источник.

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

Также это пространство постоянно пополняется с учетом последних тенденций в области веб-дизайна.

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

Pictaculous

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

Этот инструмент имеет возможность для совмещения с Colourlovers и Kuler. Такое отношение позволяет использовать данный ресурс как самостоятельный компонент, а также как сопутствующий портал.

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

Contrast-A


Объемная цветовая подборка из Contrast-A. Источник.

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

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

ColoRotate

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

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

При работе можно совмещать этот инструмент с различными приложениями, например, Creative Suite. Дополнительно он представлен в качестве отдельного приложения для устройств с операционной системой iOS. Его можно интегрировать с Photoshop, при этом сервис будет работать в качестве цветовой консоли.

Color Scheme Designer


Цветовая палитра и ее отображение в Color Scheme Designer. Источник.

Благодаря этому порталу можно получать несколько различных и интересных в своем исполнении вариантов для воспроизведения цветовых схем. Данный  инструмент относится к группе онлайн сервисов и имеет некоторые схожие черты с Adobe Kuler.

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

  • яркости;
  • насыщенности;
  • контрастности.

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

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

Copaso

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

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

ColourGrab

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

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

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

ColorBlernder


Интерфейс ColorBlernder. Источник.

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

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

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

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

Colrd

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

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

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

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

Colourmod

Этот сервис представляется в виде виджета для рабочего стола. С его помощью можно легко подобрать необходимую цветовую гамму для оформления. При его использовании можно осуществлять выбор цветов из любой зоны, где применяется этот инструмент. Его можно интегрировать в программу Dashboard, которая применяется на MacBook. Вместе с этим его можно использовать для программы Konfabulator, осуществляющая свою работу на базе операционной системы Windows. Такое разнообразие применения делает этот виджет максимально универсальным в плане подбора для разных устройств.

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

Выводы

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

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

На сегодняшний день популярностью пользуются:

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

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

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

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

Определить цвет по фото онлайн

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

Содержание

  • Get Color — программа для определения цвета
  • Imgonline — сервис, который поможет подобрать цвет по фото
  • Color Palette Generator — генерация палитры онлайн
  • Colr.org — определяет цвет по картинке
  • Colourlovers — покажет HEX-код любой фотографии
  • ColorGrab — приложение для идентификации цвета по фото
  • Coolors — онлайн-сервис для анализа цветовой палитры
  • Imagecolorpicker — поможет понять, какие цвета использованы на картинке

Get Color — программа для определения цвета

В программе Get Color можно узнать HEX-код цвета и его название, а также получить на него ссылку. Чтобы ознакомиться с доступными функциями, перейдите по ссылке get-color.ru. Данные онлайн-сервис специализируется на создании красивых и гармоничных палитр на основе заданных оттенков по фото.

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

  • HSL. Модель конвертирует цвета в различные градации серого.
  • RGB/RGBA. Формат для художников и веб-дизайнеров.
  • CSS/CSS3. Так называется кодировка для верстки HTML.
  • CMYK. Это модель для применения в полиграфическом дизайне.

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

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

Изменение фона в приложении GetColor

В самом верху экрана есть клавиша для перехода к инструменту «Пипетка».

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

Читайте также: Как подобрать цвет волос онлайн по фото бесплатно.

Imgonline — сервис, который поможет подобрать цвет по фото

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

Как определить цвет по фото с его помощью:

  1. Загрузить картинку с компьютера;
    Выбрать изображение на IMGonline
  2. Задать нужные настройки и кликнуть ОК;
    Завершение настройки IMGonline
  3. Получить результат и скачать изображение с привязанной к нему палитрой.
    Как сохранить результат IMGonline

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

Color Palette Generator — генерация палитры онлайн

Сервис по этой ссылке degraeve.com/color-palette автоматически сгенерирует палитру из основных цветов предложенной вами иллюстрации.

Как с ним работать для определения цвета по фотографии:

  1. Просто вставьте URL понравившейся иллюстрации в поле для ввода. Опции «Загрузить со своего компьютера» тут не предусмотрено.
  2. Нажмите на кнопку Color-Palette-ify!
    Кнопка для генерации палитры
  3. Скопируйте коды нужных цветов или сделайте скриншот страницы. Сохраните результат. После этого можно будет подгружать его в графический редактор и забирать цвет пипеткой.

У того же разработчика есть также такая программа как ColorHunter. Она позволяет очень легко и быстро подбирать красивые коллекции оттенков на основе фотографий. Найти ее можно тут colorhunter.com.

Интерфейс ColourHunter

Цвет будет подобран по HEX-коду. Программа поддерживает API для загрузки изображений с Flickr.

Еще один интересный проект от того же создателя – Logo Maker logoshi.com.

Сервис Logoshi

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

Это может быть полезным: Как узнать название комнатного цветка по фото.

Colr.org — определяет цвет по картинке

Данный сервис colr.org красиво раздробит ваше изображение на составляющие цвета. Это будет выглядеть следующим образом:

Интерфейс онлайн-сервиса Colr

Colourlovers — покажет HEX-код любой фотографии

Это инструмент для определения HEX-кода по фото онлайн. Здесь вы сможете сделать палитру из своего фото, или взяв любое изображение на Flickr. Чтобы поработать с ним, отправляйтесь сюда colourlovers.com/palettes/add.

 

Интерфейс Colourlovers

ColorGrab — приложение для идентификации цвета по фото

Для владельцев смартфонов на базе Андроид существует приложение Color Grab.

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

  1. Запустите программу. Наведите фотокамеру на нужный объект.
  2. Приложение немедленно выведет информацию об обнаруженном цвете: координаты HSV, RGB, название. Сохраните его в библиотеке.
  3. После этого цвет можно экспортировать в графический редактор, разослать в виде текстового файла по почте или в соцсетях, отправить в Dropbox, поставить на рабочий стол.

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

Коллекция цветов в Colorgrab

Coolors — онлайн-сервис для анализа цветовой палитры

Сервис Coolors поможет проанализировать основные цвета снимка или картинки.

Как с ним работать, чтобы узнать, что за цвет изображен на фото:

  1. Сверху на панели инструментов видно схематичное изображение фотокамеры. Щелкните по ней.
    Создание палитры по фото в Coolors
  2. Перед вами появится окно для загрузки. Найдите картинку с интересной цветовой гаммой на своем компьютере и залейте ее на сайт. Также можно вставить в специальную графу ссылку на изображение, лежащее на стороннем ресурсе.
    Загрузка картинки на сайт Coolors
  3. Вы можете вручную выбирать основные цвета, формируя палитру. Поставьте курсором точку на ячейку, в которую будет сохраняться ваш выбор. Затем щелкните по месту на картинке, чтобы взять нужный цвет.
    Как добавить цвет с фото в палитру Coolors
  4. Нажав на кнопку «Next», можно экспортировать палитру в формате png или просмотреть информацию о выбранных оттенках.
    Где найти кнопку Next в онлайн-программе Coolors

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

Кнопка для перехода к созданию коллажа

Далее:

  1. Покрутите снизу на шкале настройки, чтобы добиться наиболее удачного цветового расклада.
    Как менять цветовой расклад Coolors
  2. Нажмите «Next». Найдите в маленьком всплывающем меню опцию «Create Collage». Кликните по ней.
    Как создать коллаж в Coolors
  3. Посмотрите, как может выглядеть ваша палитра.
    Внешний вид палитры
  4. Выбирайте, какой аспект картинки будет отображаться.
    Выбор аспекта в Coolors
  5. Определитесь, как именно организовать цвета.
    Возможности сервиса Coolors

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

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

Названия кнопок:Назначение:
View shades.Щелкните здесь, и сервис покажет список родственных оттенков – от самого светлого до самого темного.
Drag.Нажатие этой кнопки позволит вам затем произвольно перемещать цвет по палитре. Так можно проверить, как он смотрится в другом окружении.
Lock.Если кликнуть на эту опцию, то при каждом обновлении палитры выбранный вами цвет останется зафиксированным.

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

Дальтонизм Coolors

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

Раздел Популярное в Coolors

Читайте также: Поиск по фото в соц. сетях.

Imagecolorpicker — поможет понять, какие цвета использованы на картинке

Простой онлайн-сервис Imagecolorpicker.com позволяет быстро определить ключевую цветовую палитру.

Как определить цвет по фото с его помощью:

  1. Залейте на сайт нужную картинку;
  2. После загрузки сервис автоматически подскажет, какой цвет является доминирующим.
  3. Нажмите на кнопку «Показать больше»;
    Где находится кнопка Узнать больше
  4. Вы получите исчерпывающую информацию по любому из оттенков на палитре.
    Окно с дополнительной информацией

Сервисов для анализа основных цветов очень много.

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

Как работать с сайтом Coolors.co

Опубликовано в рубрике «Программы»

Как использовать инструмент GIMP «Выбор по цвету» для выделения — Parker Photographic

Фото Джессики Льюис

Знание того, какой параметр выбора использовать в GIMP, — это полдела при редактировании изображений. Другая половина знает, как его использовать. Когда дело доходит до инструмента «Выбор по цвету», он делает то, что следует из его названия; делает выбор на основе цвета!

Сегодня вы узнаете все, что вам нужно знать об инструменте «Выделение по цвету» и о том, как его использовать. Если вы готовы… давайте сделаем это!

Содержание

Что такое инструмент «Выбрать по цвету»,


в GIMP

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

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