Ultramarine (#120A8F) é um azul profundo e confiante que imediatamente adiciona estrutura a interfaces, pôsteres e sistemas de marca. Ele transmite um visual premium e moderno, mantendo versatilidade em digital e impressos.
Abaixo estão combinações de paletas ultramarine cuidadosamente selecionadas com códigos HEX, observações de clima e dicas práticas de combinação—assim você pode escolher um esquema que se encaixa na sua mensagem e nas limitações do seu layout.
Neste artigo
Por Que Paletas de Ultramarine Funcionam Tão Bem
Ultramarine tem autoridade natural: é escuro o suficiente para dar base aos layouts, mas saturado o suficiente para parecer intencional e energético. Esse equilíbrio faz dele um “anchor color” confiável para sistemas que precisam de hierarquia.
Em UI, o ultramarine ajuda a separar navegação, estados ativos e elementos principais sem depender de bordas pesadas. Em branding, ele transmite confiança e credibilidade, mas ainda permite acentos quentes como âmbar, terracota ou dourado.
Como combina bem tanto com tons frios (ciano, verde-água, pervinca) quanto com complementares quentes (laranja, rosa, bege), um esquema de cor ultramarine pode mudar o clima—do luxo minimalista à campanha ousada—sem perder a coerência.
Mais de 20 Ideias de Paletas de Ultramarine (com Códigos HEX)
1) Midnight Sail
HEX: #120A8F #0B1D39 #2E5AAC #F4F1E8 #C9B18C
Clima: náutico, confiante, refinado
Melhor para: identidade de marca e seções principais
Náutica e confiante, lembra água noturna sob um holofote limpo. Esta paleta ultramarine funciona lindamente para branding premium, landing pages e barras de navegação ousadas. Combine os azuis profundos com areia quente e brancos cremosos para manter o contraste legível e elegante. Dica de uso: reserve o bege dourado para pequenos detalhes como ícones, selos e CTAs principais.
Exemplo de imagem do midnight sail gerada no media.io
O Media.io é um estúdio de IA online para criar e editar vídeo, imagem e áudio diretamente no navegador.
2) Modern Delft
HEX: #1E3A8A #3B82F6 #93C5FD #F8FAFC #F59E0B
Clima: fresco, brilhante, amigável
Melhor para: UI de aplicativos e dashboards
Fresco e animado, evoca azulejos de cerâmica vidrados e luz do dia clara. Os azuis em camadas criam uma hierarquia natural para estados de UI, enquanto o âmbar quente dá foco instantâneo. Use o azul mais claro e branco para superfícies, e o ultramarine profundo para cabeçalhos e abas ativas. Dica: mantenha o laranja em apenas uma ação principal por tela para evitar poluição visual.
Exemplo de imagem do modern delft gerada no media.io
3) Velvet Opera
HEX: #1A0B6E #7C3AED #F472B6 #111827 #F9FAFB
Clima: dramático, luxuoso, artístico
Melhor para: cartazes de eventos e capas de álbuns
Dramático e luxuoso, lembra cortinas de veludo e luzes de palco. Índigo profundo e carvão criam uma base marcada, enquanto violeta e rosa trazem energia de alto impacto para os títulos. Use o branco pálido no espaço negativo ao redor dos títulos para que os acentos vivos não dominem. Dica: aplique o rosa apenas a elementos focais, como datas, ícones ou um único traço em gradiente.
Exemplo de imagem do velvet opera gerada no media.io
4) Coastal Ink
HEX: #162B75 #0EA5E9 #14B8A6 #E2E8F0 #0F172A
Clima: nítido, moderno, costeiro
Melhor para: sites SaaS e infográficos
Nítido e costeiro, sugere linhas de tinta, vidro do mar e ar limpo. O ciano brilhante e o verde-água evitam que os azuis mais escuros fiquem pesados, tornando ideal para páginas SaaS e dados visuais. Combine o cinza claro com o verde-água para painéis secundários e reserve o quase preto para textos. Dica: use o ciano moderadamente em estados interativos como hover e indicadores selecionados.
Exemplo de imagem do coastal ink gerada no media.io
5) Gallery Spotlight
HEX: #1D2D8C #E5E7EB #FFFFFF #D4AF37 #111111
Clima: minimalista, premium, alto contraste
Melhor para: anúncios de produtos de luxo
Minimalista e premium, lembra uma galeria silenciosa com um único holofote. O ultramarine e o preto transmitem autoridade, enquanto o branco e o cinza suave mantêm tudo nítido e editorial. Adicione o dourado apenas onde quiser destacar, como em um logotipo ou preço. Dica: mantenha o fundo limpo para que o azul profundo seja percebido como intencional, não pesado.
Exemplo de imagem do gallery spotlight gerada no media.io
6) Astral Citrus
HEX: #1B2A9B #F97316 #FDE68A #0F172A #F8FAFC
Clima: ousado, energético, futurista
Melhor para: faixas de campanha e CTAs
Ousado e energético, lembra um céu noturno cortado por luz cítrica brilhante. Estas combinações de ultramarine são ideais para banners de campanhas que precisam de contraste imediato e um claro call-to-action. Permita que o azul profundo e o carvão componham o fundo, usando laranja para botões e destaques. Dica: use o amarelo pálido como um brilho suave atrás dos títulos, não como texto principal.
Exemplo de imagem do astral citrus gerada no media.io
7) Botanical Midnight
HEX: #15206B #0F766E #84CC16 #F3F4F6 #334155
Clima: terroso, calmo, noturno
Melhor para: ilustrações botânicas e etiquetas
Terroso e calmo, lembra um jardim após a chuva sob um céu azul profundo. Os verdes parecem naturais e contemporâneos sobre essa base noturna, ótima para marcas de plantas ou mensagens ecológicas. Use o off-white para rótulos e mantenha o cinza ardósia para tipografia e traço. Dica: adicione o verde folha somente em folhas centrais ou como um pequeno carimbo de destaque.
Exemplo de imagem do botanical midnight gerada no media.io
8) Paper Pigment
HEX: #2431A5 #E11D48 #F1F5F9 #A3A3A3 #0B0F1A
Clima: editorial, marcante, moderno
Melhor para: capas de revistas e posts sociais
Editorial e marcante, parece tinta fresca sobre papel branco. O vermelho vibrante cria ênfase imediata, enquanto o ultramarine mantém a base moderna e sólida. Use o cinza claro como espaço em branco generoso e o quase preto para legendas legíveis. Dica: mantenha o vermelho em um ou dois elementos, como um rótulo ou sublinhado único, para uma hierarquia limpa.
Exemplo de imagem do paper pigment gerada no media.io
9) Retro Arcade
HEX: #2B18FF #FF2D95 #00D1FF #0B1021 #F8FAFC
Clima: divertido, neon, alta energia
Melhor para: overlays de stream e promoções
Divertido e neon, lembra luzes de arcade em uma sala escura. O azul elétrico e o ciano criam um ar tecnológico, enquanto o rosa vibrante traz diversão jovem. Use o quase preto como base para que as cores brilhantes permaneçam controladas. Dica: aplique os tons neon como contorno e brilho, não em blocos grandes, para manter a leitura.
Exemplo de imagem de arcade retrô gerada usando media.io
10) Biblioteca Silenciosa
HEX: #1F2A7A #6B7280 #D1D5DB #F5F3E7 #8B5E34
Clima: calma, acadêmica, atemporal
Melhor para: sites editoriais e portfólios
Calma e acadêmica, remete a livros encapados em tecido e luminárias suaves de leitura. O azul profundo ancora o design, enquanto o creme quente e o marrom dão um toque humano e silencioso. Use os tons de cinza para UI secundários e layouts longos quando quiser mínima distração. Dica: reserve o marrom para pequenos separadores ou ícones, para que fique como uma pátina sutil, não como uma cor de manchete concorrente.
Exemplo de imagem de biblioteca silenciosa gerada usando media.io
11) Flores de Cerâmica
HEX: #253494 #F43F5E #FB7185 #FFF7ED #22C55E
Clima: alegre, floral, criativo
Melhor para: convites e papelaria
Alegre e floral, lembra cerâmicas pintadas e buquês de primavera. O azul intenso traz estabilidade à composição, enquanto os tons rosados acrescentam calor e celebração. Use o fundo creme para manter a legibilidade e deixe o verde como um pequeno destaque botânico. Dica: experimente rosa como fita atrás dos nomes, com ultramarino para texto e bordas.
Exemplo de imagem de flores de cerâmica gerada usando media.io
12) Mercado Noturno
HEX: #0F1A5A #F59E0B #DC2626 #F1F5F9 #111827
Clima: vibrante, urbano, apetitoso
Melhor para: panfletos de comida e promoções de restaurantes
Vibrante e urbano, lembra lanternas, letreiros e barracas noturnas. O âmbar quente e o vermelho se destacam brilhantemente contra o azul escuro, sendo perfeito para promos de comida e manchetes ousadas. Use o quase branco para blocos de texto de menu e reserve o preto para textos pequenos. Dica: use o âmbar como destaque primário e deixe o vermelho apenas para especiais ou tags de tempo limitado.
Exemplo de imagem de mercado noturno gerada usando media.io
13) Sombra da Montanha
HEX: #1C2C6B #64748B #94A3B8 #E2E8F0 #16A34A
Clima: ao ar livre, estável, frio
Melhor para: blogs de viagem e UI de mapas
Ao ar livre e estável, tem o clima de sombra de montanha com um toque de pinho. Os azuis ardósia criam estrutura confiável para mapas, navegação e páginas com muito conteúdo. Use o cinza-azulado claro como tela e reserve o verde para pins de localização ou marcadores de status. Dica: para acessibilidade, use texto branco apenas sobre o azul mais escuro e evite usar verde para parágrafos longos.
Exemplo de imagem de sombra da montanha gerada usando media.io
14) Luxo Minimalista
HEX: #1A237E #F5F5F4 #D6D3D1 #0A0A0A #C4A484
Clima: luxo, silêncio, arquitetônico
Melhor para: embalagens e branding premium
Luxuoso e silencioso, evoca mármore, tinta e detalhes em latão quente. Esta paleta ultramarina brilha em embalagens premium, onde o contraste e a sobriedade fazem a diferença. Combine o azul profundo com neutros de pedra suaves, usando o bege como realce metálico para selos, bordas ou pequenos ícones. Dica: imprima o ultramarino em áreas grandes e mantenha o destaque para linhas finas para acabamento sofisticado.
Exemplo de imagem de luxo minimalista gerada usando media.io
15) Gradiente Prisma
HEX: #0B0F6A #2563EB #38BDF8 #A78BFA #F8FAFC
Clima: limpo, digital, otimista
Melhor para: landing pages tech e gradientes
Limpo e otimista, lembra luz refratada em vidro. Os azuis ascendentes e violeta suave são perfeitos para gradientes modernos, gráficos e ilustrações principais. Use o quase branco para dar respiro, e depois misture os azuis médios com ciano para profundidade sem “bordas” bruscas. Dica: aplique o violeta como gradiente secundário, para parecer um detalhe premium, não distração.
Exemplo de imagem de gradiente prisma gerada usando media.io
16) Pôster Solar
HEX: #1E2A9E #FACC15 #F43F5E #0F172A #FAFAF9
Clima: ousado, ensolarado, gráfico
Melhor para: pôsteres de festival e anúncios
Ousado e ensolarado, lembra céu ultramarino com um sol de pop art. Essas combinações são feitas para pôsteres que precisam de impacto à distância. Mantenha os tons profundos para formas grandes, use o amarelo para títulos/datas e o rosa como reforço secundário. Dica: reserve o quase branco para blocos pequenos de texto para que os tons mais vivos fiquem para destaques.
Exemplo de imagem de pôster solar gerada usando media.io
17) Espuma de Ardósia
HEX: #18206F #5EEAD4 #0F766E #CBD5E1 #1F2937
Clima: frio, equilibrado, refrescante
Melhor para: marcas de bem-estar e seções web
Frio e equilibrado, lembra espuma do mar contra rochas escuras. O verde menta suaviza o azul profundo, criando atmosfera tranquila e confiável para wellness e lifestyle. Use a ardósia clara como fundo principal e os tons mais escuros para títulos. Dica: defina o menta como estado hover/ativo trazendo movimento sutil sem exagero.
Exemplo de imagem de espuma de ardósia gerada usando media.io
18) Azul Editorial
HEX: #151B54 #E5E7EB #9CA3AF #B91C1C #FFFFFF
Clima: sério, jornalístico, autoritário
Melhor para: relatórios e layouts editoriais
Sério e autoritário, lembra um jornal reimaginado para a web. O azul-marinho e cinzas suportam conteúdo denso, enquanto o vermelho profundo aporta o clássico destaque editorial para links ou chamadas. Use branco para margens generosas e o cinza para divisores e legendas. Dica: reserve o vermelho para uma única função, como alertas ou tags de seção, para leitura consistente.
Exemplo de imagem de azul editorial gerada usando media.io
19) Noite Orquídea
HEX: #1B0F8A #C026D3 #F0ABFC #0B1320 #F5F3FF
Clima: misterioso, onírico, glamouroso
Melhor para: branding de beleza e anúncios em redes sociais
Misterioso e onírico, remete a orquídeas brilhando em sala escura. A faixa roxo-rosada é glamourosa enquanto o azul profundo aterra e moderniza. Use lavanda clara como fundo suave e magenta nos destaques, como nomes de produto ou adesivos. Dica: use gradientes sutis entre ultramarino e violeta para criar profundidade sem acrescentar cores extras.
Exemplo de imagem de noite orquídea gerada usando media.io
20) Terracota Quente
HEX: #1D2A8F #C2410C #FB923C #FDEBD0 #374151
Clima: quente, aconchegante, artesanal
Melhor para: marcas de decoração e lookbooks
Quente e aconchegante, lembra barro, linho e esmalte azul profundo. Os tons terracota tornam o azul mais rico e acolhedor, ideal para decoração e produtos artesanais. Use creme como fundo principal da página e carvão para textos e linhas. Dica: deixe o laranja para detalhes pequenos como botões e etiquetas, enquanto o azul ancora títulos e molduras.
Exemplo de imagem de terracota quente gerada usando media.io
Quais Cores Combinam com Ultramarine?
O ultramarino combina lindamente com complementares quentes—laranja, âmbar, terracota e dourado—porque criam contraste imediato e direcionam atenção para CTAs, preços ou rótulos-chave.
Para combinações mais calmas e contemporâneas, combine ultramarino com acentos frios como ciano, teal, espuma do mar ou violeta claro. Isso mantém a paleta “digital” e arejada, conservando a profundidade do azul base.
Para um visual minimalista e premium, misture ultramarino com branco, quase branco, cinza claro e preto quase total. Adicione um acento metálico (bege/dourado) em pequenas doses para um acabamento refinado.
Como Usar uma Paleta Ultramarine em Designs Reais
Use ultramarino como cor estrutural: cabeçalhos, navegação, divisores de seção, painéis "hero". Em seguida, coloque o destaque mais vivo (laranja/rosa/amarelo) em ações e pontos de destaque para que a atenção do usuário siga um caminho claro.
Para legibilidade, mantenha o texto do corpo em neutros claros e reserve branco-sobre-ultramarino para elementos curtos (botões, menus, etiquetas). Se for desenhar gráficos, atribua ultramarino à “série principal” e tons mais claros para séries secundárias.
No impresso (pôsteres, embalagens, papelaria), o ultramarino funciona melhor em grandes áreas com linhas de destaque comedidas. Assim o azul parece intencional e premium, e não pesado.
Crie Visuais de Paletas Ultramarine com IA
Se você já possui códigos HEX, pode rapidamente transformá-los em banners, pôsteres e mockups de UI apenas descrevendo a composição (layout, tipografia, formas) e especificando as cores da paleta.
Para resultados consistentes, mencione quais cores são dominantes, quais são neutras de fundo e quais devem ficar reservadas para “pequenos destaques”. Adicionar uma proporção de aspecto (como 16:9 ou 3:4) ajuda a imagem a corresponder ao seu uso.
Com o texto-para-imagem do Media.io, você pode iterar no mesmo esquema ultramarino em diversos formatos—social, anúncios, hero sections—sem precisar reconstruir tudo do zero.
Perguntas Frequentes Sobre Paleta Ultramarino
-
Qual o código HEX do ultramarino neste guia?
O ultramarino central referido aqui é #120A8F. É profundo, saturado, e funciona bem como cor base para UI e branding. -
Ultramarino é bom para fundos de UI de sites?
Sim—use em cabeçalhos, barras laterais e blocks hero, mantendo as áreas de conteúdo claras (quase branco ou cinza claro) para leitura confortável e contraste limpo. -
Qual é o melhor destaque de cor com ultramarino para CTAs?
Cores quentes como laranja/âmbar (por exemplo #F97316 or #F59E0B) são excelentes pois contrastam fortemente e atraem naturalmente a atenção para botões. -
Como evitar que uma paleta ultramarino fique muito escura?
Equilibre com neutros generosos (branco, off-white, cinza claro) e adicione tons de azul mais claros (azul céu ou lavanda) para espaçamento, cartões e superfícies secundárias. -
Ultramarino combina bem com rosa ou roxo?
Sim—acentos em rosa e violeta criam um visual dramático e moderno (ótimo para pôsteres, branding de beleza e capas de álbuns). Mantenha a cor vibrante restrita a elementos focais para criar hierarquia. -
Posso usar ultramarino em branding e embalagens impressas?
Sim. Ultramarino imprime particularmente bem como uma grande área de cor. Combine com neutros acinzentados e um toque discreto de dourado/bege para um sentimento premium e arquitetônico. -
Como posso gerar rapidamente mockups de paletas ultramarino?
Use uma ferramenta de IA de texto para imagem e inclua seus códigos HEX, direção de cor dominante/fundo e a proporção desejada. Assim fica fácil produzir banners, pôsteres e conceitos de UI consistentes.
Próximo: Paleta de Cores Bittersweet
