Преобразуйте любой цвет в шкалу дизайн-системы из 11 шагов (50→950): перцептивно равномерная интерполяция OKLCH с привязкой к ближайшему шагу исходного цвета, контрастность WCAG с белым/черным на каждом шаге, экспорт в один клик в Tailwind / CSS variables / SCSS / JSON.
// tailwind.config.js / @theme
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: "#fff7fe",
100: "#fee3f8",
200: "#fbcaf0",
300: "#f5aee8",
400: "#ea89da",
500: "#dd6acc",
600: "#ca45b8",
700: "#b21ca2",
800: "#970088",
900: "#79006d",
950: "#56004d",
},
},
},
},
};Создание шкалы дизайн-системы из 11 шагов на основе одного цвета, перцептуально равномерной в OKLCH.
Вставьте HEX-код или нажмите «Создать шкалу» на любой странице цвета, чтобы добавить значение.
Ваш цвет подстраивается под ближайший шаг; контрастность по WCAG относительно белого и черного указана под каждым шагом.
Выберите формат Tailwind / CSS-переменные / SCSS / JSON и скопируйте результат прямо в ваш код.
Четыре вопроса, которые реально задают про генерацию оттенков.
Продолжите отсюда и используйте цвета в работе.
Введите код RAL, Pantone или NCS — или любой HEX — и найдите его соответствие во всех 10 стандартных системах с ΔE CIEDE2000.
Проверка контраста по WCAG 2.1 между любым цветом переднего плана и фона.
Пробел для рандомизации, блокировка, перетаскивание для изменения порядка, обмен по URL — всё, что должна делать панель палитр.
Опишите сцену или настроение одной строкой — получите палитру из пяти цветов с обоснованием.