Paletas de cores para tecnologia além do azul corporativo

Uma boa paleta de cores para tecnologia tem menos a ver com uma cor principal e mais com um sistema: um fundo escuro, um fundo claro, uma escala de cinzas neutros, um destaque que pertence a você e cores convencionais para sucesso, aviso e erro. O azul corporativo ocupa tanto o espaço do destaque em tantas empresas de software que deixou de significar algo em particular. Troque o destaque por algo que a sua categoria não tenha dono, mantenha o resto disciplinado, e a marca continua parecendo tecnologia competente.

Por que as marcas de tecnologia continuam escolhendo azul

O azul é seguro. Parece calmo e confiável na maioria dos mercados, fica bem em interfaces e é a cor de link padrão da web. São bons motivos, e o resultado é um mar de azuis quase idênticos em apps de banco, painéis de nuvem e ferramentas de produtividade. Psicologia das cores explica as associações; o problema é só que todo mundo agiu com base nelas ao mesmo tempo.

Nada disso significa que o azul está errado. Significa que o azul não pode ser a sua única ideia. Se você o mantiver, combine-o com um fundo inesperado, uma segunda cor ou um material distintivo, para a identidade ser reconhecível mesmo sem o logo.

Oito paletas de cores para tecnologia com códigos hex

Cada paleta abaixo tem um fundo, um tom de apoio e um destaque. Elas estão escritas como degradês para você ver como as cores se comportam juntas e depois separadas em amostras para as duas que mais trabalham na interface de um produto.

• Tinta noturna e verde-limão ácido combina com ferramentas de desenvolvedor e infraestrutura: técnico, noturno, impossível de confundir com um banco.
• Grafite e laranja de sinalização parece hardware, robótica ou qualquer coisa física. O laranja também se destaca bem em fotografia de produto escura.
• Papel e verde-pinheiro é a opção discreta para pesquisa, escrita e software de saúde, onde a calma importa mais que a velocidade.
• Violeta da meia-noite e rosa serve a apps de consumo e ferramentas criativas que querem energia sem o degradê padrão do azul ao roxo.
• Azul-petróleo profundo e menta funciona para marcas de clima, dados e fintech que querem parecer frescas e não corporativas.
• Branco frio e azul elétrico mantém o azul, mas o torna vivo e singular, com quase mais nada ao redor.
• Café expresso e âmbar é quente e incomum em tecnologia, bom para software de hotelaria, áudio e tudo que põe o humano em primeiro lugar.
• Preto e pervinca suave é contido e premium, perto do visual para o qual muitos produtos de IA estão convergindo.

As cinco partes de uma paleta de produto

Páginas de marketing se viram com três cores. Um produto não, porque as interfaces precisam de bordas, estados desativados, realces e alertas. Planeje essas funções antes de escolher os tons, e a paleta continua coerente à medida que o produto cresce.

Transformando uma paleta de tecnologia em tokens de design

Nomeie as cores pela função, não pela aparência. Um token chamado --accent sobrevive a uma reformulação de marca; um chamado --lime vira mentira no dia em que o destaque mudar. Defina cada função uma vez para o modo claro e uma para o modo escuro, e deixe os componentes referenciarem apenas funções.

:root {
  --ground: #fafaf7;
  --surface: #ffffff;
  --text: #111827;
  --text-muted: #4b5563;
  --border: #d9dde3;
  --accent: #3344ff;
  --on-accent: #ffffff;
  --success: #15803d;
  --warning: #b45309;
  --danger: #b91c1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b1020;
    --surface: #141a2e;
    --text: #eef1f6;
    --text-muted: #8a94a8;
    --border: #1e2a4a;
    --accent: #c6f432;
    --on-accent: #0b1020;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
  }
}

O modo escuro é onde as paletas de tecnologia são julgadas, já que desenvolvedores e usuários avançados costumam viver nele. Design de modo escuro trata dos detalhes, como levantar o fundo um pouco acima do preto puro e clarear as cores de status para que não vibrem. Para degradês que continuam vivos nas telas modernas, vale conhecer degradês oklch em CSS.

Confira o contraste antes de publicar

Destaques vivos, como verde-limão, menta e âmbar, ficam maravilhosos sobre fundos escuros e reprovam como texto sobre branco. A WCAG pede 4,5:1 para texto corrido e 3:1 para texto grande e elementos de interface. Teste todo par que pretende usar e anote quais combinações são permitidas. Contraste de cor e acessibilidade traz o método completo.

Levando a paleta além da interface

Posts de lançamento, slides de conferência e gráficos de changelog são onde uma paleta de tecnologia vira marca. Preenchimentos chapados do destaque ficam repetitivos rápido, então dê ao lado de marketing uma superfície mais rica: a cor de fundo com luz passando por ela, granulado, uma lenta deriva do destaque. Branding de SaaS e branding de fintech mostram como isso se dá em duas categorias bem diferentes.

É aqui que o Gradiently entra. Um Mark dá a uma marca de tecnologia um fundo vivo com o qual só você pode exportar depois de reservá-lo, renderiza em todos os tamanhos, de uma imagem de link a um slide, e mantém as notas de versão legíveis ao mover a área mais calma para trás das palavras. Você também pode pedir ao Designer um post de lançamento, e ele cria os outros tamanhos para você.