Tons De Azul Escuro

Escolhendo tons de azul escuro para projetos reais

A maioria das pessoas pega um tom de azul escuro direto do Chrome picker e espera que funcione. A maioria das vezes funciona. Na maioria das vezes. Aqui estão os valores hex mais usados no dia a dia, com uma explicação prática de quando cada um se encaixa.

Principais tons de azul escuro para usar

#0A1628 — Navy profundo. Quase preto. Bom para fundos de dashboards e áreas de leitura prolongada. O problema é que texto cinza claro (#8892a4) desaparece nesse fundo se o contraste não for testado. Use #c8d6e5 ou mais claro para texto, senão você vai ter acessibilidade reprovada no Lighthouse. #1B2A4A — Azul marinho intermediário. Um pouco menos agressivo que o navy puro. Usa muito em headers de sistema interno. Se você colocar branco puro (#FFFFFF) em cima, o contraste já é aceitável, mas ainda assim meço com a régua 4.5:1 antes de entregar. #0D2137 — Azul petróleo escuro. Menos comum, mas aparece bastante em fintechs e apps de gestão. A questão aqui é que ele tende a parecer esverdeado em monitores calibrados de forma errada. Se o cliente reclamar da cor, é provavelmente isso.

#122640 — Azul meia-noite com viés frio. Bom para cards em fundos escuros quando você quer separar camadas sem usar preto. Já tive um projeto onde o design system pedia preto absoluto como fundo, mudei para esse tom e o resultado visual ficou mais suave sem perder a hierarquia. #061A33 — Quase inadensável em telas baratas. Funciona bem em telas OLED porque o preto perfeito faz esse azul quase sumir. Se o produto roda em dispositivos entry-level, evite. O usuário vai ver cinza escuro, não azul. Um detalhe que pouca gente considera: a cor do seu `` ou container principal vai definir como esses tons se comportam. Coloque #1B2A4A sobre branco e ele parece quase médio. Coloque sobre #0A1628 e ele vira um card claramente distinguível. A mesma cor, contextos diferentes, leitura completamente diferente.

Outro ponto prático: se você está trabalhando com tema escuro e precisa de três níveis de profundidade, a progressão que costuma funcionar é #0A1628 (fundo base), #1B2A4A (segmentos/cards), #2E4057 (elementos de destaque). Qualquer coisa acima de #2E4057 quebra a sensação de unidade na paleta. A ferramenta que eu uso para validar tudo isso é o plugin Contrast do Figma. Seleciona os dois elementos, copia os códigos hex, joga no site do WebAIM Contrast Checker. Se passar de 4.5 contra o fundo, tá salvo. Se não, ajusta o tom ou o peso da fonte. Leva dois minutos e evita retrabalho na fase de teste de acessibilidade. Se você precisa de uma paleta pronta, o Tailwind tem a escala slate que cobre boa parte desses tons. A classe `bg-slate-900` é praticamente o #0A1628, `bg-slate-800` fica perto do #1B2A4A. Útil quando o prazo é apertado e não dá para affinar cada hex manualmente.

Para baixar amostras de texturas ou gradientes com esses tons, o site unsplash tem buscas por "dark blue abstract" que entregam material livre de direitos. Não é perfeito para UI, mas serve como referência visual quando o designer precisa mostrar ao cliente como o tom se comporta em superfície real.