Convierte un solo color de marca en un sistema de diseño completo con escalas de tono de 50 a 950, tokens semánticos para modo claro y oscuro, y combinaciones de contraste accesibles. Exporta como propiedades personalizadas CSS, configuración de Tailwind o tokens de diseño para uso inmediato en producción.
Genera escalas de 50 a 950 para cada color en tu paleta de marca. Cada tono es perceptualmente uniforme y probado para pasos de luminosidad consistentes.
Genera automáticamente tokens de color semánticos que funcionan tanto en modo claro como oscuro. Los colores de superficie, texto y acento están mapeados para ambos temas.
Cada combinación de colores se verifica con las relaciones de contraste WCAG AA. Verás qué combinaciones funcionan para texto, interfaz de usuario y elementos decorativos.
Exporta todo tu sistema de color como propiedades personalizadas CSS, configuración de Tailwind CSS, mapa SCSS, tokens JSON o una Guía de Estilo compartible.
Los tokens semánticos asignan colores a su propósito — como 'fondo', 'texto-principal', 'borde', 'error' — en lugar de a valores específicos. Esto facilita intercambiar temas (claro/oscuro) o cambiar la marca sin tocar el código de los componentes.
Usamos el espacio de color OKLCH para obtener pasos de luminosidad perceptual uniforme. A partir de tu color de marca, calculamos 10 tonos que se perciben uniformemente espaciados para el ojo humano, a diferencia de los simples ajustes de luminosidad HSL.
Comienza con tu color principal. El generador crea un sistema completo a su alrededor. Puedes ajustar los colores secundarios y de acento dentro del sistema generado.
Sí. La configuración exportada de Tailwind usa el formato de propiedad personalizada CSS compatible tanto con Tailwind v3 (tailwind.config.js) como con v4 (@theme inline).