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

Описание изображения

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

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

Описание изображения

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

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

Описание изображения

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

Вы можете подписаться на меня, если хотите видеть больше подобных статей.
Следуй за мной на
Дрибббл | Беханс | LinkedIn | Инстаграм