
Cor
Teoria das cores, paletas e cores de gradiente, com códigos para copiar.
200 guias · 11 temas
CorNoções básicas de teoria das cores para quem não é designer
5 min de leitura
Você não precisa de faculdade de arte para escolher bem as cores. Seis ideias explicam quase toda decisão de cor, e cada uma pode ser aprendida em poucos minutos.
CorComo usar um círculo cromático para escolher uma paleta
5 min de leitura
O círculo cromático é a ferramenta mais antiga da cor e ainda a mais útil. Veja como ler um, por que o círculo do pintor e o da tela discordam e como transformá-lo em uma paleta.
CorCores complementares: contraste que ainda parece equilibrado
5 min de leitura
Cores opostas dão o maior contraste que a cor pode oferecer, e o caminho mais rápido para um design que vibra ou um que grita. A diferença está na proporção e na luminosidade.
CorCores análogas: o caminho mais fácil para uma paleta calma
5 min de leitura
Escolha três vizinhas no círculo cromático e é quase impossível errar. A habilidade está em dar a elas contraste suficiente para continuarem interessantes e em saber quando quebrar a calma.
CorCores triádicas e paletas complementares divididas, explicadas
5 min de leitura
Três cores igualmente espaçadas podem deixar uma paleta ousada e equilibrada ao mesmo tempo, ou com cara de caixa de brinquedos. A diferença está quase toda em qual cor lidera.
CorEsquema de cores monocromático: um matiz, uma identidade inteira
5 min de leitura
Um só matiz parece limitante até você ver quanta amplitude cabe dentro dele. Bem construída, uma única cor cobre fundos, textos, botões e gradientes, e parece mais marcante do que um arco-íris.
CorComo escolher as cores da marca: um método passo a passo
6 min de leitura
As cores de uma marca são escolhidas, não encontradas. Um método claro leva você da página em branco a uma paleta marcante, legível e que ainda faça sentido daqui a dois anos.
CorPsicologia das cores: o que é real e o que é mito
6 min de leitura
Tabelas dizendo que vermelho significa fome e azul significa confiança estão por toda parte, e quase sempre são simples demais para servir. Aqui vai um relato mais honesto do que a cor faz e de como usá-la bem.
CorSignificado das cores em diferentes culturas: um guia cuidadoso
6 min de leitura
O branco pode significar um casamento ou um funeral. O vermelho pode significar perigo ou boa sorte. Se seus designs viajam, veja o que as principais cores carregam em lugares diferentes e como conferir antes do lançamento.
CorGradientes roxos: paletas, códigos e como usá-los
5 min de leitura
O roxo é uma das cores de gradiente mais usadas na web, o que o torna uma escolha segura e também um lugar fácil de se perder. Aqui estão paletas que parecem pensadas, com os códigos para usá-las.
CorGradientes azuis: 20 paletas do gelo à meia-noite
5 min de leitura
O azul é a cor mais segura do design, e é exatamente por isso que tantos gradientes azuis parecem iguais. Aqui estão vinte que não parecem, agrupados do mais claro ao mais escuro, com os códigos e o raciocínio por trás deles.
CorGradientes rosa com cara moderna, sem ficar melosos
5 min de leitura
O rosa pode parecer uma loja de doces ou uma revista de moda. A diferença raramente está no rosa em si; está no que você coloca ao lado dele. Aqui estão paletas, combinações e códigos para um rosa atual.
CorGradientes pôr do sol: paletas de laranja, coral e crepúsculo
5 min de leitura
A maioria dos gradientes de pôr do sol erra no mesmo lugar: o meio, onde o azul encontra o laranja e vira cinza. Um céu de verdade nunca faz isso. Aqui está a ordem que a natureza usa e dez paletas construídas sobre ela.
CorGradientes verdes: frescos, profundos e elétricos
5 min de leitura
O verde pode ser uma manhã de primavera, um clube privado ou o flyer de uma rave. Aqui estão gradientes verdes para cada um, com códigos, e uma saída para o clichê do verde-folha.
CorGradientes pretos: como criar com quase-preto
7 min de leitura
O preto puro é um buraco na tela. Os gradientes pretos que parecem caros são feitos de quase-pretos com um pouco de cor dentro e uma luz que se move.
CorGradientes vermelhos: energia sem cara de alerta
6 min de leitura
O vermelho chama atenção mais rápido que qualquer outra cor, e é exatamente por isso que dá errado. Como criar gradientes vermelhos que parecem vivos, quentes e confiantes, e não barulhentos.
CorGradientes arco-íris que não parecem uma predefinição
5 min de leitura
O arco-íris padrão tem uma faixa amarela ofuscante e um buraco azul-escuro no meio. Acerte a luminosidade, escolha o seu arco e o espectro vira uma das ferramentas mais alegres que você tem.
CorContraste de cores: texto legível para todos
6 min de leitura
Contraste é a diferença entre palavras que as pessoas leem e palavras que elas pulam. Os números do WCAG em português claro, como conferi-los e o que muda quando o fundo é um gradiente.
CorCódigos de cor hex, RGB, HSL e OKLCH explicados
6 min de leitura
#7c3aed, rgb(124 58 237), hsl(262 83% 58%) e oklch(54.1% 0.247 293) são o mesmo violeta. Veja o que cada notação realmente está dizendo e quando cada uma se justifica.
CorPaleta de cores a partir de imagem: como tirar uma de uma foto
5 min de leitura
Um conta-gotas dá um pixel. Uma paleta precisa das cores de que você se lembra da imagem, nas proporções certas. Veja como ir de um ao outro.
CorA regra 60 30 10: proporção de cores para designs e marcas
5 min de leitura
A maioria das paletas falha na proporção, não na escolha. Três números dizem quanto usar de cada cor, e funcionam tão bem numa tela de celular quanto nas salas de estar de onde vieram.
CorCores quentes e frias: como usar a temperatura de propósito
6 min de leitura
Toda cor tem uma temperatura, incluindo os seus cinzas e brancos. Aprenda a lê-la e você consegue deixar um design mais próximo, mais calmo ou mais vivo sem mudar um único matiz.