#0F5F9A Atlántico Profundo

    Genera códigos de color, variaciones, armonías y verifica relaciones de contraste.

    Conversión de Color

    HEX

    #0f5f9a

    HEX
    #0f5f9a
    HSL
    205, 82, 33
    RGB
    15, 95, 154
    XYZ
    10, 11, 32
    CMYK
    90, 38, 0, 40
    LUV
    39,-17,-50
    LAB
    39, 0, -38
    HWB
    205, 6, 40

    Variaciones

    El propósito de esta sección es producir con precisión tonos (añadido blanco puro) y sombras (añadido negro puro) de tu color seleccionado en incrementos del 10%.

    Consejo profesional: Usa sombras para estados de hover y sombras, tonos para resaltes y fondos.

    Sombras

    Variaciones más oscuras creadas al añadir negro a tu color base.

    Tonos

    Variaciones más claras creadas al añadir blanco a tu color base.

    Casos de uso comunes

    • Estados de componentes UI (hover, activo, deshabilitado)
    • Creando profundidad con sombras y resaltes
    • Construyendo sistemas de color consistentes

    Consejo para el sistema de diseño

    Estas variaciones forman la base de una paleta de colores cohesiva. Expórtalas para mantener la consistencia en todo tu proyecto.

    Combinaciones de colores

    Cada armonía tiene su propio estado de ánimo. Usa armonías para idear combinaciones de colores que funcionen bien juntas.

    Cómo usar

    Haz clic en cualquier color para copiar su valor hex. Estas combinaciones están matemáticamente probadas para crear armonía visual.

    Por qué es importante

    Las armonías de color crean equilibrio y evocan emociones específicas en tus diseños.

    Complemento

    Un color y su opuesto en la rueda de color, +180 grados de tono. Alto contraste.

    #0f5f9a
    Mejor para: Diseños de alto impacto, CTAs, logos

    Complementario dividido

    Un color y dos adyacentes a su complemento, +/-30 grados de tono del valor opuesto al color principal. Audaz como un complemento directo, pero más versátil.

    Mejor para: Diseños vibrantes pero equilibrados

    Triádico

    Tres colores espaciados uniformemente en la rueda de color, cada uno a 120 grados de tono. Lo mejor es permitir que un color domine y usar los otros como acentos.

    Mejor para: Diseños divertidos y enérgicos

    Análogo

    Tres colores de la misma luminancia y saturación con tonos adyacentes en la rueda de color, a 30 grados de distancia. Transiciones suaves.

    Mejor para: Interfaces inspiradas en la naturaleza, calmantes

    Monocromático

    Tres colores del mismo tono con valores de luminancia +/-50%. Sutil y refinado.

    Mejor para: Diseños minimalistas y sofisticados

    Tetrádico

    Dos conjuntos de colores complementarios, separados por 60 grados de tono.

    Mejor para: Esquemas de color ricos y diversos

    Principios de la teoría del color

    Equilibrio

    Usa un color dominante, apóyalo con secundarios y acentúa con moderación.

    Contraste

    Asegura suficiente contraste para legibilidad y accesibilidad.

    Armonía

    Los colores deben trabajar juntos para crear una experiencia visual unificada.

    Verificador de contraste de color

    Prueba combinaciones de colores para asegurarte de que cumplan con los estándares de accesibilidad WCAG para la legibilidad del texto.

    Color del texto
    Color de fondo
    Contraste
    1.00
    Fail
    Muy pobre
    Texto pequeño
    ✖︎
    Texto grande
    ✖︎
    Estándares WCAG
    AA:Ratio mínimo de contraste de 4.5:1 para texto normal y 3:1 para texto grande. Requerido para la mayoría de los sitios web.
    AAA:Ratio mejorado de contraste de 7:1 para texto normal y 4.5:1 para texto grande. Recomendado para una accesibilidad óptima.
    Contraste insuficiente para todos los tamaños de texto - no cumple con los estándares WCAG.

    Comprobador de contraste avanzado

    Ajusta con precisión con deslizadores, múltiples vistas previas y más

    Todo el mundo es un genio. Pero si juzgas a un pez por su habilidad para trepar un árbol, vivirá toda su vida creyendo que es estúpido.

    - Albert Einstein

    Formatos Técnicos

    Formatos prácticos

    Análisis de color

    Simulador de daltonismo

    Aspectos creativos

    Preguntas frecuentes

    ¿Qué color es #0F5F9A?
    #0F5F9A es Atlántico Profundo – Un azul profundo con matices oceánicos y una claridad fría que recuerda agua en sombra. Evoca confianza serena y una curiosa energía contenida, como mirar hacia el horizonte antes de la tormenta.
    ¿Qué simboliza Atlántico Profundo?
    seguridad financiera, profundidad emocional, sabiduría práctica, comunicación clara, vínculo con el mar y la navegación. En culturas occidentales el azul profundo comunica profesionalismo y fiabilidad; en Japón tonos profundos se asocian con formalidad y respeto; en culturas mediterráneas y latinoamericanas remite a tradición marítima y artesanía cerámica.
    ¿Dónde se usa Atlántico Profundo en el diseño?
    En un espacio o interfaz, este azul estabiliza la percepción y reduce la distracción, favoreciendo la atención sostenida. Al ser intenso pero no extremadamente oscuro, equilibra profesionalismo con accesibilidad emocional.
    ¿Qué colores combinan bien con Atlántico Profundo?
    colorCode.seoFaqPairingAnswer #9A5C0F: Complementario cálido: crea contraste de atención inmediato ideal para botones y detalles (armonía complementaria).. #0F7B9A: Análogo cian: suaviza la paleta hacia tonos marinos y acuáticos para composiciones coherentes y elegantes (armonía análoga).. #9A0F5F: Triádico profundo: introduce energía rica y sofisticada sin competir por legibilidad en acentos y patrones (armonía triádica)..
    ¿Cómo afecta Atlántico Profundo el estado de ánimo?
    Confianza serena con autoridad contenida Produce una sensación primaria de confianza tranquila y control. colorCode.seoFaqMoodTraits
    ¿Qué industrias usan Atlántico Profundo?
    colorCode.seoFaqIndustriesAnswercolorCode.seoFaqIndustriesArchetypes
    ¿Cuál es la historia de Atlántico Profundo?
    La tonalidad que hoy llamamos Atlántico Profundo se aproxima históricamente al azul Prusia y a las variaciones de azul cobalto utilizadas desde el siglo XVIII; los pigmentos como el azul de Prusia (descubierto en Berlín, 1704) y el azul cobalto dieron base a azules intensos con buena estabilidad y saturación.
    ¿Cómo usar Atlántico Profundo en el diseño?
    Mantener contraste y proporción: usar #0F5F9A como ancla y equilibrarlo con acentos cálidos y neutrales para conservar legibilidad y calidez.colorCode.seoFaqDesignDo
    ¿Es Atlántico Profundo accesible?
    colorCode.seoFaqAccessibilityAnswer Cumple con WCAG AA para texto normal y grande.