Перетворіть будь-який колір на 11-крокову шкалу для системи дизайну (50→950): перцептивно рівномірна інтерполяція OKLCH, вихідний колір закріплений на найближчому кроці, контраст WCAG відносно білого/чорного на кожному кроці, експорт в один клік до Tailwind / CSS-змінних / SCSS / JSON.
// tailwind.config.js / @theme
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: "#ffedfa",
100: "#ffd8f4",
200: "#ffbdec",
300: "#fea4e4",
400: "#f47bd4",
500: "#e653c4",
600: "#d222af",
700: "#b90098",
800: "#9c007f",
900: "#7c0063",
950: "#560044",
},
},
},
},
};Створіть 11-крокову шкалу системи дизайну з одного кольору, перцептивно рівномірну в OKLCH.
Вставте HEX або натисніть «Створити шкалу» на будь-якій сторінці кольору, щоб додати значення.
Ваш колір прилягає до найближчого кроку; контрастність за WCAG відносно білого та чорного вказана під кожним кроком.
Оберіть Tailwind / CSS vars / SCSS / JSON і скопіюйте це прямо у ваш код.
Чотири питання, які люди дійсно задають про генерацію відтінків.
Продовжуйте далі та використовуйте кольори на практиці.
Введіть код RAL, Pantone або NCS — або будь-який HEX — і знайдіть відповідність серед усіх 10 стандартних систем за CIEDE2000 ΔE.
Перевірка контрасту за WCAG 2.1 між будь-яким кольором переднього плану та фону.
Пробіл для випадкового вибору, блокування, перетягування для впорядкування, спільне використання за URL — все, що має робити панель палітр.
Опишіть сцену або настрій одним реченням — отримайте палітру з п'ятьма ролями з обґрунтуванням.