Tokens de color para sistemas de diseño
Genera un conjunto completo de tokens de color para tu sistema de diseño a partir de 7 colores base — primario, secundario, acento, éxito, advertencia, error e info. Cada color obtiene 9 variantes derivadas automáticamente (base, claro, oscuro, hover, activo, fondo, borde, texto y apagado) para modo claro y oscuro. Exporta como propiedades personalizadas CSS o JSON. Todo el procesamiento se ejecuta en tu navegador — gratis y sin registro.
Generate a complete set of design system colour tokens from 7 base colours. Get light and dark mode variants with CSS variables and JSON export - perfect for design systems, component libraries, and theme files.
Main brand colour used for primary actions, active states, and key UI elements
Supporting brand colour for secondary actions and complementary elements
Highlight colour for emphasis, badges, and call-to-action elements
Positive feedback - confirmations, success messages, and valid states
Cautionary feedback - warnings, low-priority alerts, and pending states
Negative feedback - errors, destructive actions, and invalid states
Informational feedback - tooltips, helper text, and neutral notifications
Primary
Secondary
Accent
Success
Warning
Error
Info
:root {
/* Light mode colour tokens */
--color-primary-base: #3b82f6;
--color-primary-light: #e2ecfe;
--color-primary-dark: #0f213e;
--color-primary-hover: #326fd1;
--color-primary-active: #295bac;
--color-primary-bg: #f5f9ff;
--color-primary-border: #9dc1fb;
--color-primary-text: #000000;
--color-primary-muted: #336ecc;
--color-secondary-base: #8b5cf6;
--color-secondary-light: #eee7fe;
--color-secondary-dark: #23173e;
--color-secondary-hover: #764ed1;
--color-secondary-active: #6140ac;
--color-secondary-bg: #f9f7ff;
--color-secondary-border: #c5aefb;
--color-secondary-text: #000000;
--color-secondary-muted: #6133cc;
--color-accent-base: #f59e0b;
--color-accent-light: #fef0da;
--color-accent-dark: #3d2803;
--color-accent-hover: #d08609;
--color-accent-active: #ac6f08;
--color-accent-bg: #fffaf3;
--color-accent-border: #facf85;
--color-accent-text: #000000;
--color-accent-muted: #cc9433;
--color-success-base: #10b981;
--color-success-light: #dbf5ec;
--color-success-dark: #042e20;
--color-success-hover: #0e9d6e;
--color-success-active: #0b825a;
--color-success-bg: #f3fcf9;
--color-success-border: #88dcc0;
--color-success-text: #000000;
--color-success-muted: #33cc99;
--color-warning-base: #f97316;
--color-warning-light: #feeadc;
--color-warning-dark: #3e1d06;
--color-warning-hover: #d46213;
--color-warning-active: #ae510f;
--color-warning-bg: #fff8f3;
--color-warning-border: #fcb98b;
--color-warning-text: #000000;
--color-warning-muted: #cc7333;
--color-error-base: #ef4444;
--color-error-light: #fde3e3;
--color-error-dark: #3c1111;
--color-error-hover: #cb3a3a;
--color-error-active: #a73030;
--color-error-bg: #fef6f6;
--color-error-border: #f7a2a2;
--color-error-text: #000000;
--color-error-muted: #cc3333;
--color-info-base: #06b6d4;
--color-info-light: #daf4f9;
--color-info-dark: #022e35;
--color-info-hover: #059bb4;
--color-info-active: #047f94;
--color-info-bg: #f3fbfd;
--color-info-border: #83dbea;
--color-info-text: #000000;
--color-info-muted: #33b5cc;
/* Dark mode colour tokens */
--color-mode: light;
}
[data-theme="dark"], .dark {
--color-primary-base: #0b3d8e;
--color-primary-light: #dae2ee;
--color-primary-dark: #030f24;
--color-primary-hover: #093479;
--color-primary-active: #082b63;
--color-primary-bg: #f3f5f9;
--color-primary-border: #859ec7;
--color-primary-text: #ffffff;
--color-primary-muted: #336ecc;
--color-secondary-base: #3d0eaa;
--color-secondary-light: #e2dbf2;
--color-secondary-dark: #0f042b;
--color-secondary-hover: #340c91;
--color-secondary-active: #2b0a77;
--color-secondary-bg: #f5f3fb;
--color-secondary-border: #9e87d5;
--color-secondary-text: #ffffff;
--color-secondary-muted: #6133cc;
--color-accent-base: #f5c470;
--color-accent-light: #fef6ea;
--color-accent-dark: #3d311c;
--color-accent-hover: #d0a75f;
--color-accent-active: #ac894e;
--color-accent-bg: #fffcf8;
--color-accent-border: #fae2b8;
--color-accent-text: #000000;
--color-accent-muted: #cc9433;
--color-success-base: #d1faec;
--color-success-light: #f8fefc;
--color-success-dark: #343f3b;
--color-success-hover: #b2d5c9;
--color-success-active: #92afa5;
--color-success-bg: #fdfffe;
--color-success-border: #e8fdf6;
--color-success-text: #000000;
--color-success-muted: #33cc99;
--color-warning-base: #f8b07c;
--color-warning-light: #fef3eb;
--color-warning-dark: #3e2c1f;
--color-warning-hover: #d39669;
--color-warning-active: #ae7b57;
--color-warning-bg: #fffbf8;
--color-warning-border: #fcd8be;
--color-warning-text: #000000;
--color-warning-muted: #cc7333;
--color-error-base: #891010;
--color-error-light: #eddbdb;
--color-error-dark: #220404;
--color-error-hover: #740e0e;
--color-error-active: #600b0b;
--color-error-bg: #f9f3f3;
--color-error-border: #c48888;
--color-error-text: #ffffff;
--color-error-muted: #cc3333;
--color-info-base: #4ddbf5;
--color-info-light: #e4fafe;
--color-info-dark: #13373d;
--color-info-hover: #41bad0;
--color-info-active: #3699ac;
--color-info-bg: #f6fdff;
--color-info-border: #a6edfa;
--color-info-text: #000000;
--color-info-muted: #33b5cc;
--color-mode: dark;
}Generación completa de tokens
Genera tokens de diseño listos para producción a partir de solo tus colores base.
- 7 categorías semánticas: Primario, secundario, acento, éxito, advertencia, error e info — cada una con un conjunto completo de variantes derivadas que incluyen base, light, dark, hover, active, bg, border, text y muted.
- Modo claro y oscuro: Cada token de color se adapta automáticamente al modo oscuro mediante una inversión perceptual de luminosidad que preserva la legibilidad y la jerarquía visual en temas oscuros.
- Variantes inteligentes: Las variantes hover, active, bg, border y texto sobre color se generan automáticamente mediante mezcla consciente de la luminancia — sin ajustes manuales para un contraste compatible con WCAG.
- Exportación CSS + JSON: Copia propiedades personalizadas CSS listas para usar para los selectores :root y [data-theme="dark"], o exporta un archivo JSON completo de tokens para integrarlo con herramientas de diseño y pipelines de compilación.
Casos de uso comunes
De sistemas de diseño al modo oscuro — los tokens de color potencian interfaces consistentes.
- Desarrollo de sistemas de diseño: Genera tokens de color consistentes para tu biblioteca de componentes o sistema de diseño. Usa las variables CSS exportadas en todos tus componentes como fuente única de verdad.
- Entrega de diseño: Convierte los tokens de diseño de Figma o Sketch en variables CSS y archivos JSON listos para desarrolladores. Elimina los errores de mapeo manual de colores entre diseño y desarrollo.
- Temas y marca blanca: Crea varios conjuntos de tokens para distintas marcas o temas. Cada conjunto obtiene variantes claras/oscuras consistentes automáticamente — perfecto para productos SaaS multi-inquilino.
- Implementación del modo oscuro: Deja de adivinar los colores del modo oscuro. Introduce tu paleta clara una vez y obtén al instante tokens de modo oscuro compatibles con WCAG sin cálculos al vuelo.
- Migración de frameworks: Al migrar entre frameworks CSS o añadir un sistema de diseño a mitad de proyecto, genera tokens de color consistentes que funcionen con Tailwind, CSS puro o CSS-in-JS.
- E-commerce y sitios de marketing: Mantén la coherencia de marca en páginas de aterrizaje, catálogos de productos y flujos de pago con un único conjunto de tokens de color semánticos compartido por todas las páginas.
Sobre los tokens de color para sistemas de diseño
Entiende cómo funcionan los tokens de color y cómo usarlos en tus proyectos.
- ¿Qué son los tokens de color?: Los tokens de color de un sistema de diseño son nombres de variables semánticas que abstraen valores de color codificados en identificadores significativos y reutilizables. En lugar de usar códigos hexadecimales directamente — difíciles de mantener e imposibles de tematizar — usas nombres como --color-primary-base o --color-error-hover. Esto permite un estilo consistente entre componentes y un cambio de tema instantáneo.
- Cómo se generan los tokens del modo claro: Para cada color base derivamos 9 variantes de token: base (el original), light (85 % de mezcla con blanco), dark (75 % de mezcla con negro), hover (15 % más oscuro), active (30 % más oscuro), bg (95 % de mezcla con blanco), border (50 % de mezcla con blanco), text (negro o blanco para contraste) y muted (saturación reducida). La variante de texto usa la luminancia WCAG para garantizar un contraste legible sobre el color base.
- Cómo se adaptan los tokens del modo oscuro: Los tokens del modo oscuro usan un algoritmo de inversión perceptual de luminosidad. Los colores base claros se desplazan hacia el extremo oscuro del espectro, preservando las relaciones de tono y saturación. El resultado mantiene la jerarquía visual de la paleta original y resulta cómodo de ver sobre un fondo oscuro.
- Uso de los tokens exportados: La salida CSS incluye bloques :root y [data-theme="dark"] con todas las variables de token listas para pegar en tu proyecto. La salida JSON usa un formato plano clave-valor compatible con los patrones de la especificación Design Token. Arrástralo a tu herramienta de diseño o impórtalo mediante un script de compilación para un flujo totalmente automatizado.
Preguntas frecuentes
Los tokens de color son variables semánticas que representan colores en un sistema de diseño. En lugar de usar códigos hexadecimales en todas partes, usas nombres como --color-primary o --color-error-bg. Esto facilita actualizar los colores globalmente, implementar el modo oscuro y mantener la coherencia entre componentes. Nuestro generador online gratuito de tokens de color crea un conjunto completo a partir de 7 colores base.
Cada color base genera 9 variantes: base (el color original), light (mezclado con blanco), dark (mezclado con negro), hover (ligeramente más oscuro), active (más oscuro para estados presionados), bg (muy claro para fondos), border (apagado para bordes), text (negro o blanco para contraste legible) y muted (saturación reducida). Se generan variantes tanto para modo claro como para modo oscuro.
La adaptación al modo oscuro usa un algoritmo de inversión perceptual que mapea los valores de luminosidad del modo claro a sus equivalentes oscuros mediante una curva que preserva las relaciones de contraste relativo. La saturación se reduce ligeramente en modo oscuro porque los colores muy saturados pueden resultar incómodos de leer sobre fondos oscuros.
Sí. La variante de texto de cada token usa cálculos de luminancia WCAG para elegir automáticamente entre texto negro y blanco, garantizando al menos una relación de contraste de 7:1 sobre el color base. Esto cumple los requisitos WCAG AAA para texto normal — sin ajustes manuales.
Dos formatos: propiedades personalizadas CSS (con bloques :root y [data-theme="dark"] separados, listos para pegar en tu proyecto) y JSON (formato plano clave-valor compatible con los patrones de la especificación Design Token y herramientas como Style Dictionary).
Los nombres de los tokens siguen el patrón consistente --color-{categoría}-{variante}. Puedes renombrarlos después de copiarlos con un simple buscar y reemplazar — o modificar directamente la salida CSS/JSON en tu código.
Sí, este generador de tokens de color para sistemas de diseño es 100 % gratuito, sin registro, sin nivel premium y sin límites de uso. Todo el procesamiento se ejecuta en tu navegador.
Las 7 categorías (primario, secundario, acento, éxito, advertencia, error, info) cubren la mayoría de las necesidades de un sistema de diseño. Si necesitas categorías adicionales como surface, background, text o border en el nivel superior, puedes ejecutar la herramienta varias veces con diferentes colores base y combinar los resultados.