Cor

Teoria das cores, paletas e cores de gradiente, com códigos para copiar.

200 guias · 11 temas

Cor

Noçõ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.

Cor

Como 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.

Cor

Cores 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.

Cor

Cores 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.

Cor

Cores 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.

Cor

Esquema 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.

Cor

Como 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.

Cor

Psicologia 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.

Cor

Significado 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.

Cor

Gradientes 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.

Cor

Gradientes 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.

Cor

Gradientes 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.

Cor

Gradientes 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.

Cor

Gradientes 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.

Cor

Gradientes 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.

Cor

Gradientes 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.

Cor

Gradientes 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.

Cor

Contraste 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.

Cor

Có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.

Cor

Paleta 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.

Cor

A 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.

Cor

Cores 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.