Respuesta directa
Un generador de tokens de color serializa el sistema revisado en propiedades personalizadas de CSS, bloques @theme de Tailwind CSS v4 y JSON DTCG, garantizando que el código coincida con la previsualización visual.
Cómo usar esta herramienta
Accede a la etapa de tokens
Abre el generador de tokens o continúa desde el verificador con el mismo documento del sistema de color.
Elige el formato de artefacto
Selecciona propiedades personalizadas de CSS, Tailwind v4 @theme o JSON DTCG. Cada exportación refleja las primitivas y alias revisados.
Copia o descarga el resultado
Copia al portapapeles o descarga el archivo. Las salidas incorporan sustitutos sRGB deterministas para colores de amplia gama.
Proyección fiel de artefactos y compatibilidad
Los tokens exportados representan fielmente el sistema auditado: escalas primitivas, alias semánticos y modos de tema. Los colores modernos de amplia gama incluyen alternativas sRGB perceptuales para evitar distorsiones en pantallas antiguas.
- Las exportaciones de CSS, Tailwind @theme y DTCG se mantienen perfectamente sincronizadas con la misma revisión del documento.
- No se requiere almacenamiento en servidores remotos ni inicio de sesión.
- El copiado y la descarga se degradan con seguridad si faltan permisos avanzados del navegador.
Ejemplos prácticos
Exportar escala Primary a Tailwind @theme
Entrada: Escala Primary 50–950 revisada + roles semánticos primary/on-primary
Salida: @theme { --color-primary-500: oklch(...); --color-primary: var(--color-primary-500); }
Genera variables de tema listas para frameworks sin errores de transcripción manual.
Limitaciones
- No envía tokens directamente a herramientas de diseño en la nube; copia o descarga los archivos localmente.
- Si tu entorno utiliza un dialecto propietario, debes mapear los alias DTCG en tu propia cadena de compilación.
Preguntas frecuentes
¿Las exportaciones coinciden con los valores del verificador?
Sí. Los artefactos proceden del mismo documento visualizado en la previsualización, eliminando cualquier desfase en la entrega.
¿Los tokens se suben a algún servidor?
No. La serialización, la copia al portapapeles y la descarga suceden en tu dispositivo. Los enlaces compartidos solo almacenan el estado en el hash.
¿Puedo volver al constructor sin perder las exportaciones?
Sí. Cambiar de etapa preserva el documento; volver a generar artefactos tras hacer cambios aplicará la última revisión.
Referencias y normas autorizadas
- W3C CSS Color Module Level 4 ↗ — Modern color functions serialized into CSS custom properties with sRGB fallbacks.
- W3C Relative Luminance Definition & Formula ↗ — Luminance guidance for documenting accessible token pairs in exported artifacts.