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

Скриншот: Creativebloq

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

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

Скриншот: Creativebloq

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

Скриншот: Creativebloq

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

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

Скриншот: Creativebloq

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

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

Скриншот: Creativebloq

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

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

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

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

Скриншот: Creativebloq

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

Скриншот: Creativebloq

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

Скриншот: Creativebloq

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

Скриншот: Creativebloq

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

Скриншот: Creativebloq

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

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

Скриншот: Creativebloq

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

Скриншот: Creativebloq

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

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

Скриншот: Creativebloq

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

Скриншот: Creativebloq

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

Источник.

Фото на обложке: Unsplash

теория цвета для дизайна и иллюстрации

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

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

Пример использования дизайнером небольшой цветовой палитры для создания мудбордов от дизайнера Natalia Kononkova. Источник

Кому и зачем нужна цветовая палитра

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

И.К. Айвазовский. Девятый вал. 1850 г. Источник

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

Использование ограниченной палитры в брендинге, автор Lemontoli. Источник

Сколько цветов должно быть в палитре

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

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

Исследование N. Faisal 2016. Специалисты NNGroup изучили влияние атрибутов веб-дизайна на лояльность пользователей и построение у них доверия к высокой неопределенности. В ходе эксперимента было изучено 112 различных сайтов, которые пользовались особой популярностью среди пользователей в 2000–2015 годах. Выяснилось, что половина всего объема сайтов имели однотонную цветовую палитру, а в качестве цветового решения для второй половины были выбраны всего два акцентных цвета. Аналитики пришли к выводу о том, что такие дизайнерские решения позволили создать единство в восприятии большинства пользователей, а также дали возможность людям не отвлекаться на яркие элементы, а оставаться сосредоточенными на контенте.

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

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

Пример минималистичной палитры от компании Lamoda. Источник

Как использовать цветовую палитру на сайте

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

Небольшая цветовая палитра. Источник

Как подобрать палитру

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

Вот некоторые из таких сервисов. 

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

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

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

Пример сгенерированных палитр в Colllor для голубого цвета. Источник

Найти другие сервисы в интернете можно по запросам «цветовой круг онлайн», «подбор цветов онлайн» и подобным.

ИСКРА —
неделя знакомства
с дизайн-профессиями

бесплатно

ИСКРА —
неделя знакомства
с дизайн-профессиями

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

разжечь искру

51 лучший цветной сайт для дизайнеров — обновлено! – Журнал PRINT

Автор: Джуд Стюарт | 5 июля 2019 г.

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

Цветовая палитра Вдохновение и генераторы цветовых схем

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

Более 300 000 дизайнеров и любителей цвета постоянно делятся цветовыми палитрами на этом сайте, так что всегда есть свежее вдохновение. Добавьте этот сайт в закладки как один из лучших цветных сайтов или загрузите бесплатное приложение Adobe AIR, COLOURLovers Desktop Color Finder. И пока вы этим занимаетесь, блог COLOURLovers сообщает о цветовых тенденциях и причудливых цветовых находках с соответствующими палитрами для каждого сообщения.

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

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

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

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

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

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

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

Colormunki позволяет создавать цветовые схемы из образцов Pantone.

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

ColorBlender: введите цвет, получите автоматически созданный онлайн-инструмент смешивания для сопоставления цветов и дизайна палитры с параметрами экспорта основа.

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

Также стоит упомянуть: Contrast A, SlayerOffice Color Palette, ColorToy 2.0< /span> (единственный Flash-инструмент в этом списке), сверхпростой Infohound, Visibone (такой же простой, плюс доступный на дюжине языков) и SitePro Выбор центральной цветовой схемы.

Извлечение цветовой палитры из URL-адреса или изображения

Tin Eye Labs – Извлечение цвета: загрузите изображение, вставьте URL-адрес изображения или используйте перетаскивание для извлечения цветов из изображения. Движок отобразит цветовую палитру для всех цветов, определенных в вашем изображении. Извлечение цвета работает для файлов JPEG, PNG и GIF.

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

Дважды проверьте цветовую палитру любого изображения с помощью этого генератора цветовой палитры от DeGraeve.com.

Лучшие цветовые сайты для имитации (и исправления) ваших дизайнов для слабого зрения

Один из 15 человек в той или иной степени дальтоник. Эти инструменты имитируют внешний вид вашего сайта для людей с нарушениями цветового зрения.

Цветное зрение | Колблиндер | Симулятор дальтонизма | Цветовой круг специальных возможностей | Checkmycolors.com

Отточите свои навыки в области теории цвета

Теория цвета от Paper Leaf: Вот ваша одностраничная шпаргалка по концепциям теории цвета. (Вы также можете скачать его!)

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

Мгновенное определение цветов с помощью плагинов для браузера

Pixie
ColorZilla: улучшите свой браузер Firefox для задач с цветом с помощью этого плагина.
ColorMod: этот бесплатный виджет избавляет вас от необходимости запускать Creative Suite каждый раз, когда вы хотите получить сочный цвет, который вы видите.

Найдите потрясающие фоновые узоры

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

BG Patterns | ДинШаблон | Ava7Patterns | Шаблоны EveryDayIcons | Patterrific

Играйте с цветом подробнее

Tin Eye: этот сайт извлек цвета из 20 миллионов изображений Creative Commons на Flickr, чтобы сделать изображения доступными для поиска по цвету.

Color-Hex: Этот сайт содержит шестнадцатеричные коды для каждого из перечисленных цветов.

SpyColor: бесплатный сервис, который предоставляет информацию о любом цвете, включая преобразование во многие цветовые модели (RGB, CMYK, HSL, HSV, XYZ, xyY, CIELAB, CIELUV, CIELCH, Hunter Lab и YIQ). Схемы (гармонии), такие как дополнительные, расщепленно-дополнительные, триадные, четырехцветные, пятицветные, конфликтные, аналогичные и монохроматические цвета, можно найти на каждой цветовой странице.

RGB Задача: в этой игре попытайтесь угадать правильный цвет для приведенного выше кода RGB. Соберите как можно больше правильных цветов подряд и обыграйте своих друзей!

Цвет (игра): С помощью цвета вы проверяете точность своего восприятия цвета, изучая ключевые концепции теории цвета и дизайна.

Color Run: Простая игра про цвета. Просто нажмите на более светлый цвет.

HEX Захватчики: Слушайте! Инопланетяне вторгаются! Вы должны защитить планету, сопоставив шестнадцатеричный код цвета с соответствующим существом.

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

Shutterstock Spectrum: Поиск в базе данных изображений Shutterstock по цвету.

Playdots: цель проста; поднимайтесь в таблице лидеров, соединяя точки одного цвета по вертикали и горизонтали.

Online Color Challenge: Насколько хорошо вы видите цвета? ФАКТ: 1 из 255 женщин и 1 из 12 мужчин имеют ту или иную форму дефицита цветового зрения. Примите участие в онлайн-тестировании цвета, основанном на тесте Farnsworth Munsell 100 Hue Test.

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

Назовите этот цвет: Хотите узнать название определенного оттенка? Найдите его здесь.

Онлайн-цветовой тезаурус HP IdeaLab: в рамках этого совместного проекта ученые-цветовщики Hewlett-Packard тщательно изучают названия цветов.

WolframAlpha: Этот «вычислительный механизм знаний» включает в себя цветовую категорию, объединяющую имена цветов с шестнадцатеричными, RGB, CMYK и другими значениями, температурами и даже длинами волн света. Любители цвета, радуйтесь.

Неясные цветовые термины Phronistry: Наконец-то вы можете узнать, как выглядит «smargadine» или «luteolous». Как щепетилен!

И последнее, но не менее важное: большое спасибо SpyreStudios, DesignReviver и MogDesign за их превосходные списки цветовых ресурсов.

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

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

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

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

10 лучших инструментов для разработки цветовой палитры

Coolors

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

Палеттон

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

Adobe Color

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

Muzli’s Colors

Muzli’s Colors — генератор цветовой палитры. Вы можете создавать и редактировать палитры, просматривать палитры и подбирать цвета. Вы даже можете скачать наборы пользовательского интерфейса для палитр. Или просто загрузите изображение и позвольте Muzli показать вам цвета уже внутри.

Color Designer

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

Canva

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

Colorcode

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

Color Inspire

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

Pigment от Shape Factory

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

Художественный эксперимент Google

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

Дополнительные инструменты для создания цветовых палитр

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

Colorable

Используйте Colorable в качестве генератора случайных цветовых пар и инструмента оценки контрастности.

Blend

Blend позволяет создавать, смешивать и предварительно просматривать градиенты из разных цветов.