Como combinar azul marinho e azul claro sem parecer genérico
A combinao de azul marinho e azul claro funciona bem quando vocem controle do contraste. Nesses dois tons, o perigo mais comum e criar uma diferen insuficiente entre o fundo e o texto ou os elementos principais. J vi projetos com paleta assim que ficaram visualmente confusos s porque o azul claro usado era muito primo do azul marinho em luminosidade.
Entendendo o par azul marinho e azul claro
Azul marinho um tom scuro, quase preto, com um leve resfriamento. Azul claro quele que vai do ciano po at algo primo do azul celeste. O par em si til, mas s se vocsoubler usar. O que a maioria das pessoas n faz calcular o contraste luminiscente real entre as duas cores. Vocna pode confiar no olho nu porque telas diferentes alteram a percepo. Use uma ferramenta de c culo de contraste e garanta que a diferen seja pelo menos 4,5:1 para texto normal ou 3:1 para tulos grandes. Se no atingir, ajuste o tom do azul claro at chegar nesse nero.
Um problema que eu encontrei recentemente num projeto de interface interna foi o seguinte: o azul claro que o designer escolheu parecia bom no monitor calibrado dele, mas no monitor do cliente (um Dell comum com brilho alto) o contraste caia para cerca de 2,8:1 com o azul marinho de fundo. A soluo foi subir a luminosa em aproximadamente 12% no HSL, usando #5BA4D6 em vez de #4A90C2. O resultado ganhou contraste suficiente para passar no WCAG AA e ainda manteve a harmonia da paleta.
A regra dos 60-30-10 aplicada a esses dois azuis
O esquema mais seguro : use o azul marinho como cor dominante (60% da a visual), o azul claro como cor secundaria (30%) e uma terceira cor neutra ou de destaque (10%). Isso evita que a composio fique pesada ou monona. O erro mais frequente querer equilibrar os dois em partes iguais. O resultado uma tela que n transmite hierarquia visual. Quando eu vejo um layout assim, a primeira coisa que fa redistribuir os pesos. Coloco o azul marinho em backgrounds maiores e deix o azul claro para botes, ícones ou chamadas de ateno. A hierarquia volta a fazer sentido.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Se vocst trabalhando em branding, lembre-se de que esse par combina bem com setores como tecnologia, finanças, educao e sae. N funciona to bem em marcas que precisam transmitir calor extremo ou urgencia, porque ambos os tons s frios por natureza. Nesse caso, a alternativa usar um terceiro tom quente para pequenos acentos ou trocar por uma paleta mais neutra com um toque de coral.
Aplicaes prticas
Em web design, uma combinao que costuma funcionar fundo branco com sees em azul marinho e CTAs em azul claro. Em apps, o azul marinho no header e na barra lateral, azul claro nos botes primários. Em slides, use o azul marinho para fundos de tulos e o azul claro para destaques de dados. E em moda, a regra mesma: azul marinho no piece principal, azul claro no acessio ou peça complementar. O detalhe que n costuma ser mencionado a variao de temperatura. Azul marinho tende a ser levemente mais frio que muitos azuis claros. Se vocse quiser evitar que a paleta pare?a desconectada, inclua um tom intermediário, como um azul médio ou um cinza-azulado, para fazer a ponte entre os extremos. Isso resolve o problema em 80% dos casos que eu vejo com clientes que reclamam que a marca "n parece unificada".
Quando evitar essa combinao
Evite se o projeto exigir alto contraste em ambientes de baixa luminosidade constante, como painéis industriais ou sinalizao externa sob sol forte. Nesses cenários, o azul claro pode perder legibilidade rapidamente. A alternativa usar um amarelo ou laranja vibrante como cor de destaque sobre o azul marinho, que mantém o contraste alto mesmo em condies adversas. Também evitar essa par em projetos onde o plico-alvo tem maior prevalência de daltonismo vermelho-verde. Felizmente, o problema com esse par específico n é crítico, mas vale testar sempre com simuladores de dicromacia antes de finalizar. Eu nunca entrego um projeto sem passar por um simulador tipo Coblis ou pela ferramenta do propia Figma com o modo de daltonismo ativado. Gasta menos de dois minutos e evita retrabalho caro depois.
Se precisar de referências de tons prontos para usar, posso recomendar paletas baseadas em escalas como Material Design ou Coolors. Só confirme qual contexto você está trabalhando — interface, impressão ou vídeo — que as recomendações mudam conforme o espaço de cor.
