Перетворіть будь-який колір на 11-крокову шкалу для системи дизайну (50→950): перцептивно рівномірна інтерполяція OKLCH, вихідний колір закріплений на найближчому кроці, контраст WCAG відносно білого/чорного на кожному кроці, експорт в один клік до Tailwind / CSS-змінних / 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 vars / SCSS / JSON і скопіюйте це прямо у ваш код.
Чотири питання, які люди дійсно задають про генерацію відтінків.
Продовжуйте далі та використовуйте кольори на практиці.
Введіть код RAL, Pantone або NCS — або будь-який HEX — і знайдіть відповідність серед усіх 10 стандартних систем за CIEDE2000 ΔE.
Перевірка контрасту за WCAG 2.1 між будь-яким кольором переднього плану та фону.
Пробіл для випадкового вибору, блокування, перетягування для впорядкування, спільне використання за URL — все, що має робити панель палітр.
Опишіть сцену або настрій одним реченням — отримайте палітру з п'ятьма ролями з обґрунтуванням.