Перейти к содержанию
100% локально

Генератор цветовой палитры

Превратите один базовый цвет в полную палитру, используя правила гармонии цветового колеса.

Входные данные
0
0
Выходные данные

Генератор цветовой палитры

Вставьте базовый цвет в виде шестнадцатеричного кода, rgb() или hsl() и этот инструмент создаст вокруг него полную палитру, используя правила гармонии цветового колеса, а не простое изменение яркости одного оттенка. Выберите дополнительные для одного противоположного цвета, раздвоенную дополнительную или триадную для сбалансированного контраста, четырехцветную для четырехцветного прямоугольника, аналогичную для соседних оттенков, которые естественно сочетаются, или монохроматическую для тонов и оттенков одного оттенка.

Опция гармонии определяет, сколько цветов выходит — дополнительные всегда возвращают два, триадная и раздвоенная дополнительная возвращают три, четырехцветная возвращает четыре — в то время как количество цветов и угол шага оттенка применяются только к аналогичной и монохроматической, где вы выбираете, сколько цветов и как далеко они расположены. Вычисляйте в HSL для классической математики цветового колеса или переключитесь на OKLCH, который сохраняет одинаковую воспринимаемую яркость для всех оттенков, чтобы палитра не выглядела с одним образцом, который выглядит странно темным или смытым рядом с остальными. Ползунки регулировки насыщенности и яркости уточняют всю палитру после построения гармонии, а опция формата цвета выводит каждый результат как шестнадцатеричный, rgb(), hsl() или oklch().

Каждый образец проверяется на WCAG AA (4.5:1) как текст на белом и черном фоне, отмечен галочкой или крестиком рядом с каждым соотношением — полезно для выбора того, какие цвета в созданной палитре безопасны для основного текста и только для украшения. Экспортируйте результат в виде простого списка, блока пользовательских свойств CSS, готового к вставке в таблицу стилей, или объекта цветовой конфигурации Tailwind.

Все работает локально в вашем браузере — цвет, который вы вводите, никогда не загружается никуда. Скопируйте результат, загрузите его как файл .txt или отправьте в вход другого инструмента, чтобы продолжить работу с ним.

FAQ

Какие форматы ввода цвета он принимает?
Шестнадцатеричные коды (#3b82f6, #38f, с # или без), rgb()/rgba() и hsl()/hsla(). Вставьте один из них и палитра обновится мгновенно.
В чем разница между HSL и OKLCH для расчета?
HSL — это классическая математика цветового колеса, быстрая и предсказуемая. OKLCH — это перцептивно однородное пространство, поэтому палитра, построенная в нем, сохраняет более ровную воспринимаемую яркость во всех оттенках, вместо того чтобы некоторые цвета выглядели темнее или светлее, чем остальные, случайно.
Почему изменение "количества цветов" влияет только на некоторые гармонии?
Дополнительные, раздвоенные дополнительные, триадные и четырехцветные по определению имеют фиксированное количество — два, три, три и четыре цвета. Количество контролирует только аналогичную и монохроматическую, которые могут обоснованно иметь любое количество цветов.
Что означает галочка/крестик AA рядом с каждым цветом?
Это коэффициент контрастности WCAG этого цвета, используемого как текст на белом фоне и черном фоне, с галочкой, когда он достигает порога AA 4.5:1, и крестиком, когда это не так.
Загружается ли мой цвет куда-нибудь?
Нет. Палитра генерируется полностью в вашем браузере — ничего, что вы вводите, не отправляется на сервер.