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: "#fff6ff",
100: "#ffdffc",
200: "#ffc1f9",
300: "#ffa0f3",
400: "#ff75ea",
500: "#f53adb",
600: "#e400cb",
700: "#cc00b5",
800: "#ae009b",
900: "#8d007d",
950: "#66005a",
},
},
},
},
};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.