10 лучших генераторов цветовой палитры Material Design


Оглавление (нажмите, чтобы открыть):

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

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

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

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

Пишет про дизайн в 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 — очень необычный сервис, который наверняка оценят творческие натуры. В отличие от всех рассмотренных нами инструментов, этот предлагает создавать палитру не на основе цветов, а на основе места или явления. Просто вбейте в строку поиска какое-нибудь слово и увидите, что получится.

Google создала инструмент, облегчающий подбор цветов для приложений

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

Цель и особенности данного инструмента

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

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

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

Дисклеймер: в данной статье будут использоваться следующие термины и их переводы:

color palette — «цветовая палитра»; color theme — «цветовая тема»; практически то же, что и color ramp — «схема цветовых переходов», «схема переходов» и иногда просто «схема».

Если вам покажется, что перевод можно улучшить — пишите на hello@deadsign.ru, поговорим.

Mineral UI э то open source дизайн-система, которая создается компанией CA Technologies и будет использоваться во всех наших продуктах. Цвет — это центральный строительный блок любой дизайн-системы; кроме того, именно цвет оказался одной из самых сложных проблем в дизайне, с которыми мы когда-либо сталкивались, в особенности из-за большого количества требований к себе:

У Mineral есть встроенные по умолчанию функции обеспечения доступности — вся наша работа с цветом должна осуществляться согласно требованиям WCAG 2.1 по контрасту уровня соответствии АА .

Mineral предназначена для последовательного моделирования , и схемы цветовых переходов (color ramps) в ней можно заменять в любое время. Значения в схеме перехода (но не значения отдельных цветов) применяются к каждому элементу интерфейса. Например, цвет синий-60 должен восприниматься таким же по контрастности как красный-60 или бирюзовый-60.

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

Цвет используется, чтобы показать статус. Множество продуктов компании CA Technologies используется чтобы описать и/или сообщить о различных статусах — ошибках, развитии истории, доступности маршрутизатора и т.д. Цвет — это важный инструмент для моментальной передачи значения, поэтому у нас есть несколько вариантов UI-компонентов, которые служат основополагающими концепциями в нашей системе. Эти цветные элементы интерфейса должны гармонично сочетаться со всеми нашими цветовыми схемами.

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

Новые схемы цветовых переходов (color ramps), описанные в этой статье, используются на сайте mineral-ui.com . Если вам хочется попробовать их у себя — взгляните на наши дизайн ассеты .

Mineral UI это open source дизайн-система, построенная на библиотеке React, и созданная для разработки привлекательных продуктов. Это апогей совместной работы дизайнеров и разработчиков, который предоставляет командам возможность быстрее реализовывать высококачественные продукты.

Ретроспективный обзор

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

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

Взято из Plasma Design System. Основные элементы, такие как цвет, сложно поменять позже.


Анализируя цветовые схемы во время ревизии , мы определили, что наша цветовая палитра должна содержать следующие характеристики:

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

Тематическая гармония : в каждой цветовой теме должно быть одно значение тона.

Четкие контрольные точки цвета (hue breakpoints) : у нас многие продукты продаются модулями или наборами, поэтому цвета должны быть настолько похожи, чтобы восприниматься как цветовая «семья», но в то же время достаточно ясно давать понять юзеру, что есть разные модули в рамках одной семьи.

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

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

Доступность : наша цель — чувствовать уверенность в том, что каждый получает положительный опыт, используя наш продукт. Mineral поддерживает средний уровень цветового контраста (АА). Визуальное представление текста должно осуществляться с коэффициентом контрастности 4,5:1 в каждом из компонентов пользовательского интерфейса.

Исследование

Мы провели глубокий анализ других тематических цветовых палитр, использующих схемы цветовых переходов — исследовали палитры IBM Design, Material Design и Open-Color. (Заметка: Если вам интересно изучение других дизайн-систем, можно начать с Adele от UXPin). Цель исследования заключалась не в том, чтобы скопипастить их идеи, а скорее в том, чтобы «заглянуть за кулисы» и понять, каким образом принимаются решения по выбору того или иного цвета.

В процессе исследования мы фокусировались на следующем:

Тон (Hue) : Используется ли в каждой цветовой палитре одно значение тона? Или же значение тона меняется в пределах одной схемы цветовых переходов?

Паттерн : подчиняется ли выбор значений какому-либо правилу? Если такое правило существует, применимо ли оно для других палитр?

Насыщенность и яркость (светлота): Как работают насыщенность и яркость, когда каждое значение уменьшается или увеличивается в пределах схемы цветовых переходов?

RGB, HSB, HSL, или HEX?

Работа с моделями цветового пространства — это сложная тема, заслуживающая отдельной статьи. Но вкратце, вот, что важно: в этих примерах я работаю с моделью HSB (Hue, Saturation, Brightness — тон, насыщенность, яркость), потому что этот подборщик цветов — один из самых удобных для пользователя, он идеально подходит для изучения и настройки цвета . Тем не менее, HSB (360 × 100 × 100 = 3 600 000 цветов) может выразить только около 21,5% цветового пространства модели RGB (256 × 256 × 256 = 16 777 216 цветов).

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

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

IBM Design

Цветовая палитра IBM использует весь спектр насыщенности и яркости, но было сложно определить единое правило, которому бы подчинялись разные схемы цветовых переходов. Возьмем Зеленый (см. ниже) — у IBM широко сдвигается значение тона между 78 и 120, — может быть сложно последовательно воспроизвести и управлять такими значениями при работе с другими цветами. В IBM явно ценят доступность, потому что коэффициент контрастности они раз за разом ставят на 4,5:1 или выше, когда значение равно 50 или выше.

Material Design

Значения в Material Design быстро изменяют свое направление на графике, когда значение достигает 500. У некоторых цветов могут быть проблемы с доступностью, потому что некоторые базовые цвета оказываются ярче, чем цвета на других позициях в палитре. Конечно, проблема может быть решена путем изменения цвета текста при переключении тем (например, использовать черный цвет текста вместо белого), но наша цель — найти решение, с которым всегда будет хорошо работать один определённый цвет текста.

Мастер Йода рекомендует:  Викторина угадайте известного программиста по фотографии. Часть вторая

Open Color

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

Анализ

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

В Material design большой выбор цветовых схем, но в целом в палитре прослеживается непоследовательность .

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

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

Дизайн цветовой палитры

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

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

Как определить смену в теме за три простых шага

  1. Базовый цвет: базовый цвет — доминирующий цвет в темах; это тот цвет, который будет использоваться в основном в элементах интерфейса. Тема-60 всегда является базовым цветом для светлых шаблонов (белый текст на цвете темы), а тема-50 — базовым цветом для темных шаблонов тем (черный текст на цвете темы). Коэффициент контрастности этих двух цветов всегда 4,5:1 или выше.
  2. Цвета рядом с базовыми: эти цвета будут использованы в ховерах, активных и фокусных состояниях базового цвета в элементах действия, таких как кнопки, ссылки и элементы форм.
  3. Начальные и конечные цвета: эти цвета чаще всего используются как акцентные фоновые цвета, либо для добавления визуальной массы элементу интерфейса, как в светлых, так и в тёмных темах. Например, тема-10 (светлая) или тема-100 (темная) могут использоваться в качестве фона для выбранных элементов в выпадающем меню или в строке таблицы.

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

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

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

В то же время мы выбрали конечные точки схемы переходов — цвета со светлыми (тема-10) и темными (тема-100) значениями. Светлые цвета имеют яркость от 90 до 100, а темные цвета — от 20 до 30. Палитры цветов темы-10 значительно менее насыщены, чем цвета темы-100.

После определения этих ключевых значений (10, 60, 100), основные цвета каждой темы стали очевидными.

Примечание: сравните цвета первой версии с цветами второй.

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

Лимонный цвет исчез, потому что в команде решили убрать код, который менял цвет текста в зависимости от контраста (для упрощения). Если бы мы настраивали контрастность лимонный цвет на 4,5:1 с белым текстом, этот цвет уже не был бы похож на цвет лимона (скорее на цвет гусиной какашки).

С желтым одинаково сложно сделать контрастную цветовую тему. Если коэффициент контраста желтого цвета больше, чем 4,5:1, он будет выглядеть как тот бронзовый цвет, что у нас уже есть.


Нам написали о том, что оранжевый, используемый для статуса «Предупреждение» в нашей теме, легко путали со статусом «Опасность» (Красный). Бронза появилась на свет как компромиссный способ обеспечить некоторое визуальное расстояние от вариантов «Предупреждение» и «Опасность».

Возвращаясь к методу первой версии:

Теперь пришло время нарисовать кривую цвета и распределить оставшиеся образцы по схеме. Цель — сделать гладкое изогнутое распределение. Каждый паттерн кривой будет немного отличаться, в зависимости от локации ключевого цвета (10, 60, 100).

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

Вот несколько примеров из палитры первой версии:

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

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

  1. Темы Teal (бирюзовая), Slate (синевато-серая) и Dusk (сумеречная), у которых относительно низкая насыщенность, визуально отличаются от тем с высокой насыщенностью. Когда эти темы размещали на серой схеме, лежащей в основе системы, они выглядели странно.
  2. Мы преобразовали цветовую палитру в оттенки серого — и оказалось, что нет равного прироста у каждого значения в темах, поэтому перемена мест по признаку «значение-значение» в рамках одной темы (например, синего-10 и зеленого-10) в некоторых случаях создавала сомнительные результаты в плане визуальной составляющей и контраста.

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

Aaron Sagray (@asagray) обнаружил эту проблему во время проверки значений серого.

После того, как мы обнаружили эти трудности, у нас появилось основание для новой гипотезы: можем ли мы создать систему, которая поддерживает равномерные контрастные переходы между соседствующими (от тема-10 до темы-20 и т. д.) цветами на каждой схеме переходов?

Давайте выкопаем материалы предыдущих исследований из других дизайн-систем и посмотрим, решили ли они эту проблему:

У Material Design и Open Color в разных темах значения серого тона не одинаковы для каждого уровня выборки в схеме цветовых переходов. У IBM получше, с последовательной на вид паттерном в серой палитре (но и тут не идеально в плане значений, зеленый, например, кажется ярче остальных)

Чтобы изучить значения серого, я воспользовался приложением Sketch, в котором можно манипулировать цветами, и Фотошопом с его проверенными значениями преобразования в HSB.

После проведения этого обзора мы в обсудили команде ценность последовательности:

Каковы преимущества наличия последовательных значений серого?

Возможно ли создать систему с точно такими же значениями серого, как у отдельно взятого цвета, во всех темах?

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

Вторая версия: Обновление цветовой палитры

Когда мы решили исправить проблему последовательности значений контрастности, мы также решили проработать просьбу, единую почти для всех наших бизнес-единиц: темная тема, которая обычно используется для HUDs (Heads Up Displays) в Operations Centers и других средах мониторинга. В первом варианте цветовой палитры использовались сверхнасыщенные цвета на темном конце схемы перехода. Когда мы разместили эти цвета на черном фоне, они выглядели неуместно .

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

1. Создать серый паттерн

Как показано на этой диаграмме, «простым» решением может быть увеличение значений с использованием равномерного интервала между каждым значением. Я задал яркость 95% для темы-10 и 15% для темы-100. Для каждого шага мы уменьшали яркость на 9% по мере увеличения значений темы.

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

Рассмотрим тему-60: значение яркости составляет 50%, что не соответствует среднему уровню (AA), так как соотношение контрастности составляет 3,95:1. Этот результат заставил нас попробовать более проработанный паттерн «горная вершина»:

Мы поставили яркость темы-10 на 95%, яркость темы-60 на 45% и яркость темы-100 на 15%. Затем мы пробовали разные последовательности непоследовательных увеличений значений, которые вместе на графике выглядели как «рост, пик и падение» и обнаружили, что если значения повышались одинаково, более низкие или более высокие значения значительно отличались от таковых в середине.

2. Создание цветового паттерна

У нас есть серая схема переходов, которая работает со всеми темами — теперь можно обратить внимание на тон и насыщенность.

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

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

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

Мой монитор довольно-таки большой и широкий 😉

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

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

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

Конвертируем в оттенки серого

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

Заключение

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

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

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

Особая благодарность:


Быстрые и простые решения для цвета

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

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

Лучшие примеры дизайна сайтов с минималистичными цветовыми палитрами

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

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

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

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

Дизайнер использует оттенки синего и кофейного, благодаря чему сайт выглядит стильно и мягко. А сочетания псевдо объемного фона (жидкость) с многочисленными круговыми элементами придает сайту элегантности.

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

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

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

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

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

Просто и со вкусом: размытый фон в спокойных коричневых тонах дополнен печатной и рукописной типографикой.

Необычное сочетание зеленого и приглушенного оранжевого выглядит на удивление гармонично.

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

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

Цветовая гамма основана на цветах логотипа: сочетание светло серого с лазурно-голубым создает впечатление легкости и полета.

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

Этот сайт поддерживает идею минимализма и в макете и в дизайне. Белый текст хорошо выделяется на богатом фиолетовом фоне.

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

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

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

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

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

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

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

Пример того, как всего 2 цвета могут выглядеть по-настоящему ярко и красиво.

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

16 советов по разработке палитры интерфейса

Основатель агентства EightShapes Натан Кертис в своем блоге на Medium собрал советы дизайнерам по разработке основной и дополнительной палитры дизайн-системы.

Команда Sketchapp подготовила перевод заметки Кертиса.

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

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

Мастер Йода рекомендует:  Как правильно установить шаблон на DLE

Основная палитра

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

1. Быстро стабилизируйте цвета бренда

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

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

2. Следуйте бренду (если вы меняете цвета)

Синий брендовый оттенок немного унылый? Не можете сопротивляться желанию его оживить? Сотрудничество с клиентом на ранних этапах сильно омрачается заявлениями вроде: «Мы сделали брендовый оранжевый для веба немножко насыщеннее». Реакция клиента: «Вы сделали что? Какое святотатство!».

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


3. Опускайте нейтральные оттенки

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

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

4. Используйте «цифровой синий». Все так делают.

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

Вывод: Когда (не «если») вы используете «цифровой синий», выбирайте комфортный оттенок и старайтесь, чтобы он не конфликтовал с синим цветом бренда — или с красным, оранжевым, зеленым и так далее.

Оттенки цветов

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

5. Задайте диапазон оттенков и теней для каждого цвета

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

Вывод. Оформляйте оттенки цветов в стеки и компактно визуализируйте важные детали по цветам.

Оттенки индиго и насыщенного оранжевого в Material Design

6. Называйте оттенки и тени по яркости

Все мы с этим сталкивались. Месяц в системе, нейтральные цвета вроде $color-gray-1, $color-gray-2, …, $color-gray-7 стабильны. Затем вам понадобилось добавить еще один оттенок, который по насыщенности где-то между $color-gray-1 и $color-gray-2. И тут весь нейминг поплыл.

Вывод. Присваивайте оттенкам идентификаторы на основе яркости — от 0 до 100, например, $color-gray-05 и $color-gray-92. Диапазон отображает переход от темного к светлому, позволяет вставлять больше оттенков между основными, к тому же сразу легко распознать каждый цвет по названию.

7. Ограничивайте количество оттенков и теней

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

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

8. Определите метод трансформации: выбор вручную или функционально

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

Но трансформации могут вызывать проблемы: тщательно отобранные базовые цвета станут недоступной альтернативой (смотрите ниже), общая палитра страницы помутнеет или же «системный 5%», который работает на средне-ярких цветах, даст практически невидимый контраст на светлом или темном цвете.

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

Дополнительные палитры

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

9. Сформируйте наборы цветов по смыслу, например, Feedback Colours

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

Вывод. Устанавливайте стандартные цвета фидбеков и другие релевантные наборы оттенков, чтобы все цвета гармонировали между собой.

Типичные цвета фидбека: успех, предупреждение, ошибка и информационный

10. Иллюстрируйте разнообразие тем

В некоторых системах использование цвета настраивается для каждого продукта, раздела или бренда. Часто такие настройки отображают связь с главным брендом (например, Marriott International) с его суббрендами (например, Courtyard Hotels, Ritz Carlton и Moxy Hotels). Либо это заранее предусмотренные темы вроде Ambient Warmth и Frozen Blue. Возможно, пользователь будет настраивать темы полностью самостоятельно — тогда вам нужно просто продемонстрировать всю широту (или узость) его возможностей.

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

Цвета тем для разных отелей Marriott.com, полученные из страниц продуктов

11. Определите, как работает теминг

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

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

12. Не согласовывайте смешивание цветов, пока страсти не улягутся

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

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

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

Контраст и приемлемость

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

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

13. Проверяйте контрасты заранее и тщательно


Часто бывает, что до запуска продукта или дизайн-системы остается несколько недель или дней, и тут кто-то замечает ошибку. Команда не позаботилась должным образом о сочетании основной и дополнительной палитры, чтобы оно соответствовало нормам WCAG 2.0 цветового контраста 3.0 (для крупного типа) или 4.5 (для стандартного типа). Так что дизайнеры, а потому и разработчики, мучаются с фиксами и их реализацией в коде.

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

Tanaguru, один из многих онлайн-калькуляторов сочетаемости

14. Находите приемлемые цвета, выбирая из спектра

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

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

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

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

15.Светлое на темном и темное на светлом

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

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

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

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

16. Используйте цвет для более широкой поддержки сочетаемости

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

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

12 лучших инструментов, чтобы поиграть с цветом

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

Новое. Журнал для digital-дизайнеров. Посмотреть, что за зверь.

1. Color

Подбор цветов для дизайна на основе данных (data driven design).

2. Color — Method of Action

Игра на сопоставление цветов.

3. Color Hunt

Тщательно отобранная коллекция прекрасных цветов, которая обновляется ежедневно.

4. Colorful gradients

Градиенты, автоматически сгенерированные компьютером. По 48 штук в день.

5. BrandColors

Официальные коды цветов крупнейших в мире брендов.

6. Coolors

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

7. Color Hex Color Codes

Color hex — это простой в использовании инструмент, который позволяет получить информацию о кодах цвета, включая цветовые модели (RGB, HSL, HSV и CMYK), css и html коды цветов.

8. Material Palette

Генератор цветовых палитр для материального дизайна (material design)

9. colourcode — найди свою цветовую схему

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

10 . Adobe Color CC

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

11. Sip

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

12. COLOURlovers

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


Столько удивительной информации…

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

Если вам понравилась статья и перевод, дайте нам знать — нажмите кнопку Recommend

А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи как привлечь, удержать и направить внимание пользователя

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

10 лучших генераторов цветовой палитры Material Design

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

Система цветов Material Design может быть использована для создания цветовой темы, которая отражает ваш бренд или стиль.

Цветовая система

Важные термины

«Палитра»

Палитра — это набор цветов, то есть тонов и их оттенков. Материал-UI предоставляет все цвета из руководящих принципов Material Design. This color palette has been designed with colors that work harmoniously with each other.

«Оттенок» и «Тень»

Отдельно взятый цвет в палитре состоит из цветового тона, например «красный», и оттенка, например «500». «red 50» — самый светлый оттенок красного (* розовый! *), а «red 900» самый темный. Кроме того, большинство тонов имеют «акцентные» оттенки с префиксом A .

Примеры

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

Вы можете обратиться к дополнительным первичным и акцентным цветам (таким как «red 500» & «purple A200»), например:

Цветовая палитра

Зная тон HUE (red, pink и т. д.) и оттенок SHADE (500, 600 и т. д.), можно импортировать цвет следующим образом:

Инструменты для работы с цветом

Используйте палитру и слайдеры, расположенные ниже, чтобы опробовать цветовую схему material.io/design/color на документации Material-UI. Либо можете ввести шестнадцатеричные значения в текстовые поля Primary и Secondary.

Primary
Secondary
Color

The output shown in the color sample can be pasted directly into a createMuiTheme() function (to be used with ThemeProvider ):

Only the main shades need be provided (unless you wish to further customize light , dark or contrastText ), as the other colors will be calculated by createMuiTheme() , as described in the Theme customization section.

If you are using the default primary and / or secondary shades then by providing the color object, createMuiTheme() will use the appropriate shades from the material color for main, light and dark.

Официальный инструмент для работы с цветом

The Material Design team has also built an awesome palette configuration tool: material.io/tools/color. This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.

The output can be fed into createMuiTheme() function:

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

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

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

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

Сайт дня: вся палитра материального дизайна Google

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

Для этого в генераторе нужно выбрать первичный и вторичный цвета для приложения. На их основе сайт рассчитает тёмную и светлую версии первичного цвета, цвет текста, иконок, а также подписей и разделителей. Получившуюся палитру можно скачать в форматах CSS, SASS, SVG, XML и PNG. А также получить цветовые коды в RGB.

Кроме того, на MaterialUp есть пакеты принципов построения интерфейса с материальным дизайном и для Android Lollipop, а также набор шаблонов, иконки, фреймворки, шрифты и гайдлайны. Сайт регулярно публикует новые концепты, сайты и официальные приложения, которые используют принципы материального дизайна.

Цвет гугла – The color system — Material Design

Google встроила цветовую палитру прямо в поиск

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

Жаль, конечно, что не все команды Google-поиска доступны в Восточноевропейском регионе. Так, у нас не работает быстрое определение IP-адреса (my ip address) или скорости интернета (speed test). Поэтому вдвойне приятно, что новая фишка — цветовая палитра — всё-таки добралась до нас.

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

Команда срабатывает как в десктопном поиске, так и в мобильном Google Now (голосом в том числе).

Для чего вообще нужна цветовая палитра? Она позволяет в точности определить цвет, минуя субъективное восприятие оттенков каждым конкретным человеком. В палитре цвет описан несколькими значениями согласно координатам соответствующей цветовой модели. Например, для RGB это три цифры, а для CMYK — процент каждой из четырёх красок. Всего Google приводит пять цветовых пространств.

Нельзя сказать, что Google сделала нечто уникальное. Цветовая палитра уже давно реализована в поиске Yandex и DuckDuckGo. Причём «утиный» сервис выглядит более удобным: в нём можно самостоятельно задавать цвет по цифрам.

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

10 лучших генераторов цветовой палитры Material Design

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

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

Этот инструмент позволяет быстро и легко создавать или импортировать наборы цветов для разработки собственной, идеальной темы из полностью настраиваемых палитр. После того, как вы настроите тему, присвойте имена теме и палитре, а затем быстро экспортируйте их в любой front-end фреймворк!

Поддерживается экспорт в JSON и AngularJS, Materialize, CSS, Polymer и некоторые другие среды.

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

Tint ui — это инструмент для выбора цвета из стандартных палитр Material Design, iOS, Flat UI Colors и Windows.

Material UI — включает в себя основные и специальные цвета, которые могут быть использованы для иллюстраций или разработки палитры бренда. Вы начинаете создавать цветовую палитру с основных цветов, а затем дополняете ее оттенками для создания полной палитры. Палитру можно использовать под Android, Web и iOS. Сервис предлагает на выбор 500 цветов в качестве основного цвета приложения, а также дополнительные цвета в качестве специальных.

MaterialColors.com — простой ресурс для тестирования и быстрого копирования цветов Material Design. Этот инструмент отображает только 500 основных и 200 специальных оттенков.

Этот простой инструмент поможет визуализировать все образцы цветов материального дизайна вместе с их официальными названиями (например, Pink, Light Blue и т.д.).

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

Инструмент Material Mixer позволяет подбирать сочетание первичных и вторичных цветов. Основываясь на принципах материального дизайна от Google, программа вычисляет оттенки и тона, а также позволяет выбрать резервные цвета для каждого первичного и вторичного (специального) цвета. Выберите первичный и «А» (специальный) цвета и посмотрите, как они сочетаются друг с другом.

Позвольте инструменту Random Material Generator выбрать для вас цвета Material Design случайным образом.

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

Данная публикация представляет собой перевод статьи «10 Best Material Design Color Palette Generators» , подготовленной дружной командой проекта Интернет-технологии.ру

Цвет в дизайне / ua-hosting.company corporate blog / Habr

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

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

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

Правила соответствия цветов

Взаимодополняющие цвета — расположены друг напротив друга. Например, синий и оранжевый, или красный и зеленый.


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

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

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

Триада образовывается из трех цветов, равномерно удаленных друг от друга. Схема триады создает контраст, где один цвет доминурует, а два других — расставляют акценты.

Две пары используют четыре цвета вместе в форме двух наборов дополнительных цветов.

Полезные веб-сайты

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

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

Веб-сайт с красивыми и доступными цветовыми палитрами, основанными на рекомендациях WCAG Guidelines.

Простая палитра цветов для веб-разработки.

Большая коллекция уже готовых цветных градиентов.

Удобное приложение для того, чтобы «выхватывать» и сохранять цвета, которые отображаются на экране.

Web Colour Data

Делает разбивку любого сайта по цветовой гамме (по номерам и образцам).

Генерирует цветовую палитру дизайна.

Подборка цветовых образцов из Google’s Material Design Guidelines.

Material Design Colors

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

Material Design Palette

Цветовая палитра на 500 диапазонов оттенков для Android, веб и iOS.

Цвет по номерам и расположению на палитре.

Образцы цвета с номерами для программ.

Fifty Shades Of Grey For Web Designers

Оттенки и образцы серого для веб-дизайна.

Fifty Shades Of Grey For Web Designers

Сайт, подбирающий цвет.

Material UI Colors

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

Выхватывает цвета и оттенки из внешней среды — достаточно навести камеру телефона на что-то красочное.

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

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

Цветовая схема для дизайнеров.

Выбор цвета, основанные на hsl. Схема включает разные комбинации цвета.

Color Palette Generator

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

Color Palettes Color Schemes

Он-лайн схема, генерирующая цвет.

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

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

Сайт предоставления информации о любом цвете. Достаточно ввести любые цветовые значения в поле поиска и Color Hex выдаст подробное описание, автоматически преобразовывая в RGB, CMYK, HSL, HSV, CIE-Lab, Хантер-Lab, CIE-Luv, CIE-LCH, XYZ и XYY.

Полезный сайт, предоставляющий целый набор она-лайн инструментов для работы с цветовой палитры.

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

Гугл тестирует цвета звездочек в рейтинге продуктов


Гугл постоянно проводит разные тесты со своей выдачей (и не только). Отсюда рождается и ее редизайн, и исчезновение фото авторов из результатов.

Недавно Гугл тестировал цвета звездочек в рейтинге продуктов. Думаю, это касалось именно e-commerce сайтов, но не рейтингов статей авторов.

Кстати, оказывается, Гугл не только тестирует свои изменения программно, но еще и устраивает опросы. Вот, что мне однажды попалось:

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

А теперь вернемся к нашим звездочкам. Вот, что в выдаче можно увидеть сейчас, а именно – оранжевые звездочки:

А дальше о том, какие цвета тестировались.

Синие звездочки

Мне кажется, они слишком сливаются с тайтлом, и от этого становятся менее заметными.

Серые звездочки

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

Зеленые звездочки

А вот зеленый рейтинг сливается с адресом страниц или с хлебными крошками. Тоже не самый выигрышный вариант.

Красные звездочки

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

Желтые звездочки

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

Какие еще цвета?

Можно пофантазировать на эту тему и предложить сиреневый или фиолетовый, а для женских товаров – розовый

Только представьте, цвет рейтинга меняется в зависимости от категории продукта, и результаты поиска превращаются в раскраски…

Так что мое мнение: в этом плане ничего не нужно менять, оранжевый цвет вполне гармонично смотрится и ни с чем не сливается. Конечно, если нужно обратить внимание на платные результаты поиска, можно и “заглушить” цвет рейтинга бесплатных. Но вот что интересно: если изменится цвет звездочек в бесплатных результатах поиска, будет ли он изменен и в платных? Если рейтинг бесплатных результатов станет, скажем, синим, а платных – желтым или оранжевым, как сейчас – вот это уже печальная картина.

А что думаете вы по этому поводу? Делитесь своими мыслями в комментариях и не забывайте подписываться на обновления! Скоро будет о том, как добавить в сниппеты хлебные крошки!

Об Авторе

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

5 фактов о логотипе Google – bit.ua

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

1. Новый логотип Google похож на логотип Alphabet.

Для нового логотипа компании разработчики выбрали шрифт Sans-serif, который похож на того, который используют в Alphabet. В своем пресс-релизе 10 августа Ларри Пейдж отметил, что Google – это не консервативная компания. И не стремится быть таковой. Кажется, именно это должен продемонстрировать новый забавный логотип.

В своем официальном блоге представители Google заявили, что “за 17 лет компания значительно изменилась. Это касается как ее продуктов, так и ее вида и ощущений. Сегодня мы опять меняемся”. В релизе также сообщают, что такой логотип будет использован на всех страницах и продуктах Google. Кроме того, разноцветная буква G заменит голубую g.

2. Дизайнер логотипа заявила, что хотела создать ощущение, будто он и не менялся.

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

3. Появление нового логотипа продемонстрировали в Google Doodle.

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

4. Дизайн 2015 года больше всего отличается от всех логотипов после отказа от восклицательного знака.

Последние изменения в логотипе произошли в сентябре 2013 года и в мае 2014 года. Но они были не очень заметны для обыкновенных интернет-пользователей.

Эволюция логотипов Google:

1997 год

1998 год. Именно такой логотип использовали основатели Google для своей дипломной работы

30 августа 1998 года. Первое использование Google Doodle

Сентябрь 1998 года. Google переезжает на google.com и о поисковике узнают во всем мире

1999 год

2010 год. Логотип стал ярче

Сентябрь 2013 года

5. Самый первый логотип Google был достаточно странным.

Так выглядел логотип в 1996 году, когда Google еще носил название BackRub.

Добавить комментарий