Información del código de color #337C80
Todas las conversiones, armonías y comprobaciones de accesibilidad que necesita para diseñar con confianza.
Conversión de color
Genere valores en múltiples modelos de color en un solo lugar.
#337C80
≈≈ Azul Acero
Tarjetas de color de referencia
Un ΔE más bajo significa una coincidencia visual más cercana
Tintes y sombras
Explore cómo se comporta #337C80 al mezclarlo con blanco o negro. Estas muestras son perfectas para estados de 'hover', sombras y fondos.
Pase el ratón por encima para copiar cualquier valor hexadecimal y reutilizarlo en su interfaz.
Sombras
0–100%Tintes
0–100%Casos de uso comunes
- Estados de componentes de UI (hover, activo, deshabilitado)
- Creación de profundidad con sombras y reflejos
- Construcción de sistemas de color consistentes
Sistema de diseño
Consejo de sistema de diseño
Estas variaciones forman la base de una paleta cohesiva. Exporte para mantener alineados a marketing, producto e ingeniería.
Armonías de color
Cree paletas equilibradas al instante con armonías generadas a partir de #337C80.
Haga clic en cualquier muestra para abrir su página de detalles y seguir explorando.
Cómo usar
Elija un color dominante y deje que los tonos de apoyo actúen como acentos para tipografía, superficies y botones de llamada a la acción.
Por qué es importante
Las armonías equilibradas comunican intención (calma, energía, calidad) sin sobrecargar su diseño.
Complementaria
Tonos opuestos que crean impacto y contraste audaz.
Ideal para
CTAs de alto impacto, logotipos y secciones principales
Análoga
Tonos vecinos para gradientes naturales y fluidos.
Ideal para
Paneles de control relajantes inspirados en la naturaleza
Triádica
Tres tonos espaciados uniformemente para un equilibrio lúdico.
Ideal para
Marca lúdica y diseños editoriales
Tetrádica
Dos pares complementarios que ofrecen una rica variedad.
Ideal para
Ilustraciones y experimentos de marketing
Contraste de accesibilidad
Compruebe la legibilidad de #337C80 con colores de texto comunes para que cada visitante disfrute de una experiencia clara.
Utilice AA como base para el cuerpo del texto y AAA para accesibilidad premium.
Formatos técnicos
Desbloquee espacios de color profesionales como XYZ, LAB, variantes CMYK y perfiles listos para exportar.
Formatos prácticos
Obtenga simulaciones de impresión, mapeos LED y órdenes de bytes listos para desarrolladores.
Análisis de color
Profundice en datos espectrales, informes de dominancia y análisis avanzados.
Simulador de daltonismo
Vea cómo aparece #337C80 en las deficiencias comunes de la visión del color.
Aspectos creativos
Explore asociaciones estacionales, señales emocionales y ocurrencias naturales.
Guía de diseño
Equilibrio
Trate #337C80 como un punto destacado. Combínelo con neutros y un tono de apoyo para evitar la sobrecarga visual.
Contraste
Pruebe combinaciones con contenido real. Un mayor contraste mejora el escaneo, la legibilidad y las conversiones.
Armonía
Utilice tintes más claros para superficies, el color base para primarios y sombras más oscuras para estados de 'hover' o pulsado.
¿Necesita otro color?
Vuelva al selector de color para cargar imágenes, generar paletas y explorar nuevas relaciones de color.
Abrir selector de color