# Paletas de cores para tecnologia além do azul corporativo

[Canonical HTML page](https://gradiently.design/pt-pt/guide/tech-color-palettes)

O azul transmite confiança, e o de todas as outras empresas de tecnologia também. Eis oito paletas com códigos reais que continuam a parecer software e a estrutura que faz qualquer uma funcionar num produto.

## The short version

- Uma paleta de tecnologia funcional tem cinco partes: uma base escura, uma base clara, uma rampa de cinzentos neutros, um acento da marca e um conjunto de cores de estado.
- O azul domina o branding de tecnologia porque transmite calma e fiabilidade, e é por isso mesmo que um acento azul raramente torna uma marca de tecnologia reconhecível por si só.
- O acento é a parte da paleta de tecnologia de que as pessoas se lembram, por isso deve ser uma cor que a tua categoria ainda não tenha.
- As cores de estado para sucesso, aviso e erro devem manter-se convencionais mesmo que o acento da marca seja invulgar, porque os utilizadores contam com elas para agir.
- Cada par de texto e fundo numa paleta de produto deve cumprir o contraste WCAG, pelo menos 4,5:1 para texto corrente.

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](https://gradiently.design/pt-pt/guide/color-psychology) 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: `linear-gradient(135deg, #0b1020 0%, #1e2a4a 55%, #c6f432 100%)`
- Grafite e laranja de sinalização: `linear-gradient(135deg, #111111 0%, #2b2b2b 50%, #ff5b2e 100%)`
- Papel e pinheiro: `linear-gradient(135deg, #f6f3ee 0%, #e4ddd2 50%, #2f5d50 100%)`
- Violeta da meia-noite e rosa: `linear-gradient(135deg, #0d0b1f 0%, #3b1d6e 50%, #ff6fb5 100%)`
- Petróleo escuro e menta: `linear-gradient(135deg, #061a1c 0%, #0f4c4a 55%, #5ef2c8 100%)`
- Branco frio e azul elétrico: `linear-gradient(135deg, #fafaf7 0%, #d9dde3 50%, #3344ff 100%)`
- Espresso e âmbar: `linear-gradient(135deg, #1a1410 0%, #4a3426 50%, #ffb547 100%)`
- Preto e pervinca suave: `linear-gradient(135deg, #0a0a0a 0%, #1f1f24 60%, #9b8cff 100%)`

Oito pontos de partida. Repara em quanto trabalho faz a base: o mesmo acento parece uma ferramenta de programação em preto e uma app de produtividade calma em papel.

- **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.

- Tinta noturna: #0b1020
- Azul-ardósia: #1e2a4a
- Cinzento névoa: #8a94a8
- Nuvem: #eef1f6
- Lima ácida: #c6f432

Tinta noturna e lima ácida como conjunto de trabalho: duas bases, um cinzento médio para texto secundário e o acento. A lima usa-se num botão e num destaque por ecrã, nunca em texto corrente sobre branco.

## 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.

| Função | O que faz | Exemplo |
| --- | --- | --- |
| Base escura | Fundo da app em modo escuro, rodapés, secções de topo | `#0b1020` |
| Base clara | Fundo da app em modo claro, documentos, email | `#fafaf7` |
| Rampa neutra | Texto, bordas, divisórias, estados desativados, em 8 a 10 passos | `#f2f4f7` a `#111827` |
| Acento da marca | Botões principais, ligações, a única coisa a premir | `#c6f432` |
| Cores de estado | Sucesso, aviso, erro, informação | Verde, âmbar, vermelho, azul |

Primeiro as funções, depois os tons. A maioria dos produtos precisa de muito mais cinzentos do que cores da marca.

> **Mantém as cores de estado aborrecidas** Um acento invulgar é uma decisão de marca. Uma cor de erro invulgar é um problema de usabilidade. O vermelho para erros e o verde para sucesso devem continuar reconhecíveis, mesmo que afines o tom exato para combinar com o acento.

## 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.

```css
: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;
  }
}
```

Tokens de função para os dois modos. O acento pode mudar entre modos: azul elétrico em branco, lima em tinta noturna, desde que ambos pareçam a mesma marca.

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](https://gradiently.design/pt-pt/guide/dark-mode-design) 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](https://gradiently.design/pt-pt/guide/css-gradient-oklch).

## 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](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) tem o método completo.

### Evitar

- Texto lima ou menta numa página branca
- Um acento usado ao mesmo tempo em botões, ligações, gráficos e títulos
- Base preta pura com texto branco puro em todo o lado
- Cores de estado dobradas à marca até o vermelho parecer laranja

### Fazer

- Acentos vivos como preenchimento, com texto escuro por cima
- Uma só função para o acento: a ação principal
- Uma base escura ligeiramente levantada e um texto em branco-sujo
- Cores de estado convencionais afinadas só no tom

## 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](https://gradiently.design/pt-pt/guide/saas-startup-branding) e [branding para fintech](https://gradiently.design/pt-pt/guide/fintech-branding) mostram como isso se joga em duas categorias muito diferentes.

Um gráfico horizontal de lançamento a anunciar deploys em quatro segundos, agora em beta

Uma imagem de lançamento no tamanho de ligação do LinkedIn, 1200×627, onde o fundo leva a marca e as palavras são poucas.

Um post social vertical a anunciar a versão 3 de um produto de software

O mesmo sistema como post vertical de feed a 1080×1350.

É 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.

## FAQ

### Que cores são melhores para uma empresa de tecnologia?

Qualquer cor funciona se a paleta tiver uma estrutura clara: duas bases, uma rampa neutra, um acento e cores de estado convencionais. Escolhe um acento que os teus concorrentes ainda não usem.

### Porque é que tantas empresas de tecnologia usam azul?

O azul transmite calma e fiabilidade e assenta bem em interfaces. Como tantas empresas o escolheram pelas mesmas razões, um acento azul sozinho raramente torna uma marca reconhecível.

### Quantas cores deve ter uma paleta de SaaS?

Normalmente um acento da marca, uma rampa de cinzentos neutros de 8 a 10 passos, duas bases e quatro cores de estado. Os produtos precisam de muitos cinzentos e de muito poucas cores de marca.

### Pode um acento vivo como a lima funcionar numa marca de tecnologia?

Sim, sobretudo em bases escuras. Usa-o como preenchimento com texto escuro por cima e não como texto sobre branco, onde falha o contraste.