El azul marino es un color sofisticado y sereno con sutiles matices púrpuras que realzan su sentido de lujo y elegancia. Este tono profundo y rico se encuentra en la sección azul-violeta del círculo cromático, denotando un tono más frío. Incluye matices como azul medianoche y azul tinta.
El azul marino se define por los siguientes códigos y valores de color para asegurar la consistencia en varias plataformas y dispositivos digitales.
- Código HEX: #000080
- Valor RGB: 0% rojo, 0% verde y 50.2% azul
Las consideraciones de accesibilidad juegan un papel crucial en las elecciones de color de diseño UX y UI. Figma ofrece plugins en la Comunidad para asegurarse de que tus diseños cumplan con las Pautas de Accesibilidad de Contenidos Web.
Aquí hay algunas formas de usar el azul marino en tus diseños:
- Transmitir autoridad y confianza. Usa azul marino para elementos que requieran que los usuarios sientan una sensación de fiabilidad y seguridad, como pantallas de inicio de sesión, interfaces de transacciones financieras o aplicaciones de salud y bienestar. La asociación del color con la autoridad y la confiabilidad lo hace ideal para plataformas donde la confianza es primordial.
- Mejorar la productividad y el enfoque. Aplica azul marino en aplicaciones relacionadas con el trabajo o el estudio, herramientas de gestión de proyectos o cualquier UI donde la concentración sea clave. Con efectos calmantes que ayudan a reducir el estrés y aumentar el enfoque, es perfecto para fondos de paneles de control o barras de menú.
- Crear una estética profesional. La elegancia y sofisticación del azul marino se prestan bien a sitios de redes profesionales, sitios web corporativos o plataformas de servicios premium. Úsalo para encabezados, pies de página y elementos clave de UI para elevar el diseño general.
- Equilibrar con colores complementarios. Combina azul marino con tonos más cálidos como coral, crema o dorado para un esquema de color equilibrado y atractivo. Este enfoque puede añadir vitalidad al diseño, haciendo que los botones de llamada a la acción o los destacados resalten sin abrumar al usuario.
Ten en cuenta que el color y su significado pueden cambiar de una cultura a otra, y en cualquier momento. Si estás diseñando para una audiencia global, investiga las consideraciones de color para tus regiones específicas.
Para variaciones dentro del mismo espectro profundo y autoritario que el azul marino, considera:
- Azul oscuro (#191970) es ligeramente más oscuro, asemejándose al cielo a medianoche, ofreciendo una profundidad profunda similar al azul marino.
- Azul real (#305CDE) introduce una calidad más vibrante y luminosa, manteniendo la esencia digna del azul marino.
- Índigo (#560591) fusiona el azul profundo del marino con un toque de violeta, presentando una alternativa mística e introspectiva.
- Azul prusia (#003153) ofrece un toque más de verde, resultando en un tono que es tanto imponente como ligeramente más suave que el azul marino.
Para complementar los tonos profundos del azul marino, considera combinarlo con:
- Blanco (#FFFFFF) proporciona un contraste limpio y marcado que resalta la sofisticación del azul marino.
- Dorado (#EFBF04) añade un toque de lujo, creando una paleta regia y refinada cuando se combina con azul marino.
- Beige cálido (#F5F5DC) introduce un equilibrio neutro y terroso que suaviza la intensidad del azul marino sin disminuir su elegancia.
- Gris frío (#CBCBCB) ofrece un fondo moderno y discreto que permite que el azul marino destaque en un entorno contemporáneo.
- Coral (#FF7F50) aporta un contraste vibrante y animado, infundiendo energía en la calma compuesta del azul marino.
Otros colores que vale la pena considerar incluyen verde salvia para un aspecto natural y armonioso; plata para un giro moderno y elegante; y naranja quemado para un ambiente audaz y otoñal.
Aunque el azul marino es versátil, puede chocar con:
- Verde brillante (#00FF00) puede ser demasiado vibrante y puede restar elegancia al azul marino, creando un efecto visual discordante.
- Rosa neón (#FF1493) presenta un contraste excesivamente brillante que puede abrumar la sofisticación natural del azul marino.
- Azul eléctrico (#7DF9FF), con su alta intensidad, podría competir con la profundidad del azul marino, llevando a una experiencia visual discordante.
- Púrpura (#800080), aunque rico, puede crear una paleta pesada cuando se combina con azul marino, potencialmente llevando a una atmósfera sombría.
- Amarillo lima (#CCFF00), con su tono brillante y ácido, puede interrumpir la armonía del azul marino, llevando a un equilibrio chocante e incómodo.
El azul marino se asocia comúnmente con la autoridad y el profesionalismo. Transmite estabilidad, fiabilidad y sofisticación. Este color a menudo representa profundidad y experiencia.
En la psicología del color, se cree que el azul marino promueve la claridad mental y la concentración. Se considera un color de intelecto, sabiduría y poder. El tono profundo de azul tiene un efecto calmante que puede ayudar a enfocar los pensamientos, reducir el estrés y aumentar la productividad.
El azul marino es una elección popular en el diseño UI/UX, particularmente para la marca corporativa y las plataformas educativas. A menudo se usa para comunicar confiabilidad y profesionalismo. En el diseño digital, el azul marino puede usarse como color de marca para establecer una base sólida o como color de acento para resaltar características clave. Combina bien con muchos otros colores, proporcionando contraste e interés visual mientras mantiene un aire de formalidad y elegancia.
El azul marino tiene una rica historia que se remonta a 1748 cuando fue elegido deliberadamente para los uniformes de la Marina Real Británica. La decisión se basó en sus propiedades de solidez del color y su practicidad para camuflar la suciedad y el desgaste, haciéndolo una elección ideal para largos viajes oceánicos. La adopción del azul marino por la Marina Real estableció su fuerte asociación con la autoridad marítima y la disciplina, y llevó a otras marinas en todo el mundo a adoptar esquemas de color similares.
Para el siglo XX, el azul marino pasó de ser un color marítimo a un básico en los guardarropas civiles. El color simbolizaba la elegancia discreta en la moda, la vestimenta de negocios e incluso el diseño de interiores. Equilibra sus orígenes en la utilidad naval con un atractivo moderno de sofisticación, convirtiéndolo en un color versátil que ha resistido la prueba del tiempo. El azul marino sigue siendo venerado por su profundidad y versatilidad, cerrando la brecha entre el diseño tradicional y contemporáneo.
Variantes de color
Sombras
Tintes
Tonos
Tonalidades
Armonías de color
Complementaria
Complementaria dividida
Monocromática
Análoga
Triádica
Square
Paletas personalizadas
Azules Obsidiana
Brillo Nocturno
Mancha de Tinta
Comprobador de contraste
Contraste 16,01
- Texto largo
#000080
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Aprobar | Aprobar | |
Aprobar | Aprobar | |
Aprobar | Aprobar |
Contraste 1,31
- Texto largo
#000080
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Desaprobar | Desaprobar | |
Desaprobar | Desaprobar | |
Desaprobar | Desaprobar |
Simulaciones de color
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
El color hexadecimal #000080, también llamado azul marino, tiene valores RGB de R:0, G:0, B:128 y valores CMYK de C:100, M:100, Y:0, K:50.
| VALUE | CSS | |
|---|---|---|
| HEX | #000080 | #000080 |
| RGB DECIMAL | 0, 0, 128 | RGB(0,0,128) |
| RGB PERCENTAGE | 0.0, 0.0, 50.2 | RGB(0.0%,0.0%,50.2%) |
| CMYK | 100, 100, 0, 50 | |
| HSL | HSL(240.0, 100.0%, 25.1%) | HSL(240.0, 100.0%, 25.1%) |
| HSV (OR HSB) | 240.0°, 100.0, 50.2 | |
| WEB SAFE | #00153 | #00153 |
| BINARY | 00000000, 00000000, 10000000 | |
| iOS - SwiftUI | Color(red: 0.000, green: 0.000, blue: 0.502) | |
| iOS - UIKit | UIColor(red: 0.000, green: 0.000, blue: 0.502, alpha: 1) | |
| Android - Compose | Color(0xFF000080) |