Цветовой круг генератор цветовых палитр adobe color

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

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

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

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

Пишет про дизайн в 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. ADOBE KULER

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

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

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

2. COLORSCHEME

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

Вот несколько примеров с синим цветом:

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

3. COLRD

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

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

4. PICTACULOUS

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

Pictaculous очень удобная, простая в использовании программа.

Вы можете сохранить полученную цветовую схему на диске, можете отправить по e-mail.

Удачи всем! творите и наслаждайтесь жизнью во всем ее цвете!

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, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.

Палитра цветов для сайта — подбираем в сервисе Adobe Color

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

Зачем нужна палитра цветов?

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

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

Кроме того, повлиять на поведенческие факторы могут и кислотные цвета. Которые просто не дадут сосредоточиться на контенте. Да, они привлекут внимание несомненно. Но можно ли читать и вникать в текст, когда кругом кричащие цвета? А если человек итак провёл весь день за компьютером, а затем попал на такой сайт в конце трудового дня?

Палитра цветов для сайта Adobe Color

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

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

Палитра цветов — инструкция по работе в Adobe Color

Теперь разберёмся, как работать с палитрой цветов в программе. Заходим в сервис Adobe Color и регистрируемся. Можно обойтись и без этого, но тогда вы не сможете сохранять палитры в библиотеке. Впрочем, чтобы сэкономить время, можно авторизоваться через Facebook. Итак, пройдёмся по разделам и вкладкам Adobe Color.

Раздел «Создать»:

Цветовой круг

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

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

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

Листаем чуть ниже. Обратите внимание, что слева можно развернуть вкладку и выбрать цветовой режим из RGB, CMYK, HSV и LAB. В зависимости от этого будут меняться бегунки, но цвет остаётся тем же. Передвигая их в среднем столбце, будет меняться цвет посередине. И подходящие к нему тона в левых и правых блоках.

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

• Последовательная
• Монохромная
• Треугольная
• Комплементарная
• Сплит-комплементарная цветовая схема
• Двойная сплит-комплементарная
• Квадратная
• Составная
• Оттеночная
• Произвольная (для ваших изменений)

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

Извлечение темы

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

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

Извлечение градиента

Новинка в Adobe Color — извлечение градиента. Загрузка картинки происходит аналогичным образом. А слева обратите внимание на выбор количества точек градиента. Данная функция удобна тем, что при наведении курсора на цветовой блок, можно скопировать его номер. А затем в разделе «Цветовой круг» вставить его в основной столбец и поиграть цветами.

Цветовая игра

В последней вкладке данного раздела разработчики сервиса Adobe Color разместили игру. Так что, если совсем нечем заняться, можно поиграть и потренировать память.

Раздел «Смотреть»

Если вас ещё не посетили идеи по поводу цветового оформления сайта, зайдите в раздел «Смотреть». Изучайте все источники или разверните вкладку справа. И откройте Цветовые темы, Творческие проекты или Фотографии Stock, чтобы смотреть готовые решения. Наслаждайтесь и вдохновляйтесь красивыми видами, пока не определитесь.

Тенденции

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

Моя библиотека

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

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

Также можно опубликовать в Adobe Color. Продолжить редактировать в цветовом круге. Или удалить. Ну а чтобы применить какой-либо цвет из палитры на сайте, просто копируйте, нажав на блок. А затем вставляйте в нужное место в файле CSS.

Дополнение

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

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

Будет зависеть и от целевой аудитории. Например, если это детский портал с развлекательным контентом, то цвета можно подобрать «весёлые». А если посетителями являются взрослые и деловые люди, то подойдёт более сдержанная палитра цветов.

Если возникнут сомнения, спросите мнение независимых экспертов. Коими могут являться ваши родственники, друзья или коллеги по работе. Копируйте, делитесь, экспериментируйте. И всё обязательно получится!

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

В помощь веб-дизайнеру: 14 лучших инструментов для работы с цветом

Редактор «Историй» RB.RU

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

1. HueSnap

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

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

2. Khroma

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

3. Сoolors.co

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

Coolors доступен для настольных ПК, iOS устройств. Более того этот инструмент можно добавить в качестве расширения для приложений Adobe (PhotoShop, Illustrator, InDesign) и даже в браузер Google Chrome.

4. Adobe Color CC

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

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

5. Colordot

Colordot от Hailpixel — это бесплатный онлайн-инструмент для создания цветовой палитры.

Управление осуществляется с помощью кликов:

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

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

6. Eggradients

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

7. 147 Colors

Для создания удобного и читабельного CSS кода иногда лучше использовать стандартные цвета и их названия. Инструмент 147 Colors в одном месте собрал все цвета CSS, чтобы вы могли выбрать подходящий. Он содержит 17 стандартных и 130 дополнительных названий оттенков. Вы также можете отфильтровать результаты по оттенкам или выбрать с помощью цветового колеса.

8. Генератор палитры цветов Canva

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

9. Material Design Palette

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

10. ColourCode

ColourCode чем-то похож на Colordot, но содержит больше полезных рекомендаций. Кроме этого, он также позволяет выбирать различные категории палитры (аналоги, триада, монохромный и т. д.).

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

11. Color Calculator

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

12. HTML Color Code

HTML Color Codes — это обширный набор бесплатных инструментов, которые включают множество палитр с комментариями, цветовые диаграммы, схемы Google Material Design, классические палитры безопасных оттенков и список стандартных названий цветов и кодов HTML.

На сайте также можно найти учебные пособия и другие ресурсы для веб-дизайнеров. Результат можно экспортировать в виде HEX, HTML, CSS и SCSS кода.

13. W3Schools: Colors Tutorial

Если вы ищете универсальное решение, включающее руководство по цветам и различные инструменты, тогда W3Schools: Colors Tutorial — идеальный выбор. С его помощью вы не только узнаете больше о теории цвета, цветовых кругах и оттенках, но и сможете использовать различные инструменты, например, Color Converter. Он позволяет преобразовывать любые оттенки в HEX, RGB, HSL, HWB и CMYK код.

14. Цифровой колориметр (Mac)

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

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

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

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

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