¿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.

Elysia Tools

Navegación

Development

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.

Detalles

Qué te ayuda a hacer esta herramienta

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.

Ejecución

Ejecutar esta herramienta

Completa el formulario, ejecuta la herramienta y revisa el resultado en un solo lugar.

Ejecuciones de ejemplo preparadas

Haz clic en un ejemplo para completar el formulario automáticamente. Los archivos aún deben subirse.

2 ejemplos

Paleta de marca con escala completa

Dos colores de marca expandidos a escalas de 11 pasos con niveles WCAG, formato anidado.

{
  "type": "html"
}

Tokens de valor único + modo oscuro

Tres colores como tokens únicos, con conjunto de modo oscuro.

{
  "type": "html"
}

Entradas

Completa los campos necesarios y ejecuta la herramienta.

4 opciones

ContenidoPega o escribe los valores principales.2

Colores (un HEX por línea, o "name: HEX")textareaObligatorioColores modo oscuro (opcional, mismo formato)textareaOpcional

AjustesAjusta formatos, rangos, números y modos.1

Esquema de nombresselectOpcional

InterruptoresActiva o desactiva comportamientos opcionales.1

Incluir colores modo oscurocheckboxOpcionalActivado si está marcado

Resultado

Listo para ejecutar

Al ejecutar la herramienta, aquí verás archivos, texto, datos estructurados o salida en streaming.

Ejemplos

Ejemplos que encajan con esta herramienta

Relacionado

Sincronizador de paleta Tailwind

Qué te ayuda a hacer esta herramienta

Ejecutar esta herramienta

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Ejemplos que encajan con esta herramienta

Continuar con herramientas y temas relacionados

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Resumen

Cuándo usarlo

Cómo funciona

Casos de uso

Ejemplos

1. Creación de escala de marca accesible

2. Sincronización de colores con modo oscuro

Preguntas frecuentes

Ejemplos de Códigos de Color

Ejemplos de Tailwind CSS

Ejemplos de Procesamiento de Imágenes Web Python

Ejemplos de Procesamiento de Imágenes Android Java

Generador de ideas de dominios con IA

Auditor de dependencias de package.json

Convertidor de espacios de color

Generador y Analizador de JWK

Herramientas de codificacion y conversion de audio

Herramientas de conversion de formatos de imagen y exportacion animada

Herramientas de intercambio JSON y traduccion de formatos

Herramientas de conversion de espacios de color para web e impresion