Что такое цветовой генератор

Алгоритм генерирования цветовых палитр

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

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

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

Цветовые пространства

Начнём с теории. Сегодня для классификации цветов широко используются такие цветовые пространства:

RGB означает Red Green Blue . Так работают дисплеи: они излучают свет в трёх цветовых каналах, которые смешиваются в разной пропорции для получения всевозможных цветов. Значение в каждом канале варьируется от 0 до 255. R:0, G:0, B:0 (или #000000 в шестнадцатеричном выражении) — это чёрный цвет, а R:255, G:255, B:255 (или #ffffff) — белый.

CIE Lab

Цветовое пространство CIE Lab шире sRGB и включает в себя все цвета, воспринимаемые человеком. Оно создавалось с расчётом на универсальность восприятия. Иными словами, расстояние между цветами соответствует субъективной разнице: если значения двух цветов близки друг к другу, то и выглядят они похоже. С другой стороны, два далеко расположенных друг от друга цвета также воспринимаются как совсем непохожие. В CIE Lab для насыщенных цветов выделено больше места, чем для тёмных и светлых. К слову, для человеческого глаза очень тёмный зелёный почти неотличим от чёрного. Кроме того, это цветовое пространство трёхмерное: L означает светлоту (от 0.0 до 1.0), a и b (примерно от -1.0 до 1.0) — цветовые каналы.

Если RGB описывает, как дисплей отображает цвета, а CIE Lab — как мы их воспринимаем, то HCL — это цветовое пространство, которое ближе всего описывает то, как мы думаем о цветах. Оно тоже трёхмерное, H означает цветовой тон (hue) (от 0 до 360 градусов), С — насыщенность (chroma) и L — яркость (luminance) (оба параметра измеряются от 0,0 до 1,0).

Для вычислений рекомендую использовать CIE Lab, а для представления палитр пользователю — HCL. При желании можно преобразовать значения из этих пространств в RGB.

Разложение цветового пространства

Поскольку мне нужно было получить набор уникальных, индивидуальных цветов, сначала отбросим те, что выглядят очень похожими. Цветовое пространство будет трёхмерным, и для разделения таких низкоразмерных наборов данных прекрасно подходит алгоритм кластеризации методом k-средних. Он пытается разложить данные (в нашем случае — цветовое пространство) на k отдельных областей. И затем палитра собирается из центральных точек кластеров в этих областях. На гифке показано двумерное отображение работы алгоритма в трёхмерном пространстве CIE Lab.

Пишем код

С помощью реализованного на Go алгоритма метода k-средних задача решается всего в несколько строк кода. Сначала подготовим значения цветов в пространстве CIE Lab:

Я уже подобрал пару параметров и ввёл определённые ограничения для генерируемых цветов. В этом примере мы выкинем цвета слишком тёмные (яркость 0,8).

Разложим только что созданное цветовое пространство:

Функция Partition возвратит кусочки восьми кластеров. У каждого кластера есть точка Center , представляющая собой отдельный цвет в заданном пространстве. Её координаты легко можно преобразовать в шестнадцатеричное RGB-значение:

Помните, что CIE Lab шире RGB, и значит некоторые Lab-значения нельзя преобразовать в RGB. Такие значения можно с помощью Clamped преобразовать в наиболее близкие цвета RGB-пространства.

Полный код

Набор из восьми (не очень) случайных цветов, сгенерированный этим кодом:

Определяем собственное цветовое пространство

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

Ещё одно цветовое пространство — HSV, буквы в названии означают оттенок (hue), насыщенность (saturation) и яркость (value). В этом пространстве пастельные цвета обычно имеют высокие значения яркости и низкие значения насыщенности.

Вот что получилось:

Также вы можете фильтровать цвета по их насыщенности (chroma) и яркости, чтобы получить набор «тёплых» тонов:

20 генераторов паттернов и цветовых схем

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

Бесплатный сервис Subtle Patterns позволяет бесплатно выбрать для своего проекта множество качественных паттернов, созданных профессиональными дизайнеры. Коллекция, представленная на сайте toptal.com является одной из самых больших в сети, на данный момент в ней более 400 узоров и список постоянно пополняется. Некоторые из фоновых изображений можно скачать не только в графическом формате, но и создать фон с помощью CSS.

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

Инструмент Pattern Cooler предназначен для создания бесшовных фоновых изображений. Возможности данного веб-сервиса очень велики, с его помощью можно создать тысячи уникальных фонов. Каждое изображение можно редактировать, менять цвет и характер узоров, добиваясь идеального сочетания фона и других элементов дизайна. С помощью Pattern Cooler можно быстро создать красивый фон для Twitter, Tumblr или блога на WordPress. Бесшовные паттерны небольшого размера можно скачать бесплатно, если же требуются большие фоны для использования в коммерческих проектах, придется оплатить подписку.

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

Название инструмента Noise Texture Generator ясно говорит, что это сервис для создания фоновых изображений с элементами графического шума. Инструмент очень простой – пользователю нужно выбрать цвет фона и с помощью ползунков выставить нужные параметры шума. Если качество картинки устраивает, полученное изображение можно скачать на свой компьютер. Создатели сервиса не рекомендуют использовать его для генерации больших фоновых изображений, так как может измениться рисунок текстуры.

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

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

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

С помощью сервиса Trianglify Generator можно очень быстро и без особых усилий создавать очень красивые фоновые текстуры на основе треугольников. Пользователю достаточно подобрать нужную цветовую гамму, настроить уровень градиента и отрегулировать размер треугольников. После чего сервис тут же сгенерирует текстуру, которую можно скачать в растровом формате PNG или в векторном SVG.

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

Генераторы цветовых схем

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

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

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

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

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

Несложный в использовании инструмент Pictacuolous позволяет создать цветовую схему на основе загруженного изображения. От других подобных сервисов данный инструмент отличается тем, что позволяет загружать цветовую палитру как файл Adobe Swatch, который затем можно использовать в графических редакторах Photoshop и Illustrator.

На сайте Flat Colors Palette можно найти огромное количество цветовых схем, которые идеально подойдут для проектов, созданных в стиле Flat. Всего представлено свыше 2000 готовых цветовых палитр, которые можно скачать в формате Adobe.ACO. Очень удобный сайт для быстрого поиска гармоничной цветовой схемы.

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

Генератор цветовых схем Big Huge Labs автоматически создает цветовые схемы на основе загруженных фотографий. Для удобства пользователей в данном инструменте реализована возможность импорта понравившихся изображений из Facebook, Instagram, Flickr и Dropbox. Очень удобный сервис для быстрого создания красивых цветовых палитр.

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

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

Обновлено 30 июля, 2020

1. Logaster
2. /
3. Blog
4. /
5. How To

Содержание:

Фирменный цвет поможет повысить узнаваемость бренда на 80%, выделить вас среди конкурентов и завоевать доверие покупателей. Как подобрать цветовую гамму, если у вас нет опыта в дизайне? Использовать онлайн-генераторы, которые профессионально сочетают оттенки. Составили список лучших сервисов — сайтов и мобильных приложений.

1. Coolors

Палитру можно создать за считанные секунды. Просто выберите любой цвет — и автоматически получите идеальную комбинацию. Отрегулируйте оттенки по температуре, насыщенности, яркости и экспортируйте в удобный формат (PNG, PDF, SCSS, SVG). Нужно вдохновение? Используйте раздел с готовыми схемами и сохраняйте их для своих проектов. Для удобства работы загрузите приложения программы для iOS или Android.

2. Colorsafe

Оптимизирует сайт в соответствии с принципами международного руководства по веб-доступности (Web content accessibility guidelines). Укажите цвет фона и шрифта — и инструмент сгенерирует палитру, которая будет комфортна для людей с нарушениями зрения. Отсортируйте полученные варианты и сохраните избранные в библиотеке — в ней есть функция совместной работы над проектами.

3. Color.Hailpixel

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

4. Colorhunt

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

5. Galactic.Ink

Генератор с «умным» цветовым кругом подойдет опытным пользователям. Здесь собраны все профессиональные инструменты для работы с цветом. Выбирайте цветовые схемы (аналоговые, комплиментарные, триады, тетрады и другие), модели (RGB или RYB), светлый или темный фон сайта. Полученную комбинацию можно сразу скачать в Illustrator или Photoshop.

6. Colrd

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

7. Sipapp

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

8. 0to255

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

9. Flatuicolors

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

10. Paletton

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

11. Colr

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

12. Javier.Xyz

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

13. Colourco

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

Выбрали желаемый цвет для вашего бренда?

Создайте соответственный фирменный стиль на Logaster!

Заключение

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

Обновлено 30 июля, 2020

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

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

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

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

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

Пишет про дизайн в Skillbox. Работает директором по маркетинговым коммуникациям, изучает рекламную графику и 3D.

Как выбрать идеальный цвет

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

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

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

Попросите у клиента информацию о рекламных продуктах компании — если повезет, вам выдадут брендбук и вопрос о подборе цвета отпадет.

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

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

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

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

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

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

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

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

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

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

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

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

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

Литература

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

Иоханнес Иттен.
«Искусство цвета»

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

«Искусство цвета» поможет узнать больше о теории цвета и гармонии оттенков.

Что такое цветовой генератор

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

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

Сайты-цветогенераторы

1. Design Seeds

Хозяйка этого прекрасного сайта Jessica, собирает гармоничные цветовые сочетания, иллюстрированные фотографией с этими цветами.

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

Сайт Design Seeds имеет удобный поиск по цветовым оттенкам и по сюжетам.

Зима, весна, минералы, суккуленты, флора и фауна..

Вот так выглядит страничка поиска, всё интуитивно понятно.

2. DeGraeve

Хороший Генератор, позволяющий составить цветовую палитру любой фотографии из Интернет. Для этого достаточно вставить url адрес фото и нажать кнопку “Color-Palette-ify!”

Генератор составляет две цветовых шкалы – основные натуральные цвета фото и их более насыщенные аналоги.

Минус данного генератора, что не всякий пользователь знает, как найти адрес url…

3.ColorHunter

На этом сайте можно загрузить свое фото и так же получить основные его цвета в двух шкалах:

Минус здесь в том, что не видно исходного фото.

4.Palette Generator

Жмем на кнопку “Select Image” и выбираем фото на своем компьютере. Загружаем и получаем вот такую схему, где можно выбрать количество оттенков. Максимальное их количество – 8.

Уже удобней, правда? И цвета более натуральные и гармоничные.

5.Big Huge Labs

Выбираем файл на компьютере и жмем “Create palette”.

Получаем вот такую схему с пятнадцатью оттенками:

Хорошая игрушка, не правда ли?

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

Но являются ли данные цвета гармоничными?

Как подобрать гармоничные цветовые сочетания?

На эти вопросы дадут ответ другие генераторы цвета.

Они подбирают цвета по цветовым схемам.

6.Paletton

Мышкой выберите цвет на цветовом колесе. Справа вы увидите схему монохромной гармонии.

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

Чтобы получить результат в виде шкалы, нажмите на кнопку color tables внизу справа.

7.SessionsCollege

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

Выбираем цвет на цветовом круге.

Выбираем количество цветов для сочетания и схему.

Данные генераторы сделаны для создателей сайтов и блогов.

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

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

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

Post Tags:

23 комментария

Светлана

Марина, благодарю! Вы всегда открываете для нас что-то новое! Я проходила ваш курс два года назад. Это действительно изменило мои отношения с цветом и красками. Ушла растерянность, как подобрать тот или иной цвет. Я стала чувствовать цвет, понимать абстрактную живопись. Да и вообще мир как-то иначе зазвучал, наполнился цветом!
И вот новый подарок от вас! Такие красивые подборки у Джессики! Ручки чешутся взяться за кисть. Спасибо!

admin

Светлана, беритесь за кисть и успехов!

Галина

Здравствуйте, Марина! Вы волшебница! Второй день сижу рисую портрет дочери и понимаю, что фоном не должны служить те обои…Что-то с ними надо делать. И тут… ваша статья с гармонией цвета. Ну огромное спасибо. Надеюсь, всё у меня получится! А цветоведение в акварели я закажу, ведь каждый раз мучаюсь с подбиранием цвета))

admin

Галина, ничто не случайно! 🙂 А цветоведения в акварели – это дополнительный семинар, он не учит смешивать цвета в той мере, в которой сам курс. Он лишь показывает особенности.

Генераторы палитр в помощь веб-дизайнеру

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

Недавно вы могли встретить детальную статью про серсивы подбора цветов сайта. А чуть ранее я публиковал похожую заметку о инструментах для выбора сочетания цветов с обзором 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. Их тоже вполне можно использовать в качестве цветового решения для разрабатываемого сайта. Доступна пересылка результата себе на почту, и шеринг в социальных сетях.

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