20 Paletas de Cores Azul Marinho e Azul Escuro com Códigos Hex

As paletas azul marinho são uma opção ideal quando você precisa de confiança instantânea, estrutura e uma sensação premium. Eles podem ler modernos na UI, atemporais na branding e aconchegantes em interiores-dependendo dos sotaques que você emparelha com eles.

Abaixo estão 20 ideias de paleta de cores azul escuro azul marinho com códigos hexagonais, além de dicas práticas e prompts do Media.io para que você possa gerar visuais correspondentes rapidamente.

Por que as paletas azul escuro funcionam tão bem

O azul marinho fica em um ponto doce entre a autoridade do preto e a clareza do azul, por isso se sente confiante sem se tornar duro. É por isso que é comum em finanças, SaaS e sistemas de design corporativo onde a credibilidade importa.

Também cria profundidade instantânea. Uma base marinha faz com que os sotaques mais brilhantes (azul, ouro, coral, hortelã ou até neon) pareçam mais intencionais porque o fundo naturalmente "enquadra" elementos interativos e informações-chave.

Finalmente, a marinha é versátil em todos os meios. Ele segura na impressão, lê-se bem nas telas e combina perfeitamente com tons neutros quentes (marfim, aveia, cinza) e tons frios (periwinkle, azul gelo), facilitando a escala em uma paleta completa da marca.

20+ ideias de paleta de cores azul escuro azul marinho (com códigos hexagonais)

1) Porto da Meia-Noite

hexagonal:#0B132B#1C2541#3A506B#5BC0BE#F4F1DE

humor:Calmo, marítimo, sofisticado

Melhor para:saas landing page Herói

Calma e marítima, esta mistura parece luz da lua em águas profundas com um sotaque fresco de brisa marinha. Use a marinha mais escura para cabeçalhos e navegação, em seguida, apoie-se no azul para CTAs que aparecem sem parecer neon. Marfim quente mantém as seções legíveis e evita que o layout fique muito pesado. Dica: reserve o azul para uma ação primária por visualização para manter a hierarquia limpa.

Exemplo de imagem de midnight harbor gerado usando media.io

Media.io

Media.io é um estúdio de IA online para criar e editar vídeo, imagem e áudio em seu navegador.

Experimente agora de graça

2) Queda da noite de cobalto

hexagonal:#0A0F2C#101B4D#1E3A8A#A7C7FF#EEF2FF

humor:Elegante, avançado em tecnologia, focado

Melhor para:mockup da UI do painel

Elegantes e focados, esses tons se lêem como um horizonte de cidade iluminado por destaques de cobalto. Construa profundidade usando o azul marinho quase preto para as barras laterais e o azul mais brilhante para estados ativos e gráficos. Pale periwinkle e off-white mantêm as grades de dados legíveis e reduzem a fadiga ocular. Dica: Emparelhe o cobalto com tons sutis de 10-15% para os estados de paira e seleção.

Exemplo de imagem de cobalt nightfall gerado usando media.io

3) Tinta e cobre

hexagonal:#081027#111D3B#2B2F4A#B87333#F2E9E4

humor:Luxuoso, editorial, Quente

Melhor para:Identidade de marca premium

Luxuoso e editorial, evoca tinta escura em papel texturizado com um brilho de folha de cobre. Essas combinações de cores azul marinho escuro brilham em logotipos, monogramas e embalagens onde você quer drama contido. Mantenha o cobre como um destaque (regras, ícones, tipo pequeno) e deixe o branco quente fazer o trabalho pesado para a legibilidade. Dica: Teste o cobre em acabamentos foscos e brilhantes para escolher o calor certo.

Exemplo de imagem de tinta e cobre gerado usando media.io

4) Linho tempestuoso

hexagonal:#0D1B2A#1B263B#415A77#E0E1DD#C7BEB6

humor:Tranquilo, natural, discreto

Melhor para:interior moderno da sala de estar

Tranquilo e natural, parece nuvens de tempestade sobre linho macio e pedra. Use os azuis profundos para embutidos, paredes de acento ou armários, e equilibre com os neutros claros em superfícies maiores. O tom cinza conecta madeiras quentes e tintas frias, fazendo com que toda a sala pareça intencional. Dica: Adicione textura — bouclé, linho, gesso fosco — para manter a paleta plana.

Exemplo de imagem de stormy linen gerado usando media.io

5) Sapphire Citrus

hexagonal:#081A3A#0F2E5E#1D4ED8#FBBF24#FFF7ED

humor:Enérgico, ousado, brincalhão

Melhor para:Gráfico promocional de mídia social

Energético e forte, é como uma luz de safira cortando uma brilhante explosão de cítricos. Use o amarelo dourado com moderação para etiquetas de preço, crachás ou estatísticas-chave para que ele se lê como ênfase intencional. O branco cremoso impede que os azuis sobrecarreguem pequenas telas móveis. Dica: Mantenha o texto quase branco em azul marinho ou quase azul marinho em creme-evite a cópia do corpo azul médio.

Exemplo de imagem de sapphire citrus gerado usando media.io

6) Veludo do Museu

hexagonal:#070B1A#121A3A#2A2F6B#9CA3AF#FAFAF9

humor:Dramático, culto, refinado

Melhor para:editorial Revista spread

Dramáticos e culturados, esses tons lembram paredes de galeria de veludo e molduras polidas. Use o azul marinho quase preto para manchetes e bordas, em seguida, suavize as leituras longas com o fundo quente e branco. O cinza frio funciona como legendas, regras e tipografia secundária sem competir pela atenção. Dica: Adicione um único elemento índigo saturado por espalhamento para guiar o olho.

Exemplo de imagem de veludo de museu gerado usando media.io

7) Farol do Ártico

hexagonal:#06142E#0B2C5F#1B65A6#A8DADC#F1FAEE

humor:Fresco, fresco, ao ar livre

Melhor para:Cabeçalho do site de viagem

Fresco e fresco, parece ar polar e água brilhante sob um céu claro. Esta paleta de cores azul escuro azul marinho é ideal para marcas de viagens e ao ar livre que querem confiança e um toque de aventura. Use a hortelã gelada como um sotaque para botões e tags, enquanto o branco suave mantém imagens e cópias limpas. Dica: deixe as fotos carregar o calor; Mantenha os elementos da UI frios e mínimos.

Exemplo de imagem de arctic beacon gerado usando media.io

8) Rosa depois do escuro

hexagonal:#0B1026#1B1F3A#3B3561#E07A8C#F6F0F2

humor:Romântico, moderno, ligeiramente temperamental

Melhor para:suite de convite de casamento

Romântico e moderno, evoca flores crepúsculas contra um céu escuro. Combine o blush rose com um espaço branco generoso para nomes e datas, e use o azul marinho mais profundo para tipografia formal. O azul violeta atenuado ajuda a ponte entre os dois para que o contraste pareça elegante, não duro. Dica: Imprima sotaques de rosa como cor pontual ou folha para mantê-los nítidos no stock texturizado.

Exemplo de imagem de rose after dark gerado usando media.io

9) Maré de grafite

hexagonal:#050A12#0F172A#334155#94A3B8#E2E8F0

humor:Mínimo, profissional, equilibrado

Melhor para:UI do aplicativo financeiro

Mínimo e profissional, lê-se como grafite, aço e água profunda. Use os tons mais escuros para sinais de navegação e segurança, em seguida, deixe a ardósia e cinza claro carregar mesas e formulários. Essa mistura funciona especialmente bem quando você quer um visual sério sem ficar completo em preto e branco. Dica: Mantenha as cores de erro e sucesso silenciadas para que não colidem com a base legal.

Exemplo de imagem de graphite tide gerado usando media.io

10) Ouro do marinheiro

hexagonal:#081C2F#102A43#243B53#D4AF37#F8F5E6

humor:Clássico, confiante, sofisticado

Melhor para:Embalagem de produto de luxo

Clássico e confiante, traz à mente os uniformes do capitão e um detalhe dourado quente. Use o ouro como um destaque premium em logotipos, selos e pequenas bordas, enquanto as marinhas fornecem um pano de fundo robusto. O neutro cremoso evita que o conjunto fique frio e ajuda as informações do produto a permanecerem legíveis. Dica: Escolha um ouro ligeiramente mais escuro para texto pequeno para que ele aguente na impressão.

Exemplo de imagem de seafarer gold gerado usando media.io

11) Denim e aveia

hexagonal:#0A1B33#12355B#2D6CDF#DCC9A1#F7F3E8

humor:Amigável, casual, acessível

Melhor para:loja de comércio eletrônico

Amigável e casual, parece um jeans bem usado com tons quentes de aveia. Use o azul médio para links e destaques, e apoie-se nos neutros claros para grades de produtos e páginas longas. O bege quente é ótimo para crachás sutis, chips de categoria ou bandas de fundo. Dica: Mantenha os CTAs consistentes-um azul, um neutro-para evitar uma loja movimentada.

Exemplo de imagem de denim & oat gerado usando media.io

12) Marina de Neon

hexagonal:#060B23#0B1E4D#00D1FF#FF4D6D#F8FAFF

humor:Elétrico, Jovem, Vida noturna

Melhor para:design de cartazes de eventos

Elétrico e pronto para a vida noturna, sugere reflexos de néon em água escura. Use o ciano e o rosa quente como sotaques opostos para criar contraste de alta energia sem confiar no preto puro. Mantenha o fundo marinho-pesado para que a tipografia permaneça legível e os brilhantes parecem intencionais. Dica: Limite os gradientes a uma área (como um título) para que o layout não se torne caótico.

Exemplo de imagem de neon marina gerado usando media.io

13) Observatório de Inverno

hexagonal:#070A14#0E1A2B#223A5E#8FB3FF#F3F6FF

humor:Tranquilo, cósmico, inteligente

Melhor para:Tema de visualização de dados

Tranquilo e cósmico, parece um observatório de inverno com luz fresca das estrelas. Use o azul pálido para gráficos de linhas e destaques, enquanto as marinhas mais profundas definem um fundo consistente para painéis e relatórios. O quase branco torna lendas e rótulos fáceis de digitalizar em pequenos tamanhos. Dica: Aumente a transparência da gridline para que os gráficos não lutem contra a base escura.

Exemplo de imagem de observatório de inverno gerado usando media.io

14) Pinheiro e mar profundo

hexagonal:#07101F#0B2545#1B4965#1F7A4D#E8F1F2

humor:Aterrado, Ao ar livre, Refrescante

Melhor para:Etiqueta de embalagem da marca ecológica

Aterrado e ao ar livre, reúne azuis profundos do mar com um sopro verde-pinho de frescor. Use o verde como um sinal de confiança para reivindicações de sustentabilidade e mantenha o azul para estrutura e credibilidade. O neutro gelado pálido funciona bem para listas de ingredientes e detalhes em pequenas letras. Dica: Escolha papel sem revestimento para que os tons escuros pareçam naturais em vez de brilhantes.

Exemplo de imagem de pine & deep sea gerado usando media.io

15) Bússola de Coral

hexagonal:#081A2F#0F2F57#2C5282#FF6B6B#FFF5F5

humor:Aventureiro, caloroso, convidativo

Melhor para:Telas de integração de aplicativos móveis

Aventureiro e convidativo, parece um marcador de coral em um mapa náutico. Estas combinações de cores azul escuro azul marinho são ótimas quando você quer confiança, além de um sotaque amigável e humano para embarcar. Use coral para pontos de progresso e botões primários, e mantenha o branco-rosa mais suave para fundos de tela suaves. Dica: Certifique-se de que o coral passe o contraste na Marinha, aprofundando-o ligeiramente para texto pequeno.

Exemplo de imagem de coral compass gerado usando media.io

16) Tinta Real & Lavanda

hexagonal:#0B1026#141B41#2E2A8F#B9A7FF

humor:Criativo, elegante, um pouco sonhador

Melhor para:Site da Agência Criativa

Criativo e um pouco sonhador, lê-se como tinta real suavizada pela névoa de lavanda. Use o índigo como uma cor de marca ousada para cabeçalhos e estados interativos, em seguida, mantenha a lavanda como o tom de apoio em fundos e cartões. O lilás quase branco mantém o conteúdo de forma longa calmo e legível. Dica: Adicione grãos sutis ou gradientes às seções de lavanda para evitar uma sensação de "pastel plano".

Exemplo de imagem de royal ink & lavender gerado usando media.io

17) Água salgada mínima

hexagonal:#060A10#0C1B2A#1F3B57#9FB7C9#F2F6F9

humor:Limpo, arejado, moderno

Melhor para:Site do portfólio

Limpo e arejado, parece névoa de água salgada sobre ardósia lisa. Use os tons mais escuros para navegação e títulos de projetos e, em seguida, deixe o azul-cinza pálido lidar com fundos e divisores. Este conjunto funciona bem para portfólios porque enquadra imagens sem roubar a atenção. Dica: Mantenha as sombras sutis e confie no espaçamento para criar profundidade.

Exemplo de imagem de saltwater Minimum gerado usando media.io

18) Jardim noturno

hexagonal:#071225#0E2A47#1D4E89#7CCFA8#F3FAF6

humor:Fresco, botânico, sereno

Melhor para:Pôster de ilustração botânica

Sereno e botânico, sugere folhas iluminadas suavemente à noite com uma atmosfera azul fresca. Use o verde hortelã para detalhes de folhagem e os azuis para lavagens de fundo e sombras. O branco branco suave mantém a composição respirável e amigável à impressão. Dica: texturas de aquarela em camadas para que os tons profundos permaneçam luminosos em vez de lamacentos.

Exemplo de imagem de jardim noturno gerado usando media.io

19) Uniforme do piloto

hexagonal:#071021#0F2147#2B3A67#C0C7D1#F7F9FC

humor:Estruturada, confiável, corporativa

Melhor para:Modelo de apresentação B2B

Estruturado e confiável, parece um uniforme nítido com detalhes de metal polido. Use o azul marinho mais escuro para slides de título e cabeçalhos de seção, em seguida, conte com cinza suave para o conteúdo do corpo e gráficos. Esta paleta lê bem em projetores e evita que os decks longos pareçam duros. Dica: enfatize os números-chave com o índigo médio, em vez de introduzir novas cores de sotaque.

Exemplo de imagem de uniforme de piloto gerado usando media.io

20) Sócio de ameixa crepúsculo

hexagonal:#070B1D#121A3D#243B7B#6D28D9#F5F3FF

humor:Ousado, moderno, criativo

Melhor para:Ícone do aplicativo e tela de respiração

Ousado e moderno, parece um blues crepúsculo pontuado por um brilho de ameixa. Use o roxo como um sotaque controlado para a marca do ícone ou manchete de respingos, mantendo a maioria dos elementos da UI em azul marinho. O branco-lavanda suave ajuda os gradientes e os efeitos de brilho a parecerem refinados em vez de altos. Dica: Mantenha os acentos roxos consistentes em todos os estados para que a marca pareça coesa.

Exemplo de imagem de twilight plum sotaque gerado usando media.io

Quais cores combinam bem com azul escuro azul marinho?

Os acentos quentes são a maneira mais rápida de fazer o azul marinho se sentir convidativo: marfim, creme, aveia, greige, cobre e ouro adicionam suavidade e calor "premium" sem perder a estrutura da paleta. Essas combinações são especialmente fortes para embalagens, layouts editoriais e interiores.

Para um visual digital moderno, combine o azul marinho com tons legais como periwinkle, azul gelo e azul-cinza pálido. Eles mantêm as interfaces legíveis, reduzem a tensão ocular e criam uma separação limpa para cartões, tabelas e fundos.

Se você quiser energia, procure pops de alto teor de croma, como coral, amarelo cítrico, ciano ou ameixa-mas mantê-los limitados a ações primárias, estatísticas principais e componentes de destaque para que a hierarquia geral permaneça calma.

Como usar uma paleta de cores azul escuro azul marinho em Designs reais

Comece atribuindo papéis: use o azul marinho mais escuro para cabeçalhos/navegação, um azul marinho médio para superfícies ou seções e um azul/cinza mais claro para cartas e divisores. Isso mantém a profundidade consistente e evita que o projeto se torne um único bloco escuro.

Em seguida, escolha uma cor de sotaque para interação (botões, links, estados ativos) e uma cor neutra para legibilidade (branco escuro ou cinza claro). Na maioria dos layouts, essa simples divisão proporciona um forte contraste, mantendo a coesão entre as páginas e os componentes.

Por fim, teste sua paleta em contexto: fundos escuros podem fazer com que texto pequeno e ícones finos desapareçam. Use pesos de fonte ligeiramente mais pesados, aumente a altura da linha e confirme o contraste para todos os estados (padrão, mouse, desativado) antes de escalar o sistema.

Crie visuais de paleta azul escuro azul marinho com IA

Precisa de modelos que combinem com sua paleta (painéis, pôsteres, convites, embalagens ou interiores)? Com o Media.io, você pode transformar um prompt em visuais da marca em minutos e, em seguida, iterar rapidamente trocando sotaques, proporções ou estilos.

Para obter melhores resultados, consulte sua paleta no prompt usando os nomes de cores (marinho, cobalto, marfim, ouro, coral) e descreva onde cada cor deve aparecer (fundo, botão CTA, tipografia, cartões). Mantenha os layouts simples para que as cores permaneçam no foco.

Depois de gerar um look que você gosta, reuse a mesma estrutura de prompt em diferentes formatos (social, herói da web, modelo de slide) para manter uma linguagem de design consistente baseada na Marinha.

Próximo: Paleta de Cores do Pôr do Sol