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

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

O destaque é a menor parte de uma paleta e a que as pessoas notam primeiro. Aqui ficam o modo de escolher uma que se distinga da base, mantê-la rara o suficiente para funcionar e defini-la em CSS.

## The short version

- Uma cor de destaque é uma cor contrastante usada em pequenas quantidades para chamar a atenção para o elemento mais importante, como um botão, um preço ou uma palavra de um título.
- Na regra 60 30 10, o destaque são os dez por cento, e é a sua raridade que o torna eficaz.
- Um bom destaque difere das cores de base de pelo menos uma forma forte: matiz, luminosidade ou saturação.
- Um destaque usado para muitas funções diferentes deixa de sinalizar o que quer que seja, por isso dá-lhe um papel principal.
- Em CSS, a propriedade accent-color dá cor aos checkboxes, botões de opção, controlos 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 carregar, o preço, a palavra de um título. Para escolher uma que faça o trabalho, parte das tuas cores de base e escolhe algo que delas difira claramente em matiz, luminosidade ou saturação, e usa-o com parcimónia. Na conhecida divisão 60 30 10, são os dez por cento. Quanto menos vezes 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 olhar para onde ir. Isso faz dele a cor mais funcional que tens. Num site marca a ação principal; num cartaz cai na data; numa marca torna-se o detalhe de que as pessoas se lembram, um ponto final colorido ou uma única risca viva.

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

Uma publicação vertical a anunciar abertura até tarde às sextas, com uma pequena etiqueta por cima do título

Numa publicação destas, o destaque pertence a um só lugar, como a pequena etiqueta por cima do título, e a mais nenhum.

Uma publicação vertical de lista com o título Três coisas a trazer, para um workshop

O mesmo princípio numa publicação de lista: se o destaque aparece, marca só o título.

## Como escolher uma cor de destaque

O contraste é o trabalho todo. Olha para as tuas cores de base e secundárias, pergunta em que se parecem e depois faz o destaque diferente delas de pelo menos uma forma forte.

1. **Contraste de matiz** Escolhe do lado oposto do [círculo cromático](https://gradiently.design/pt-pt/guide/color-wheel). As paletas de azul-marinho e verde-azulado aceitam destaques quentes como coral ou âmbar; as paletas quentes aceitam azul ou verde. As [cores complementares](https://gradiently.design/pt-pt/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 profundo. Uma paleta apagada de cinzentos aceita tanto um destaque preto como um vivo.
3. **Contraste de saturação** Entre cores suaves e poeirentas, uma cor saturada lê-se como destaque mesmo partilhando o matiz. Uma paleta de barro com um vermelhão puro como destaque é um bom exemplo.
4. **Testa-o no tamanho real** Um destaque costuma ser pequeno. Verifica-o como texto de botão ou traço fino de sublinhado, e não como uma amostra grande, porque pequenas áreas de cor parecem mais escuras e baças.

- Base azul-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 cinzento 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 rosada, destaque carvão: `linear-gradient(90deg, #f7f1ea 0%, #f7f1ea 70%, #e7c9bd 70%, #e7c9bd 90%, #2b2b2b 90%, #2b2b2b 100%)`

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

## Onde usar o destaque e onde não

| Usa-o em | Fora de |
| --- | --- |
| O botão principal ou chamada à ação | Botões secundários e de cancelar |
| Uma palavra, preço ou data-chave | Parágrafos inteiros de texto corrido |
| Estados ativos: o separador atual, um item selecionado | Todos os ícones de uma barra de ferramentas |
| Pequenos detalhes de marca: um filete, um ponto, um autocolante | Fundos grandes por trás de texto longo |
| Realces 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 o seu significado. Quando está em tudo, nada se destaca.

> **Um destaque não é uma cor de erro** Se o teu destaque é vermelho, pensa em como fica ao lado das mensagens de erro. Os utilizadores podem ler um botão vermelho como destrutivo. Algumas marcas com destaque vermelho usam outro vermelho para erros, ou mostram os erros com um ícone e texto além da cor.

Os destaques vivos, como lima, amarelo e menta, falham muitas vezes como texto sobre branco. Usa-os como preenchimento com texto escuro por cima e verifica cada combinação segundo as indicações de [contraste de cor](https://gradiently.design/pt-pt/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 tiver infiltrado por todo o lado. Tira uma captura de ecrã da tua página inicial ou de uma semana de publicações, desfoca-a ligeiramente e vê onde aparece o destaque. Se o olhar pousa em três ou quatro sítios ao mesmo tempo, despromove todos menos o mais importante para uma cor secundária. Se não pousa em lado nenhum, o destaque está provavelmente demasiado perto da base e precisa de mais contraste de matiz ou luminosidade.

## A propriedade CSS accent-color

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

```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 só token de destaque usado nos controlos de formulário e no botão principal, com um tom mais profundo para as ligações de texto passarem o contraste sobre branco.

Os navegadores podem ajustar a cor do visto ou do cursor dentro de um controlo para o manter legível contra o teu destaque, por isso testa destaques claros e escuros. Para as restantes cores de um site, vê o [esquema de cores de um site](https://gradiently.design/pt-pt/guide/website-color-scheme).

## Destaques em gradientes e fotografias

Sobre um fundo rico, o destaque tem mais com que competir. Tira-o de fora da família de cores do fundo: um destaque quente sobre um gradiente frio, ou um quase branco sobre um colorido. No Gradiently, a tinta automática escolhe letra clara ou escura para cada linha a partir da paleta do próprio Mark, por isso as palavras continuam legíveis à medida que o fundo se move, e o teu destaque só tem de fazer o seu trabalho. Para mais sobre paletas construídas em torno de uma só cor forte, vê as [paletas de cores tecnológicas](https://gradiently.design/pt-pt/guide/tech-color-palettes).

## FAQ

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

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

### Que parte de um design deve ser a cor de destaque?

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

### Como escolho uma cor de destaque para a minha paleta?

Faz com que difira claramente das cores de base em matiz, luminosidade ou saturação e testa-a no tamanho pequeno em que vai realmente aparecer.

### O que faz accent-color em CSS?

Define a cor de checkboxes, botões de opção, controlos deslizantes e barras de progresso nativos, para os controlos de formulário combinarem com a tua marca sem estilos à medida.

### Uma marca pode ter mais do que 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 com a mesma função anulam-se.