📐 Un conjunto de herramientas,
cada tarea de diseño

Sistema de Color UI

Genere paletas de tokens de diseño completas a partir de un único color de semilla. Exporte a Tailwind, CSS o SCSS.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

📐 Sistema de Color UI

Guía del sistema de color de la interfaz de usuario

Un sistema de color de la interfaz de usuario es un conjunto de variantes de color creadas a partir de un único color inicial. Proporciona escalas consistentes de claro a oscuro para tokens de diseño, botones, fondos y colores de texto.

Seleccione un color de semilla y elija un estilo (Viento de cola o Material). La herramienta genera una paleta completa de 10 pasos desde claro (50) hasta oscuro (900), perfecta para sistemas de diseño.

Pro Tips

Frequently Asked Questions

Q: ¿Qué es un token de diseño?
¿Qué es un token de diseño? Un token de diseño es un valor con nombre que almacena un atributo de diseño, como un color, que se utiliza de forma coherente en todo un sistema de diseño.
Q: ¿Por qué necesito 10 tonos?
¿Por qué necesito 10 tonos? Los diferentes elementos de la interfaz de usuario necesitan diferentes niveles de contraste. Una escala de 10 pasos brinda flexibilidad para fondos, bordes, estados de desplazamiento y texto.
Q: ¿Qué es una paleta de tokens de diseño?
¿Qué es una paleta de tokens de diseño? Una paleta de tokens de diseño es un conjunto sistemático de variables de color (primario, secundario, superficie, texto) generado a partir de un único color de marca. Garantiza la coherencia en toda la interfaz de usuario.
Q: ¿Puedo exportar a sistemas de diseño que no sean Tailwind?
¿Puedo exportar a sistemas de diseño que no sean Tailwind? Sí, la herramienta exporta a propiedades personalizadas de CSS, variables SCSS y formato de configuración de Tailwind. Copie el formato que coincida con su pila.
Q: ¿Cómo manejo el modo oscuro con esta herramienta?
¿Cómo manejo el modo oscuro con esta herramienta? Primero genere su paleta de modo de luz, luego use el mismo color inicial con valores reducidos de saturación y luminosidad para el modo oscuro. Muchos sistemas de diseño invierten los colores de la superficie y del texto.

Colores del Mundo Hispano

Del añil guatemalteco al rosa mexicano, el mundo hispanohablante tiene una rica tradición cromática. Estos colores nacen de textiles indígenas, arquitectura colonial y festividades, y hoy inspiran paletas llenas de carácter.

Rosa Mexicano #E4007C

Color icónico del diseño mexicano, creado por Ramón Valdiosera

Azul Añil #4B0082

Tinte tradicional de los textiles mayas de Guatemala

Rojo Bermellón #E34234

El rojo intenso de los toros y la cerámica española

Amarillo Maíz #F4B41A

El oro del maíz, base de la alimentación mesoamericana

Verde Jade #00A86B

La piedra sagrada de mayas y aztecas

Azul Celeste #A5C8E1

El azul de la bandera argentina y el cielo porteño

Terracota #E2725B

Arcilla cocida — el color de los tejados coloniales

Vino Tinto #722F37

El burdeos de las bodegas de La Rioja

Oro Colonial #D4AF37

El dorado de los retablos barrocos americanos

Turquesa Caribe #40E0D0

El color de las playas del Caribe

Q: ¿Qué es el rosa mexicano?
¿Qué es el rosa mexicano? El rosa mexicano (#E4007C) es un color vibrante promovido por el diseñador Ramón Valdiosera en los años 40 como símbolo de identidad nacional, usado hoy en artesanías, textiles y diseño contemporáneo.
Q: ¿Qué es el azul añil?
¿Qué es el azul añil? El añil es un tinte natural azul extraído de la planta del índigo, usado en los textiles mayas de Guatemala y en los huipiles tradicionales desde tiempos prehispánicos.