Выбор гармоничных цветов необходим для хорошего дизайна. Теория цвета предоставляет математические отношения между цветами, которые естественно приятны глазу. Этот инструмент генерирует цветовые палитры на основе проверенных правил цветовой гармонии (комплементарная, аналогичная, триадная, split-complementary и тетрадная) из любого начального цвета. Каждая палитра включает значения HEX, RGB и HSL, готовые для использования в ваших дизайнах.
Colors opposite on the color wheel
Colors adjacent on the color wheel
Three colors equally spaced (120 degrees apart)
Base color plus two colors adjacent to its complement
Four colors forming a rectangle on the color wheel
Same hue with varying lightness
/* Complementary */ #6366f1 #f1ee63 /* Analogous */ #63adf1 #6389f1 #6366f1 #8463f1 #a763f1 /* Triadic */ #6366f1 #f16366 #66f163 /* Split-Complementary */ #6366f1 #f1a763 #adf163 /* Tetradic (Rectangle) */ #6366f1 #f163ad #f1ee63 #63f1a7 /* Shades & Tints */ #05073d #0b0d75 #1013b2 #1519ea #5255ef #8a8cf5 #c7c8fa
Выберите базовый цвет с помощью палитры или введите HEX-код. Выберите правило гармонии (complementary, analogous, triadic, split-complementary, tetradic или monochromatic) для генерации гармоничной палитры. Каждый цвет в палитре показывает свои значения HEX, RGB и HSL с копированием одним кликом. Экспортируйте палитру как простой текстовый список всех цветовых значений.
Генерация цветовых палитр необходима для дизайна фирменного стиля, создания согласованных цветовых систем для веб-приложений, проектирования доступных цветовых схем с достаточным контрастом, выбора цветов для диаграмм и графиков визуализации данных, создания тематических библиотек UI-компонентов, генерации цветовых схем для тёмного и светлого режимов и создания сезонных или кампанийных цветовых палитр для маркетинговых материалов.
Алгоритмы цветовой гармонии работают в цветовом пространстве HSL (Hue, Saturation, Lightness). Комплементарные цвета различаются на 180° по оттенку, аналогичные на ±30°, триадные на ±120°, split-complementary на ±150°. Генератор регулирует насыщенность и светлоту для создания tints (добавление белого), shades (добавление чёрного) и tones (добавление серого). Цвета конвертируются между HEX, RGB и HSL с использованием стандартных математических формул. Монохроматическая схема варьирует только насыщенность и светлоту, сохраняя оттенок постоянным.
Комплементарные цвета расположены напротив друг друга на цветовом круге (на расстоянии 180°). Они создают высокий контраст и визуальное напряжение. Пример: синий (#0000FF) и оранжевый (#FF8800). Лучше всего использовать с одним доминирующим цветом и комплементом в качестве акцента.
Аналогичные цвета соседствуют на цветовом круге (в пределах 30° друг от друга). Они создают гармоничные палитры с низким контрастом, которые ощущаются естественными и связными. Пример: синий, сине-зелёный и зелёный.
Триадные цвета равномерно распределены вокруг цветового круга (на расстоянии 120°). Они обеспечивают сильный визуальный контраст при сохранении баланса. Пример: красный, синий и жёлтый.
Начните с цвета вашего бренда, сгенерируйте комплементарную или триадную палитру, затем добавьте нейтральные тона (белый, серый, тёмно-серый). Используйте правило 60-30-10: 60% доминирующий цвет (фон), 30% вторичный цвет, 10% акцентный цвет.
Универсальный подборщик цветов с конвертацией между HEX, RGB, HSL, HSV, CMYK
Конвертируйте CSS-таблицы стилей в inline-стили для совместимости с HTML-email.
Проверьте, соответствуют ли цветовые комбинации требованиям WCAG 2.1 по контрастности для доступности.
Трансформируйте, форматируйте, генерируйте и кодируйте данные мгновенно. Приватно, быстро и всегда бесплатно.
Смотреть все инструменты