Convierte cualquier color en una escala de sistema de diseño de 11 pasos (50→950): interpolación OKLCH perceptualmente uniforme con el color de origen anclado en su paso más cercano, contraste WCAG frente a blanco/negro en cada paso, exportación con un clic a Tailwind / Variables CSS / SCSS / JSON.
// tailwind.config.js / @theme
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: "#fff5ff",
100: "#ffe0ff",
200: "#ffc2fd",
300: "#ffa0f9",
400: "#ff75f2",
500: "#f335e5",
600: "#e300d6",
700: "#cb00c0",
800: "#ae00a5",
900: "#8d0087",
950: "#660062",
},
},
},
},
};Genera una escala de sistema de diseño de 11 pasos a partir de un color, perceptualmente uniforme en OKLCH.
Pega un HEX, o haz clic en "Construir escala" en cualquier página de color para introducir el valor.
Tu color se ajusta a su paso más cercano; el contraste WCAG con blanco y negro se muestra debajo de cada paso.
Elige Tailwind / variables CSS / SCSS / JSON y cópialo directamente en tu código.
Cuatro preguntas que la gente realmente hace sobre la generación de matices.
Continúa desde aquí y pon los colores a trabajar.
Introduce un código RAL, Pantone o NCS — o cualquier HEX — y compáralo en los 10 sistemas estándar con ΔE CIEDE2000.
Validación de contraste WCAG 2.1 entre cualquier color de primer plano y fondo.
Barra espaciadora para aleatorizar, bloquear, arrastrar para reordenar, compartir por URL — todo lo que un panel de paletas debe hacer.
Describe una escena o estado de ánimo en una línea — obtén una paleta de cinco roles con justificación.