Как сделать палитру
Обновлено: 05.07.2024
Перевод полезной статьи от Buninux о создании цветовой палитры для веб-сайта или приложения. 8 советов по созданию качественных цветовых схем.
Привет VC, с вами Егор Комаров и сегодня я хочу поделиться интересным материалом и подходом о создании цветовой палитры.
Цвет повсюду. Работа с цветом — это неотъемлемая часть любого дизайн бренда и современный интерфейс стремится к его узнаваемости. Поэтому выбор и использование цветов для достижения бизнес-целей может оказаться тяжелой задачей для любого дизайнера.
Выбор, который делается влияет на внешний вид и на то, как пользователь думает о продукте и бизнесе. Практические советы по созданию качественной качественной цветовой схемы , которые помогут сделать правильный выбор:
Первичный цвет — это первое с чем стоит определиться.
Основной цвет чаще всего отображается на экранах и используется, чтобы указать пользователям на основные действия пользовательского интерфейса (UI). В идеале должно быть от 1 до 3 основных цветов, которые легко ассоциируются с конкретным брендом или продуктом.
Единственное правило здесь — это не использовать абсолютно белый или черный цвет.
Избегайте использование чисто черного ли белого цвета, особенно на больших площадях. Лучше всего использовать ограниченую палитру оттенков серого, которая состоит из нейтральных черных цветов с добавлением белых оттенков, например:
Последовательность — это ключ к успеху. Используйте один и тот же цвет для ссылок и кнопок. Таким образом это помогает пользователям замечать интерактивные элементы и беспрепятственно выполнять действия.
Семантические цвета — это цвета, используемые для понимания пользователя информации об успехе, ошибке, предупреждении.
Семантические цвета используют:
Этот метод исходит из основного дизайна, но он идеально подходит для цифровых продуктов. Правило 60% + 30% + 10% работает, потому что оно приносит ощущение баланса и помогает глазу плавно перемещаться от одной области CTA (call to action) к другой, направляя пользователя через интерфейс.
60% — пространства предназначено для основного цвета / цвета области;30% — это вторичный / поддерживающий цвет;10% — акцент и сопровождающий цвет.
Можно использовать эти пропорции, чтобы найти правильный баланс при подборе и сочетании цветов, не превращая пользовательский интерфейс в красочную смесь.
Считается, что эти пропорции приятны человеческому глазу, потому что они позволяют легко воспринимать дизайн UI и общую композицию экрана.
Также можно применять цвета в другом порядке, и это все равно будет работать.
Ключ к хорошему UX — понимание своей аудитории.
Цвет играет здесь важную роль, так как выбор влияет на чувства и эмоции пользователя при взаимодействии с продуктом.
Поэтому при выборе цвета важно задать следующие вопросы и ответить на них:
- Кто ваша целевая аудитория?
- Сколько им лет?
- Какая специализация у вашего продукта?
- Какие эмоции вы хотите, чтобы ваш бренд вызвал?
Эти вопросы могут и должны повлиять на выбор, поэтому не стоит терять их, выбирая палитру UI и обсуждая свой выбор с командой.
Один из очень классных трюков — использовать природу или архитектуру, чтобы вдохновиться и создать уникальную цветовую схему.
В интернете есть множество инструментов, которые помогут в создать цветовую палитру из изображения.
Примеры для использования:
Получайте удовольствие и черпайте вдохновение в вещах, которые вам нравятся.
Используйте контраст в зависимости от целей.
Если хочется сосредоточить внимание пользователя на конкретном действии, рекомендуется использовать высококонтрастные цвета, чтобы помочь ему найти фокус.
Такие цвета, как синий, зеленый и красный, быстро расскажут о контексте еще до того, как пользователь прочитает текст кнопок.
Контраст помогает пользователям различать различные текстовые и нетекстовые элементы. Более высокий контраст делает изображения удобными для просмотра, а уменьшение контрастности может придать изображениям более ровный оттенок.
Однако при проектировании UI высокий уровень контрастности также может быть вредным, если его применять неосторожно. Если текст слишком сильно контрастирует с фоном, то UI будет труднее просмотреть.
Вот почему всегда полезно провести проверку контрастности с обесцвечиванием, оценить успех контраста или просто протестировать свой дизайн на разных экранах.
Дизайнеру, важно заботиться о своих пользователях, особенно при работе с цветом, поскольку не все люди воспринимают его одинаково. Согласно последним исследованиям, около 285 миллионов человек во всем мире страдают нарушениями зрения: слепы или страдают другими нарушениями.
Несколько советов, которые следует учитывать при разработке цифровых продуктов:
- Не полагайтесь исключительно на цвета. Используйте вспомогательный текст и иконки для всех необходимых команд;
- Важно сделать так, чтобы элементы переднего плана выделялись на фоне, так же известно как, Неоморфизм не для всех;
- Противоречивые команды должны быть четко различимы, например (Синий против Красного);
- Всегда предоставляйте допустимый краткое описание для изображений;
- Внедрите навигацию с клавиатуры в продукт.
При использовании цветов в системе дизайна всегда указывайте точное название для каждого цвета. Каждый член вашей команды должен понимать именования без лишней суеты и легко найти к определенный цвет в продукте.
Color Theory For Designers — узнайте больше о теории цвета и различных типах цветовых схем.
The Psychology Of Color — узнайте значение каждого цвета.
Подводя итог всему сказанному о цветах UI, можно прийти к трем основными принципами с Material design, которые можно использовать в своей работе
Цвет должен применяться во всем пользовательском интерфейсе последовательно и соответствовать бренду, который он представляет.
Цвет должен создавать различие между элементами, с достаточным контрастом между ними.
Цвета следует применять целенаправленно, чтобы передать смысл разными способами, например отношениями между элементами и степенями иерархии.
От себя бы я еще добавил пару советов при создании палитры.
1. Тестируйте сразу альтернативную версию темной темы. Вам необязательно ее создавать для всего проекта. Возьмите пару экранов, сделайте темную версию и убедитесь в том, что ваша палитра сбалансирована и отлично работает как в светлом так и в темном варианте.
2. Пытайтесь, по возможности, минимизировать количество оттенков. Чем меньше цветов - тем проще будет при разработке.
3. Используйте OPACITY для оттенков. Вам не обязательно на каждый оттенок создавать отдельный цвет. Если эту функцию может выполнить "прозрачность" - используйте ее. Кроме этого, если правильно использовать прозрачность, вам и вовсе не надо будет менять цвет в светлой и темной теме. Он и там и там, будет смотреться хорошо. Добавляйте альтернативные варианты цвета с OPACITY в UI Kit, для общего понимания и удобства.
4. Дайте цвету созреть. Иногда, при создании палитры я пару дней даю ей созреть. Я создаю и сохраняю макеты и пару дней подряд открываю их с периодичностью на телефоне. Делаю это в разных сценариях: сразу после пробуждения, на солнце, ночью перед сном. Подобные действия позволяют мне определить, не является ли цвет слишком разрежающим, ярким или наоборот блеклым. Когда, я убеждаюсь в том, что мне цвет нравится во всех сценариях, то продолжаю с ним работать.
Перевод на русский: Komarov.Design / Алина Остапенко
⚡ Если тебе понравился этот материал, ты можешь подписаться на мой Telegram / Instagram / Facebook / Medium/ Linkedin. Там ты найдешь больше интересных материалов о дизайне.
Автор выдаёт интересные материалы, плюсую.
Считаю, что прозрачность лучше всего работает с текстом в монохроме и в hover state - в противном случае элементы, которые идут внахлест, будут иметь совсем иной цвет в разных контекстах (цветная шапка с вторичной СТА и тот же элемент на нейтральном фоне). Поэтому лучше иметь плотную заливку на каждый цвет.
Ну вот один и тот же цвет. Читается и там и там текст. Контраст по алгоритму, допустимый. АА.
То, что я на практике не встречал, это конечно же не значит, что такого не бывает :) Другое дело, что по моему мнению данный подход менее универсален. Речь идёт больше о "брендовых" цветах, условно – ярко синий цвет, ярко красный и прочие.
конечно, но в любом случае, в дизайн системах, чем меньше всего - тем лучше.
Оттенки всё равно же надо записывать, и неважно, используют ли они прозрачность или имеют плотную заливку. Для фронта это так и так +1 переменная. Мы как-то пытались на одном проекте уменьшить количество цветовых токенов, но так и не смогли прийти к идеальному решению.
Про opacity не совсем понятно. Почему это она предпочтительнее непосредственных оттенков?
Ну как, у тебя один цвет, белый например. Тебе надо три оттенка для него. Есть разница дополнительных отдельных три цвета менять или один белый? opacity к тому же менять не надо, если грамотно сделано, для темной и светлой темы.
Не проще ли прописать просто несколько номеров палитры, а не один номер и несколько значений opacity? Так удобнее лично мне и людям.
Без визуализации не совсем полимаю о чем речь. Оpacity как угодно можно прописывать в гайде. Главное чтобы было понятно и удобно. Главное то, что на фронте, когда ты меняешь один цвет, остальные параметры opacity подтягиваются автоматически.
Вот на счёт опасити, пробовал сам на разных проектах. Дизайнерам действительно проще, а вот разрабы ворчали, у них мол и так переменные и им погоду не меняет сколько оттенков. К опасити лично отношусь приемлемо.
Я вот думал на тему юзать HSL для палетты. Тогда оттенки легко можно извлечь параметром L сохраняя одинаковые H и S.
Так мне кажется могут получиться общие кодированные параметры оттенков типо Primary-70, Primary-90 и Secondary-70.
(И да я согласен что hex читается легче чем hsl)
Не люблю цитаты с медиума но этот чувак наглядно осветил идею с примером стилевых переменных:
Не в коем случае не спор за лучший подход, интересен был твой опыт на тему HSL, буду иметь ввиду! Спасибо!
Спасибо за статью. Интересный материал
вот же вы ленивые ))) поправил
Нет :) Как минимум в разделах 4 и 8 остались битые ссылки, ведущие на komarov.design.
Совет про "нечёрный" чёрный с точки зрения пользователя считаю экстремально вредным. С каждым годом OLED-экранов становится всё больше, а абсолютный чёрный в их случае означает выключенный экран и уменьшенное энергопотребление. Игра в "очень тёмный серый" вместо чёрного превращает "тёмные темы" в фикцию, потому что экран продолжает работать по всей площади.
хорошее наблюдение. Ну это только если мы говорим с точки зрения экономии аккумулятора да и потребление энергии думаю не сильно скажется если будет на сайте фон полностью черный и цвет мокрого асфальта, ну сколько это реально сэкономит? Есть исследования на эту тему, интересно.
Насчёт названий цветов в дизайн-системах. Замечал несколько разных подходов:
1. Прямое название - в честь оттенка (Black, White, etc)
2. Название по назначению (Comment, Stroke, etc)
3. Название для состояния (Warning, Danger, etc)
4. Градация по частоте (Primary, Secondary, etc)
5. Цвета в зависимости от палитры (Accent, Brand, etc)
Самое страшное – подходы перемешиваются между собой, что приводит к путанице как при использовании, так и при составлении цветовой палитры. Например, когда у тебя есть несколько цветов обводки, которые разнятся в зависимости от типа объекта, а так же некоторые из типов имеют разное по степени важности выделение, а могут ещё и состояния.
Последний апдейт фигмы позволяет вкладывать все уровни друг в друга, что немного снимает боль (ведь ещё есть группировка по теме: Dark, Light, etc), но принципиально проблема однозначного именования цветов не решена.
Когда смотришь чужие дизайн-системы, понимаешь, что подходы налеплены друг на друга в случайном порядке. Часть цветов названы оттенками, часть – состояниями, часть – в зависимости от палитры и так далее. Использовать это с удобством может только автор самой палитры :)
При создании веб-дизайна, пожалуй, самое важное-умение правильно подобрать цвета. Сделать это бывает непросто и иногда требуется много времени, поэтому сегодня мы приготовили небольшую подборку ресурсов, которая облегчит эту задачу.
Немного теории
Цвета для веб делаются при помощи сочетаний красных, зелёных и синих оттенков, этот способ сочетания цветов называется RGB (Red Green Blue).
Каждый цвет представлен целым числом от 0 до 255, и у каждого цвета есть значение для красного, зеленого и синего. Черный, например, не имеет никакого тона, и в RGB он обозначается как 0, 0, 0. Первая цифра всегда означает значение красного цвета, вторая-зелёного и третья-синего.
Создаём палитру
Иногда создание палитры кажется легче, чем это есть на самом деле. Некоторые опытные дизайнеры могут создавать палитру с нуля; другие черпают вдохновение с других сайтов или внешних источников (рассматривая цвета на упаковке с чипсами в хозяйственном магазине или находя нужные решения в природе).
Палитры разрабатываются различными способами, всё зависит от мыслительного процесса дизайнера. У некоторых так намётан глаз, что они могут сочетать цвета на лету, просматривая цветную книгу или глядя на фотографию. Создавая палитру, удостоверьтесь, что сделали цветовые комбинации для каждого элемента Вашего веб-сайта.
Полезные ресурсы
Необязательно изобретать велосипед. Есть множество бесплатных онлайн-инструментов, которые позволяют пользователям создавать, загружать и импортировать цветовые палитры в течение нескольких минут. Палитры могут быть созданы на основе одного цвета или при помощи использования фотографии или другого изображения. Вот несколько простых сервисов для этой цели.
ColorBlender
Color Palette Generator
Color Palette Generator — автоматизированная версия cоздания цветов из фотографии или изображения. Пользователи могут выбрать одно из изображений или загрузить их собственное, чтобы получить цветовую палитру с девятью цветами.
Color Scheme Designer
Color Scheme Designer — цветовой круг онлайн. Есть возможность предварительного просмотра сайта с подобраными цветами в светлом и в тёмном решении. Можно экспортировать полученый результат в HTML, XML, в текстовый вариант и сохранять палитры для Фотошопа. Каждый цвет представлен в RGB и HEX.
Color Hunter
Kuler
Kuler — пожалуй, самый популярный инстумент для создания палитр. Есть множество цветовых решений, можно создавать палитры из изображений.
Colourlovers
Colourlovers — сообщество людей, которые любят экспериментировать с цветом. Здесь вы найдёте и сможете сами создавать палитры, заливки, и даже формы.
В Дизайн Мании уже было несколько публикаций с похожей тематикой: в заметке про сервисы подбора цветов для сайтов кроме ресурсов вдохновения рассмотрели парочку полезных веб-инструментов; также был пост с обзором генераторов палитр и т.п. Однако без понимания логики как сделать цветовую палитру все они могут оказаться малоэффективными. Сегодня постараемся заполнить данный пробел и прояснить некоторые теоретические моменты, хорошо описанные в этой заметке.
Те из вас, кто уже пользовались новомодными онлайн-генераторами, в курсе их принципа работы: сначала вы выбираете какие-то базовые значения, настраиваете ряд параметров (названия которых напоминают какие-то музыкальные термины), а затем в качестве результата получаете список 4-5оттенков, рекомендуемых для разработки веб-проектов.
Подобный технический и отчасти автоматизированный подход кажется, на первый взгляд, невероятно интересным и прогрессивным, однако на деле все получается не столь оптимистично. Конечно, если вам не хочется видеть свой сайт/приложение примерно таким:
Что нужно для создания палитры цветов
Вполне очевидно, что вы не сможете реализовать полноценный стоящий проект, используя всего пять HEX кодов веб-цветов. Вам нужен более широкий набор элементов для создания идеального работающего прототипа.
Давайте разделим нашу палитру на три группы.
Оттенки серого
Тексты, панели инструментов, фоны и др. – в большинстве интерфейсов почти всегда они серые.
Не исключено, что в вашем случае понадобится намного больше вариантов серого. Поначалу кажется, что 3-4 — это более, чем достаточно, однако вскоре вам захочется, например, добавить элемент чуть темнее №2, но немного светлее №3 и т.п.
Практика показывает, что для полноценного результата будет достаточно 8–10 сероватых оттенков — это не так много, дабы вы ударялись в крайности и мучились при выборе, но в то же время вполне достаточно, чтобы не так часто идти на компромиссы.
Как правило, чистый черный выглядит немного неестественно, советуем начинать с самого насыщенного темно-серого, а затем шаг за шагом переходить к белому.
Основной цвет(а)
В большинстве сайтов будет достаточно двух базовых цветов, которые по сути, и формируют общий вид интерфейса – так Facebook ассоциируется у нас с синими оттенками, хотя в действительности в дизайне там чаще встречаются серые.
По аналогии с предыдущим пунктом дабы сделать хорошую цветовую палитру вам потребуется 5–10 вариантов, дающих бОльший выбор при проектировании внешнего вида: оттенки посветлее можно применять в качестве фона для оповещений; в то время как темные прекрасно подойдут для оформления текстов.
Цвета для акцентов
…желтый (по аналогии со светофором) будет предупреждать посетителей:
…а с помощью зеленого сможете выделить положительную динамику:
Хотя в пользовательском интерфейсе эти цвета должны применяться довольно умеренно, вам желательно проработать по несколько оттенков каждого из них.
Если при разработке сайта/приложения вам надо создать цветовую палитру для классификации или различения похожих объектов (календарных событий, тегов, линий графиков и т. д.), то, возможно, вам потребуется больше акцентов. При создании сложных или нестандартных UI-интерфейсов нередко берется до 10-ти различных цветов с 5-10 полутонами у каждого.
Прежде всего, решите, какие оттенки вам нужны
Но как сделать палитру цветов подобную этой?
Начните с основного цвета
В действительности не существует научного способа, который помог бы это реализовать, хотя есть одно хорошее правило — выбирайте такие базовые и акцентные оттенки, которое можно удачно использовать в качестве фона кнопки.
В этом вопросе нет каких-то определенных правил, у каждого цвета есть свои особенности, поэтому зачастую вам придется полагаться на свои глаза/опыт, тем более, что в разных странах UI дизайн отличается.
Определите крайние оттенки в палитре
Следующий шаг – подбор самого светлого и темного решения. Опять же тут нет строгой методики, вам поможет такой совет: подумайте, где вы собираетесь их использовать, и уже исходя из этого, сделайте свой выбор.
Самые темные цвета, как правило, предназначены для текста, в то время как с помощью светлых часто оттеняют фон того или иного элемента. Хорошим примером послужит простой блок оповещения, изображенный на картинке ниже, где присутствуют сразу оба крайних варианта.
Возьмите ваш основной цвет и начинайте корректировать его насыщенность/яркость до тех пор, пока результат вас не удовлетворит.
Заполняем пробелы
Кстати, девять – довольно удобное число, отлично подходит при разделении/заполнении всех оттенков. Для удобства назовем наиболее светлый вариант – 100, основной – 500, а максимально темный – 900. Затем начинаем подбирать оттенки 300 и 700 – те, что находятся в центре между базовыми. Они должны выглядеть как идеальные промежуточные решения.
Теперь (также как и выше) надо заполнить еще четыре пробела в текущей цветовой гамме.
В итоге у вас должна получиться сбалансированная модель, с помощью которой вы сможете реализовать свои дизайнерские идеи, не ограничивая полет фантазии.
Что с серым цветом?
Если вы работаете с серой гаммой, то основной оттенок не так важен, а в во всем остальном подбор полутонов выполняется точно так же: начните с крайних значений, а затем заполняйте оставшиеся промежутки до тех пор, пока не добьетесь того, чего хотите.
Выберите максимально темный-серый исходя из того, насколько темным может быть текст в вашем проекте. Тогда наиболее светлый элемент подбирайте с учетом того, насколько хорош он будет в качестве ненавязчивого фона.
Это не точная наука
Как бы заманчиво это не было, но создать цветовую палитру идеальной, полагаясь исключительно на математические расчеты, невозможно. Систематизированный алгоритм, описанный выше, при подборе оттенков хорошо работает на начальном этапе, но не бойтесь вносить коррективы, если они потребуются.
Как только вы начнете пользоваться подобранной гаммой, вам неизбежно захочется внести какие-то изменения: добавить насыщенности цветам или сделать их на пару тонов темнее/светлее. Полагайтесь на свои глаза, а не на цифры!
Небольшой совет: по возможности старайтесь не расширять палитру слишком часто. Если не будете разумно ограничивать свою фантазию в данном вопросе, то не получите сбалансированный итоговый результат.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
Сегодня я расскажу вам, как быстро создать цветовую палитру в Sketch. Это крутая фишка, которой меня научил Марк Эдвардс несколько лет назад.
Сначала создадим три квадрата с длиной стороны кратной трем. В нашем примере это квадраты 240pt в высоту и 240pt в ширину.
Теперь будем добавлять разные оттенки к квадратам, разделяя их по-вертикали на три равные части. Чтобы сделать это, создайте над квадратами два прямоугольника шириной во весь артборд. Высота прямоугольников должна составлять ⅓ высоты квадратов — то есть, в нашем случае, 80pt.
Выровняйте один прямоугольник по верхнему краю ардборда и залейте белым, а второй — по нижнему краю и залейте черным. Теперь установите прозрачность прямоугольников на 20%. У нас получились по три разных оттенка красного, зеленого и синего. Давайте переименует эти два слоя, чтобы позже не запутаться в них.
Теперь снова будем делить квадраты — на этот раз по горизонтали. Создайте прямоугольник такой же высоты, что и квадрат. Ширина этого прямоугольника составляет ⅓ ширины самого квадрата. Выровняйте прямоугольник по центру красного квадрата. Теперь давайте продублируем этот прямоугольник и выровняем новый прямоугольник по правому краю красного квадрата.
Теперь надо разделить основной прямоугольник на девять равных частей. По сути можно просто дублировать два последних вертикальных прямоугольника и переместить их в зеленый и синий квадраты, чтобы получилась законченная цветовая палитра.
У Sketch есть скрытая функция, при помощи которой можно выявить часто используемые в документе цвета. Эту функцию можно найти на панели Inspector при выборе цвета заливки. Справа, прямо над альфа значением находится окошко с цветом. Когда мы нажимаем на это окошко, разворачивается панель, на которой отображаются часто используемые цвета.
Сохранить цвет в Sketch достаточно просто. Когда выберете цвет, вы увидите две панели: Общие цвета (Global Colors) и Цвета документа (Document Colors). Общие цвета — это цвета, сохраненные для всех документов. Цвета документа отображаются только для того документа, над которым вы работаете.
Чтобы сохранить цвет, кликните по значку “плюс” на одной из панелей. Цвет сохранится на выбранной панели. Чтобы удалить цвет с панели — просто перетащите его за пределы панели.
Совет: Чтобы быстро выбрать цвет, нажмите “Control + C” и кликните по нужному цвету. Это горячая клавиша для инструмента “пипетка”.
Когда вы работаете над крупным проектом с множеством файлов, совсем не обязательно вручную создавать цвета документов.
Здесь-то нам и пригодится плагин Sketch Palettes. Он позволяет сохранить палитры в файл, который впоследствии можно импортировать в другой документ. Таким образом вы можете быстро добавить цвета бренда в любой новый документ.
Чтобы сохранить цветовую палитру, зайдите в плагины (Plugins) > Sketch Palettes и сохраните вашу палитру общих цветов или цветов документа. Также можно загружать и очищать палитры.
Читайте также: