$ tools/color-wheel

Цветовой круг

Выберите цвет и гармонию — комплементарная, аналогичная, триадная и другие — сгенерируйте подходящую палитру. Hex, RGB, HSL и CMYK, клик для копирования.

# Выберите цвет

светлота50%
RGB
HSL
HSB
CMYK

$ Гармония

$ Палитра

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

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

Что означают гармонии

Дополнительные используют цвет прямо напротив на круге для высокого контраста и энергии. Аналоговые используют соседей для спокойного, цельного ощущения. Триадные равномерно располагают три цвета для сбалансированного, но живого набора. Раздельно-дополнительные смягчают дополнительную пару. Квадрат и тетрадные дают вам четырёхцветные схемы с большим охватом. Монохромные и оттенки и тени остаются на одном оттенке, варьируя только светлоту — отлично для чистого, минималистичного UI.

Почему это важно для вашего приложения

Связная палитра делает ваши скриншоты App Store, иконку и Feature Graphic похожими на один продукт, а не кучу случайных цветов. Выберите цвет вашего бренда, сгенерируйте гармонию и переиспользуйте эти точные hex в подписях скриншотов, фонах и ассетах магазина.

$ FAQ

Это бесплатно?

Да — полностью бесплатно, без регистрации, без ограничений. Работает полностью в браузере.

В чём разница между HSL и HSB?

Оба описывают оттенок и насыщенность, но третье значение отличается: HSL использует светлоту (0% чёрный, 100% белый), а HSB использует яркость. Дизайнеры часто предпочитают HSL для веба; HSB появляется в инструментах вроде Photoshop. Этот круг даёт оба.

Можно начать с моего фирменного цвета?

Да. Введите hex в поле, и круг и палитра обновятся, чтобы соответствовать. Затем выберите гармонию для построения вокруг.

Как использовать палитру в моём дизайне?

Кликните любой образец, чтобы скопировать его hex, или используйте «Копировать все HEX» / «Копировать как CSS-переменные» для всего набора. Вставьте прямо в дизайн-инструмент или таблицу стилей.

Больше цветовых инструментов

Нравится LaunchShots?
Навсегда бесплатно — если сэкономил вам время, можете купить мне кофе.
Поддержать →
скопировано ✓