7 reglas de armoníacontraste WCAG12 formatos de exportaciónen tu navegador
Mira el color antes de comprometerte.
Paletas, conversores y un comprobador de contraste que muestran su trabajo. Abajo, un solo color pasa por todo: sus armonías, cómo se lee el texto encima, cómo se ve con daltonismo y el CSS al que se exporta.
#3563E9La comprobación de contraste del estudio elige el color del texto; la franja es la escala de tonos en nueve pasos.
- HEX
- #3563E9
- RGB
- 53 99 233
- HSL
- 225 80% 56%
- OKLCH
- 55.0% 0.209 265
- CMYK
- 77 58 0 9
Siete reglas para una paleta
Cada una aplicada al color de arriba.
- #3563E9#E9BB35
Complementaria
El tono opuesto en el círculo: máximo contraste, bueno para un acento.
- #3563E9#E96135#BDE935
Complementaria dividida
Los dos tonos a cada lado del opuesto: contraste con menos tensión.
- #67E03E#3E67E0#E03E67
Análoga
Vecinos en el círculo: esquemas tranquilos y cohesionados.
- #3563E9#E93563#63E935
Triádica
Tres tonos a igual distancia: viva pero equilibrada.
- #3563E9#BB35E9#E9BB35#63E935
Tetrádica
Dos pares complementarios: rica y la más difícil de equilibrar.
- #3563E9#E935BD#E9BB35#35E961
Cuadrada
Cuatro tonos a igual distancia: atrevida, mejor si uno manda con claridad.
- #0B1228#162F76#1746CF#5E7FE1#AFBEE9
Monocromática
Un tono en varias luminosidades: segura y discreta.
Antes de publicar
Dos cosas que una muestra no enseña.
¿Se lee el texto?
Cuatro colores de texto sobre el color de arriba, puntuados con la fórmula WCAG 2.1.
- Aa#FFFFFF5.11:1AA
- Aa#0B0E143.78:1AA texto grande
- Aa#A6B9EE2.62:1No pasa
- Aa#436CE61.10:1No pasa
¿Cómo se ve para todos?
Una paleta de cuatro colores como la ve la mayoría y como la ven cuatro tipos de daltonismo.
- Visión típica
- Protanopía
- Deuteranopía
- Tritanopía
- Acromatopsia
Lo que te llevas
La salida real del estudio para este color.
:root {
--brand-100: #d5ddf6;
--brand-300: #7693e9;
--brand-500: #184ada;
--brand-700: #132b73;
--brand-900: #050915;
}// Tailwind CSS v4 config
colors: {
'brand': {
'100': '#d5ddf6',
'300': '#7693e9',
'500': '#184ada',
'700': '#132b73',
'900': '#050915',
},
},- HEX List
- RGB List
- HSL List
- CSS Variables
- JSON
- SVG Palette
- Adobe ASE
- GIMP Palette
- CSV
- Tailwind Config
- SCSS Variables
- Style Dictionary
Las herramientas
9 páginas, cada una para una tarea.
Generador de paletas
Cree paletas de colores. Generador gratuito.
Conversor de colores
Convierta colores. Gratuito.
Verificador de contraste
Verifique el contraste. Gratuito.
Creador de temas
Cree sistemas de diseño desde un color.
Generador de degradados
Cree degradados CSS. Gratuito.
Tokens de diseño
Exporte colores como tokens.
Colores de marca
Paletas de colores de marcas.
Nombres de colores
Explore colores con nombres.
Generador de colores aleatorios
Genere colores aleatorios. Generador gratuito.
Preguntas frecuentes
¿Cómo funciona el Creador de temas?
Ingrese un color primario y generamos un sistema de diseño completo: escalas de 11 pasos (50-950) para primary, secondary, accent y neutral, más colores semánticos, temas claro y oscuro, y tokens para desarrolladores. Elija entre 30+ estilos, 20+ tipos de proyecto y 15+ personalidades de marca.
¿Puedo exportar tokens de diseño?
Sí. Exporte el sistema de diseño completo como propiedades CSS personalizadas, configuración Tailwind CSS v4, variables SCSS, LESS o JSON Style Dictionary — listo para copiar y pegar en su proyecto.
¿Almacenan mis datos?
No. Todo funciona en su navegador. Los favoritos se guardan en localStorage y nunca salen de su dispositivo.
¿Cómo funciona la verificación de accesibilidad?
El Creador de temas verifica automáticamente cada par texto-fondo para cumplimiento WCAG 2.1 AA y ajusta los colores cuando es necesario. La pestaña de verificación de contraste proporciona análisis detallado AA/AAA.
Elige un color
Empieza con un color y llévate la paleta, el informe de contraste y los tokens.
Abrir el estudio