# Sincronizador de paleta Tailwind Introduce HEX, elige esquema de nombres (escala 50–950 / nombre único / anidamiento) y genera el fragmento theme.extend.colors de tailwind.config.ts con niveles WCAG AA/AAA por color. Modo oscuro opcional. > Página canónica: https://elysiatools.com/es/tools/tailwind-color-palette-sync - **Categoría:** Development - **Palabras clave:** tailwind, config tailwind, paleta, tokens, wcag, contraste, modo oscuro ## Descripción general Convierte una lista de HEX en un bloque `theme.extend.colors` listo para pegar — con comprobaciones WCAG incluidas. **Qué das.** Un HEX por línea. Puedes prefijar un nombre: `brand: #3b82f6`. HEX desnudos se nombran `color1`, etc. **Esquemas.** Escala (50–950, 11 pasos), nombre único, o anidamiento de objetos. La escala genera una paleta completa interpolando hacia blanco/negro en HSL. **WCAG.** Cada tono se etiqueta AAA (≥7), AA (≥4.5), AA-Large (≥3) o Fail frente a fondo blanco/negro. **Modo oscuro.** Opcional, segunda lista de HEX → configuración separada. **Matemática.** Interpolación de luminosidad HSL; la entrada ancla el paso 500. ## Entradas - **Colores (un HEX por línea, o "name: HEX")** (textarea): brand: #3b82f6 accent: #10b981 #f59e0b - **Esquema de nombres** (select) - **Incluir colores modo oscuro** (checkbox) - **Colores modo oscuro (opcional, mismo formato)** (textarea): brand: #60a5fa accent: #34d399 ## Cuándo usarlo - Cuando necesitas expandir un color de marca único en una escala completa de 11 pasos (50–950) compatible con Tailwind CSS. - Al diseñar interfaces accesibles que requieren verificar el contraste WCAG de cada tono frente a fondos claros y oscuros. - Cuando configuras el soporte de modo oscuro en Tailwind y necesitas sincronizar los tokens de color correspondientes de forma estructurada. ## Cómo funciona - Introduce uno o varios códigos HEX en la entrada de texto, asignándoles opcionalmente un nombre identificador. - Selecciona el esquema de nombres deseado: escala de 11 pasos, token único o estructura de objetos anidados. - Activa la opción de modo oscuro si necesitas mapear un conjunto alternativo de colores para la interfaz nocturna. - Copia el código de configuración generado que incluye las anotaciones de contraste WCAG para cada nivel de luminosidad. ## Casos de uso - Creación de paletas de colores corporativas accesibles y listas para integrar en proyectos de Tailwind CSS. - Generación de tokens de diseño consistentes con soporte nativo para temas claros y oscuros. - Auditoría rápida de contraste WCAG para paletas de colores existentes en aplicaciones web. ## Preguntas frecuentes ### ¿Cómo calcula el generador las escalas de colores? Utiliza interpolación en el espacio de color HSL, tomando el color HEX de entrada como el paso 500 y aclarando u oscureciendo hacia el blanco y el negro. ### ¿Qué significan las etiquetas WCAG en el resultado? Indican si el tono cumple con los estándares de contraste AAA, AA o AA-Large frente a fondos blancos y negros para asegurar la legibilidad. ### ¿Puedo usar nombres personalizados para mis colores? Sí, puedes definir el formato escribiendo 'nombre: #HEX' en cada línea de la lista de entrada. ### ¿Qué diferencia hay entre el esquema de escala y el anidado? El esquema de escala genera nombres planos como 'brand-500', mientras que el anidado agrupa los tonos dentro de un objeto como 'brand: { 500: [...] }'. ### ¿Es obligatorio incluir colores para el modo oscuro? No, la configuración de modo oscuro es completamente opcional y se puede desactivar desmarcando la casilla correspondiente. ## Herramientas relacionadas - [Generador de ideas de dominios con IA](https://elysiatools.com/es/tools/ai-domain-name-idea-generator): Introduce palabras clave de marca y la IA genera hasta 10 ideas de dominio, filtrando los ya registrados con DNS + RDAP. Para emprendedores y desarrolladores. - [Auditor de dependencias de package.json](https://elysiatools.com/es/tools/package-json-dependency-auditor): Audita un package.json en busca de higiene de dependencias y calidad de rangos de versión, y opcionalmente inspecciona el árbol transitivo desde package-lock.json o yarn.lock. Señala duplicados, comodines o pre-release, claves sin ordenar, metadatos ausentes y dependencias runtime/dev mal clasificadas. - [Convertidor de espacios de color](https://elysiatools.com/es/tools/color-space-converter): Convierte colores entre HEX, RGB, HSL, CIELAB y Display-P3 con salida CSS y control de gama. - [Generador y Analizador de JWK](https://elysiatools.com/es/tools/jwk-generator): Genera JSON Web Keys (JWK) para RSA, EC (P-256/P-384/P-521/secp256k1) y OKP (Ed25519/Ed448/X25519/X448), o analiza un JWK existente para inspeccionar parámetros, huella y metadatos - [Coach de cycle time y throughput Kanban](https://elysiatools.com/es/tools/kanban-cycle-time-throughput-coach): Importa marcas de creado→iniciado→resuelto desde CSV (estilo Jira o simple) y obtén métricas de flujo como las leen los agile coaches: percentiles de lead/cycle time, edad del WIP, throughput por día/semana/mes, un diagrama de flujo acumulado y una verificación de la Ley de Little. - [Generador de PKCE Code Verifier y Challenge](https://elysiatools.com/es/tools/pkce-code-verifier-generator): Genera, valida y verifica pares code_verifier / code_challenge PKCE (RFC 7636) de OAuth2 / OIDC. Tres modos: (1) generar un par nuevo a partir de bytes aleatorios criptográficos (256/384/512/768 bits), (2) auditar un verifier existente frente al RFC — longitud (43–128), charset \[A-Za-z0-9-._~\] y ≥256 bits de entropía, y (3) verificar un par recomputando BASE64URL(SHA256(verifier)). Opcionalmente construye la URL completa de autorización y el cuerpo del intercambio de token. Complementa al nonce-genérico (que solo emite el par) con auditoría de cumplimiento RFC y verificación de pares. - [Comprobador de cabeceras de seguridad](https://elysiatools.com/es/tools/security-headers-checker): Audita las cabeceras de respuesta HTTP para cumplimiento de seguridad — analiza las cabeceras sin procesar que pegas (sin red) y las califica frente al conjunto de cabeceras seguras OWASP con comprobaciones a nivel de valor: HSTS max-age, CSP unsafe-inline/eval, X-Content-Type-Options, Referrer-Policy, Permissions-Policy, COOP/COEP/CORP y más. Devuelve una nota (A+ a F) más hallazgos por cabecera con recomendaciones listas para copiar. - [Constructor de ejes e instancias de fuentes variables y CSS font-variation-settings](https://elysiatools.com/es/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): Sube una fuente variable (TTF/OTF/WOFF/WOFF2) para inspeccionar sus ejes fvar e instancias con nombre, previsualizar la interpolación en vivo en el navegador y generar CSS font-variation-settings listo para pegar, las propiedades de alto nivel equivalentes y un bloque @font-face variable. ## Ejemplos - [Ejemplos de Códigos de Color](https://elysiatools.com/es/samples/color-code): Colección de códigos de color en varios formatos (Hex, RGB, HSL, colores con nombre) para pruebas de validación - [Ejemplos de Tailwind CSS](https://elysiatools.com/es/samples/tailwind-css): Ejemplos de Tailwind CSS - Framework CSS utilitario primero con diseño receptivo, componentes y configuración personalizada - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Java](https://elysiatools.com/es/samples/android-image-processing-java): Ejemplos de procesamiento de imágenes Android Java incluyendo lectura/escritura, escalado y conversión de formato