Resumindo
- 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.
Nesta página
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 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.
Num post como este, o destaque fica num só lugar, como o rótulo pequeno acima do título, e em nenhum outro.
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. Paletas de azul-marinho e petróleo aceitam destaques quentes como coral ou âmbar; paletas quentes aceitam azul ou verde. Cores complementares 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.
Onde usar o destaque, e onde não usar
Deixe fora de
Deixe fora de
Deixe fora de
Deixe fora de
Deixe fora de
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: 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 tem os detalhes.
: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 */
}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.
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.
Perguntas frequentes
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.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil