$ tools/color-wheel

Roda de cores

Escolha uma cor, escolha uma harmonia — complementar, análoga, triádica e mais — e gere uma paleta combinada. Hex, RGB, HSL e CMYK, clique para copiar.

# Escolha uma cor

luminosidade50%
RGB
HSL
HSB
CMYK

$ Harmonia

$ Paleta

$ Como usar a roda de cores

Clique em qualquer lugar da roda para definir sua cor base — o ângulo escolhe a matiz, a distância do centro define a saturação. Use o slider de luminosidade embaixo para clarear ou escurecer, ou digite um código hex direto. Depois escolha uma regra de harmonia à direita e a paleta atualiza na hora. Clique em qualquer amostra para copiar o hex, ou pegue o conjunto inteiro de uma vez.

O que as harmonias significam

A complementar usa a cor diretamente oposta na roda para alto contraste e energia. A análoga usa vizinhas para uma sensação calma e coesa. A tríade espaça três cores uniformemente para um conjunto equilibrado mas animado. A complementar-dividida suaviza um par complementar. A quadrada e a tetrádica dão esquemas de quatro cores com mais alcance. A monocromática e tons & tintas ficam em uma matiz, variando só luminosidade — ótimas para UI limpa e minimalista.

Por que isso importa para seu app

Uma paleta coerente faz seus screenshots App Store, ícone e feature graphic parecerem um produto só em vez de uma pilha de cores aleatórias. Escolha a cor do seu brand, gere uma harmonia e reuse esses hex exatos nas legendas dos screenshots, fundos e assets da store.

$ FAQ

É grátis?

Sim — completamente grátis, sem cadastro, sem limites. Roda inteiramente no seu navegador.

Qual a diferença entre HSL e HSB?

Ambos descrevem matiz e saturação, mas o terceiro valor difere: HSL usa luminosidade (0% preto, 100% branco), enquanto HSB usa brilho. Designers preferem HSL para web; HSB aparece em ferramentas como Photoshop. Esta roda te dá os dois.

Posso começar pela minha cor de marca?

Sim. Digite seu código hex na caixa e a roda e paleta atualizam para combinar. Depois escolha uma harmonia para construir em volta.

Como uso a paleta no meu design?

Clique em qualquer amostra para copiar o hex, ou use "Copiar todos os hex" / "Copiar como vars CSS" para pegar o conjunto inteiro. Cole direto na sua ferramenta de design ou folha de estilo.

Mais ferramentas de cor

Curtindo o LaunchShots?
Grátis para sempre — se te economizou tempo, você pode me pagar um café.
Apoiar →
copiado ✓