A versão curta
- 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.
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 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 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.
Numa publicação destas, o destaque pertence a um só lugar, como a pequena etiqueta por cima do título, e a mais nenhum.
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. 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 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.
Onde usar o destaque e onde não
Fora de
Fora de
Fora de
Fora de
Fora de
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: 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 tem os pormenores.
: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 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.
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.
Perguntas frequentes
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.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil