Как создать монохроматическую цветовую палитру для вашего проекта?

Давайте посмотрим, как шаг за шагом создать цветовую палитру для проекта UI/UX-дизайна.

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

Давайте начнем
Шаг 1: Выберите базовый цвет и измените цветовой режим с HEX на HSB.

Все знают о HSB (H-Hue, S-Saturation, B-Brightness). Когда мы хотим увеличить интенсивность цвета, то следует увеличить насыщенность, а если вы хотите создать оттенок, то уменьшите яркость.

Шаг 2: Нанесите цвет на форму на холсте или рамке. В качестве фигуры можно использовать круг или прямоугольник.

Шаг 3: Дублируйте (Ctrl+D) фигуру пять раз. Таким образом, общее количество фигур теперь равно 6.

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

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

Шаг 5: Теперь создайте два нейтральных цвета, добавив серый и белый. Я изменил S и B, добавив серый и белый, чтобы получить два нейтральных цвета. Посмотрите на изображение ниже и сравните цвета с базовым цветом. Вы можете увидеть изменения в S и B.

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

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

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

Давайте посмотрим пример ниже…

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

Вы можете следить за мной, если хотите увидеть больше подобных статей.
Следите за мной на
Dribbble | Behance | LinkedIn | Instagram

Оцените статью
devanswers.ru
Добавить комментарий