# Cor de destaque: como escolher a que faz o trabalho

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

O destaque é a menor parte de uma paleta e a primeira que as pessoas notam. Veja como escolher uma cor que se separe da base, mantê-la rara o bastante para funcionar e aplicá-la em CSS.

## The short version

- Uma cor de destaque é uma cor contrastante usada em pequenas doses para chamar atenção para o elemento mais importante, como um botão, um preço ou uma palavra do título.
- Na regra 60 30 10, o destaque é os dez por cento, e é a raridade que o torna eficaz.
- Um bom destaque se diferencia das cores de base em pelo menos um aspecto forte: matiz, luminosidade ou saturação.
- Um destaque usado para muitas funções diferentes deixa de sinalizar qualquer coisa, então dê a ele um papel principal.
- Em CSS, a propriedade accent-color dá cor a caixas de seleção, botões de opção, controles deslizantes e barras de progresso nativos.

Uma **cor de destaque** é a cor pequena e contrastante de uma paleta que aponta para o que importa: o botão a clicar, o preço, a única palavra de um título. Para escolher uma que faça o trabalho, parta das suas cores de base e escolha algo que se diferencie delas com clareza em matiz, luminosidade ou saturação, e depois use com moderação. Na conhecida divisão 60 30 10, ela é os dez por cento. Quanto menos ela aparece, mais cada aparição significa.

## Para que serve uma cor de destaque

A maior parte de um design é cor de base e de apoio: fundos, painéis, texto. O destaque é a exceção que diz ao olho para onde ir. Isso faz dela a cor mais funcional que você tem. Num site, ela marca a ação principal; num cartaz, cai sobre a data; numa marca, vira o detalhe que as pessoas lembram, um ponto final colorido ou uma única faixa viva.

A [regra 60 30 10](https://gradiently.design/pt-br/guide/60-30-10-rule) dá as proporções: cerca de sessenta por cento de cor dominante, trinta por cento de secundária, dez por cento de destaque. Trate os dez como um teto, não como meta. Muitos dos melhores layouts usam bem menos.

Um post vertical anunciando horário estendido às sextas, com um rótulo pequeno acima do título

Num post como este, o destaque fica num só lugar, como o rótulo pequeno acima do título, e em nenhum outro.

Um post vertical de lista com o título Três coisas para levar, para uma oficina

O mesmo princípio num post de lista: se o destaque aparece, marca só o título.

## Como escolher uma cor de destaque

Contraste é todo o trabalho. Olhe suas cores de base e secundárias, pergunte em que elas se parecem e faça o destaque diferente delas em pelo menos um aspecto forte.

1. **Contraste de matiz** Escolha do lado oposto do [círculo cromático](https://gradiently.design/pt-br/guide/color-wheel). Paletas de azul-marinho e petróleo aceitam destaques quentes como coral ou âmbar; paletas quentes aceitam azul ou verde. [Cores complementares](https://gradiently.design/pt-br/guide/complementary-colors) são a escolha clássica.
2. **Contraste de luminosidade** Sobre uma base escura, um destaque claro; sobre uma base pálida, um destaque profundo. Uma paleta discreta de cinzas aceita um destaque preto tão bem quanto um vivo.
3. **Contraste de saturação** Entre cores suaves e empoeiradas, uma cor saturada funciona como destaque mesmo tendo o mesmo matiz. Uma paleta de argila com um destaque vermelhão puro é um bom exemplo.
4. **Teste no tamanho real** Um destaque normalmente é pequeno. Confira como texto de botão ou num traço fino de sublinhado, não numa amostra grande, porque áreas pequenas de cor parecem mais escuras e apagadas.

- Base marinho, destaque coral: `linear-gradient(90deg, #12233d 0%, #12233d 70%, #2e4a6b 70%, #2e4a6b 90%, #ff7a59 90%, #ff7a59 100%)`
- Base areia, destaque azul profundo: `linear-gradient(90deg, #f3ece2 0%, #f3ece2 70%, #c9b49a 70%, #c9b49a 90%, #1f3a5f 90%, #1f3a5f 100%)`
- Base floresta, destaque açafrão: `linear-gradient(90deg, #1b2a24 0%, #1b2a24 70%, #3f5a4c 70%, #3f5a4c 90%, #f2c14e 90%, #f2c14e 100%)`
- Base cinza lilás, destaque vermelho: `linear-gradient(90deg, #e9e4ea 0%, #e9e4ea 70%, #b9aebf 70%, #b9aebf 90%, #d42a35 90%, #d42a35 100%)`
- Base preta, destaque lima: `linear-gradient(90deg, #111111 0%, #111111 70%, #3a3a3a 70%, #3a3a3a 90%, #c6f432 90%, #c6f432 100%)`
- Base rosado, destaque grafite: `linear-gradient(90deg, #f7f1ea 0%, #f7f1ea 70%, #e7c9bd 70%, #e7c9bd 90%, #2b2b2b 90%, #2b2b2b 100%)`

Seis paletas desenhadas em cerca de 70, 20 e 10 por cento. Cada destaque se diferencia da base em matiz, luminosidade ou ambos.

## Onde usar o destaque, e onde não usar

| Use para | Deixe fora de |
| --- | --- |
| O botão principal ou a chamada para ação | Botões secundários e de cancelar |
| Uma palavra-chave, um preço ou uma data | Parágrafos inteiros de texto corrido |
| Estados ativos: a aba atual, um item selecionado | Todos os ícones de uma barra de ferramentas |
| Pequenos detalhes de marca: um fio, um ponto, um selo | Fundos grandes atrás de texto longo |
| Destaques num gráfico: a única série que importa | Todas as séries de um gráfico ao mesmo tempo |

Um destaque com uma função principal mantém seu significado. Quando está em tudo, nada se destaca.

> **Destaque não é cor de erro** Se o seu destaque é vermelho, pense em como ele fica ao lado de mensagens de erro. Os usuários podem ler um botão vermelho como destrutivo. Algumas marcas com destaque vermelho usam outro vermelho para erros, ou mostram erros com ícone e texto além da cor.

Destaques vivos como lima, amarelo e menta muitas vezes falham como texto sobre branco. Use como preenchimento com texto escuro por cima e confira cada combinação com as orientações de [contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility): pelo menos 4,5:1 para texto corrido e 3:1 para texto grande e partes da interface.

Uma auditoria rápida ajuda se o destaque se espalhou por todo lado. Tire um print da sua página inicial ou de uma semana de posts, desfoque um pouco e veja onde o destaque aparece. Se o olho cai em três ou quatro lugares ao mesmo tempo, rebaixe todos menos o mais importante para uma cor secundária. Se não cai em lugar nenhum, o destaque provavelmente está perto demais da base e precisa de mais contraste de matiz ou luminosidade.

## A propriedade CSS accent-color

Na web, `accent-color` dá cor aos controles de formulário nativos numa linha só: caixas de seleção, botões de opção, controles deslizantes e barras de progresso. Ela é suportada nas versões atuais dos principais navegadores; a [referência do MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) tem os detalhes.

```css
:root {
  --accent: #d42a35;
}

/* Native checkboxes, radios, sliders and progress bars */
body {
  accent-color: var(--accent);
}

/* The same accent on your own components */
.button-primary {
  background: var(--accent);
  color: #ffffff;
}

a {
  color: #b3202a; /* a deeper shade for text links on white */
}
```

Um único token de destaque usado nos controles de formulário e no botão principal, com um tom mais profundo para links de texto, para passarem no contraste sobre branco.

Os navegadores podem ajustar a cor do visto ou do marcador dentro de um controle para mantê-lo legível contra o seu destaque, então teste destaques claros e escuros. Para o resto das cores de um site, veja [esquema de cores para site](https://gradiently.design/pt-br/guide/website-color-scheme).

## Destaques sobre gradientes e fotografias

Num fundo rico, o destaque tem mais com que competir. Tire a cor de fora da família de cores do fundo: um destaque quente sobre um gradiente frio, ou um quase branco sobre um fundo colorido. No Gradiently, a Tinta automática escolhe letras claras ou escuras para cada linha a partir da própria paleta do Mark, então as palavras continuam legíveis enquanto o fundo se move, e o seu destaque só precisa cumprir sua única função. Para mais sobre paletas construídas em torno de uma cor forte, veja [paletas de cores para tecnologia](https://gradiently.design/pt-br/guide/tech-color-palettes).

## FAQ

### O que é cor de destaque em design?

Uma cor contrastante usada em pequenas doses para chamar atenção para o elemento mais importante, como um botão, uma palavra-chave ou um preço.

### Quanto de um design deve ser cor de destaque?

Cerca de dez por cento no máximo, seguindo a regra 60 30 10. Muitos designs fortes usam bem menos.

### Como escolho a cor de destaque da minha paleta?

Faça com que ela se diferencie claramente das cores de base em matiz, luminosidade ou saturação, e teste no tamanho pequeno em que ela vai aparecer de verdade.

### O que o accent-color faz no CSS?

Define a cor de caixas de seleção, botões de opção, controles deslizantes e barras de progresso nativos, para que os controles de formulário combinem com a sua marca sem estilização personalizada.

### Uma marca pode ter mais de uma cor de destaque?

Pode, mas cada uma deve ter uma função distinta, como uma para ações e outra para realces. Dois destaques fazendo a mesma função se anulam.