Generador de Tonos de Color
Crea una paleta de colores completa con matices, tonos y puntuaciones de contraste WCAG
Generador de Tonos de Color
Ejemplos de Uso
Los matices más claros (50-200) funcionan mejor para fondos y resaltados sutiles.
Los tonos medios (400-600) son ideales para botones, enlaces y elementos primarios.
Los tonos más oscuros (700-900) son perfectos para encabezados y texto de alto contraste.
Siempre verifica el contraste WCAG: AA requiere 4.5:1 para texto normal.
Contraste
WCAG contrast requirements
- AA: 4.5:1 (Normal text)
- AA Grande: 3:1 (Large text)
- AAA: 7:1 (Normal text)
Características
Paleta Completa 50-900
Genera una paleta completa estilo Tailwind desde cualquier color base
Contraste WCAG
Cada tono muestra puntuaciones de contraste contra fondos blancos y negros
Múltiples Formatos de Exportación
Copia como variables CSS, SCSS, configuración de Tailwind o JSON
Privado y Sin Conexión
Se ejecuta completamente en tu navegador, sin envío de datos al servidor
Cómo Usar
Elige un Color Base
Selecciona un color con el selector o introduce un valor HEX, RGB o HSL.
Revisa la Paleta
Observa los tonos generados con indicadores de contraste WCAG para accesibilidad.
Exportar o Copiar
Copia colores individuales o exporta la paleta completa como CSS, SCSS, Tailwind o JSON.
Preguntas Frecuentes
¿Qué es un Generador de Tonos de Color?
Un Generador de Tonos de Color crea una gama completa de matices y tonos a partir de un solo color base. En lugar de adivinar qué variación más clara o más oscura usar, obtienes una paleta consistente que funciona en botones, fondos, bordes y texto. Esta herramienta produce una escala de 10 pasos desde 50 (más claro) a 900 (más oscuro), igualando el popular sistema de colores de Tailwind CSS.
Cómo Funciona
El generador convierte tu color base a HSL y ajusta el valor de luminosidad para crear 10 pasos distribuidos uniformemente. Luego cada tono se evalúa contra fondos blancos y negros usando la fórmula de contraste WCAG 2.1, para que sepas inmediatamente qué colores son accesibles para el texto. Todo se ejecuta en tu navegador sin comunicación con el servidor.
Casos de Uso Comunes
Los diseñadores usan generadores de tonos para construir paletas de marca, crear tokens de diseño y mantener la consistencia visual en un producto. A los desarrolladores les encanta para generar entradas de configuración de Tailwind o propiedades personalizadas de CSS. También son esenciales para auditorías de accesibilidad, ayudándote a elegir pares de texto y fondo que cumplen los requisitos WCAG AA o AAA.
Privacidad y Seguridad
Este Generador de Tonos de Color es 100% del lado del cliente. Todos los cálculos de color ocurren en tu navegador usando JavaScript. Ningún color, paleta o exportación se envía a ningún servidor. Ninguna cookie rastrea tus elecciones y nada se almacena más allá de tu sesión actual. Seguro para trabajo de marca confidencial y sistemas de diseño internos.
Teoría del Color para Diseño Web - Tonos y Contraste WCAG
Domina la teoría del color, los tonos, los estándares WCAG y cómo construir un sistema de diseño.