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: uma base escura, uma base clara, uma rampa de cinzentos neutros, um acento que te pertence e cores convencionais para sucesso, aviso e erro. O azul corporativo ocupa de tal modo o lugar do acento em tantas empresas de software que deixou de significar algo em particular. Troca o acento por algo que a tua categoria não tenha, mantém o resto disciplinado, e a marca continua a parecer tecnologia competente.

Porque as marcas de tecnologia continuam a escolher azul

O azul é seguro. Transmite calma e fiabilidade na maioria dos mercados, assenta bem em interfaces e é a cor de ligação por defeito da web. São boas razões, e o resultado é um mar de azuis quase idênticos em apps bancárias, dashboards na nuvem e ferramentas de produtividade. Psicologia das cores explica as associações; o problema é simplesmente que toda a gente agiu sobre elas ao mesmo tempo.

Nada disto quer dizer que o azul está errado. Quer dizer que o azul não pode ser a tua única ideia. Se o mantiveres, combina-o com uma base inesperada, uma segunda cor ou um material distintivo, para a identidade ser reconhecível mesmo sem o logótipo.

Oito paletas de cores para tecnologia com códigos hex

Cada paleta abaixo tem uma base, um tom de apoio e um acento. Estão escritas como gradientes para veres como as cores se comportam em conjunto e depois separadas em amostras para as duas que mais trabalham na interface de um produto.

• Tinta noturna e lima ácida serve ferramentas de programação e infraestrutura: técnica, noturna, 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 pinheiro é a opção discreta para software de investigação, escrita e saúde, onde a calma conta mais do que a velocidade.
• Violeta da meia-noite e rosa serve apps de consumo e ferramentas criativas que querem energia sem o gradiente de azul para roxo habitual.
• Petróleo escuro 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 torna-o vivo e singular, com quase nada mais à volta.
• Espresso e âmbar é quente e invulgar em tecnologia, bom para software de hotelaria, áudio e tudo o que põe as pessoas primeiro.
• Preto e pervinca suave é contido e premium, próximo do visual para que muitos produtos de IA estão a convergir.

As cinco partes de uma paleta de produto

As páginas de marketing safam-se com três cores. Um produto não, porque as interfaces precisam de bordas, estados desativados, destaques e alertas. Planeia estas funções antes de escolheres tons e a paleta mantém-se coerente à medida que o produto cresce.

Transformar uma paleta de tecnologia em design tokens

Dá nomes às cores pela função, não pela aparência. Um token chamado --accent sobrevive a uma mudança de marca; um chamado --lime torna-se mentira no dia em que o acento mudar. Define cada função uma vez para o modo claro e outra para o escuro, e deixa os componentes referirem 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 programadores e utilizadores avançados vivem muitas vezes nele. Design de modo escuro cobre os detalhes, como levantar ligeiramente a base do preto puro e aclarar as cores de estado para não vibrarem. Para gradientes que se mantêm vivos nos ecrãs modernos, vale a pena ver gradientes oklch em CSS.

Verifica o contraste antes de publicares

Os acentos vivos como lima, menta e âmbar ficam lindos em bases escuras e falham como texto sobre branco. A WCAG pede 4,5:1 para texto corrente e 3:1 para texto grande e elementos de interface. Testa todos os pares que planeias usar e escreve quais as combinações permitidas. Contraste de cor e acessibilidade tem o método completo.

Levar a paleta além da interface

Posts de lançamento, slides de conferências e gráficos de changelog são onde uma paleta de tecnologia se torna marca. Os preenchimentos planos do acento tornam-se repetitivos depressa, por isso dá ao lado de marketing uma superfície mais rica: a cor da base com luz a passar por ela, grão, uma lenta deriva do acento. Branding para SaaS e branding para fintech mostram como isso se joga em duas categorias muito diferentes.

É aqui que o Gradiently entra. Um Mark dá a uma marca de tecnologia um fundo vivo com que só tu podes exportar depois de o reservares, desenha-se em todos os tamanhos, de uma imagem de ligação a um slide, e mantém as notas de versão legíveis ao mover a zona mais calma para trás das palavras. Também podes pedir ao Designer um post de lançamento e ele faz os outros tamanhos por ti.