Comece com uma cor e gere harmonias complementares, análogas, triádicas e mais; depois exporte como CSS, Tailwind v4, SVG ou PNG.
Guia de teoria das cores
A roda organiza os matizes em círculo para tornar as relações espaciais. Distância significa contraste, proximidade significa calma. Tudo abaixo é interativo — mude a roda e essas ideias encaixam mais rápido.
Dica: compartilhe qualquer resultado — a URL sempre guarda cor base, harmonia e luminosidade.
Um só matiz nunca basta para interfaces. Misture com preto para sombras (cabeçalhos, hovers), com branco para tons claros (fundos, modais) e com cinza para tons (texto suave, bordas).
Índigo da sombra ao tom claro. A mesma lógica move cada paleta acima.
Na roda RYB clássica, vermelho, amarelo e azul são primárias; da mistura nascem laranja, verde e roxo. Na tela misturamos luz (RGB), por isso a ferramenta calcula em HSL/HSV: o mesmo círculo, afinado para pixels.
Twelve stops around the disc; every other color contains a trace of a primary.
O Ease Colors é uma roda de cores online e grátis para designers e desenvolvedores que precisam de cor confiável sem sair do navegador. Escolha uma cor base no seletor de roda de cores interativo, visualize seis harmonias de uma vez e copie códigos HEX, RGB, HSL ou OKLCH prontos para produção. Nada é enviado a servidores, não há conta para criar, e cada resultado ganha uma URL compartilhável que restaura sua cor base, harmonia e luminosidade exatas. Uma rampa de sombras integrada estende cada cor base do tom claro ao escuro, e a página inteira funciona por teclado, com foco visível em cada etapa.
A roda de cores é um diagrama circular de cores onde os matizes se organizam para tornar as relações espaciais: cores vizinhas transmitem calma e cores opostas criam tensão. A clássica roda de primárias das aulas de arte mistura tinta vermelha, amarela e azul, enquanto a roda RGB da sua tela mistura luz. Esta ferramenta calcula cada harmonia no espaço HSV/HSL, afinado para pixels em vez de pigmento. Arraste um ponto pelo disco para definir o matiz, aproxime-o da borda para a saturação e gire o anel externo de luminosidade para levar um mesmo tom do fundo claro ao texto escuro. Como o disco é sempre desenhado com vividez total, os marcadores ficam distribuídos e arrastáveis mesmo com paletas quase pretas ou quase brancas — a geometria nunca colapsa nos extremos.
Esta roda de cores online também é um seletor de cores online e uma ferramenta de cores completa:
Explorando direções? Aperte Shuffle na galeria de paletas de cores para um giro aleatório por mais de 400 conjuntos selecionados.
Antes de publicar, rode a simulação de daltonismo para visualizar protanopia, deuteranopia, tritanopia e acromatopsia, e mantenha o texto legível com rótulos de contraste automático em cada faixa.
Cada seletor de cores desta página fala quatro formatos. O campo hexadecimal aceita qualquer código como #EDEA37, o seletor RGB lê tripletos como rgb(99, 102, 241), e HSL mais OKLCH cobrem a uniformidade perceptual que o RGB sozinho não alcança. Times front-end recebem um fluxo de seletor HTML e seletor CSS pronto: exporte variáveis CSS, tokens de tema Tailwind v4, objeto de configuração Tailwind v3, JSON do Figma ou só os códigos. O conta-gotas de tela integrado (EyeDropper) amostra qualquer pixel do seu monitor, e os pontos da roda seletora continuam arrastáveis em qualquer luminosidade. Este seletor de cores online é grátis, com exportações com alfa que cobrem cada caso de uso RGBA. O modo personalizado congela qualquer conjunto gerado em uma lista editável à mão: clareie ou escureça uma amostra, arraste para reordenar, insira um ponto médio mesclado ou estenda qualquer ponta — cada mudança refletida na hora na URL compartilhável.
Fotógrafos e designers de marca recorrem ao seletor de cores de imagem para emprestar paletas do mundo real. Envie uma foto — ou cole a URL de uma imagem — e o seletor a partir de imagem mostra uma lupa com grade de pixels e mira, para ler o pixel exato que você aponta, mesmo com 800% de zoom. Trave a cor, copie como HEX, RGB, HSL ou OKLCH e envie-a à roda com um clique. Ajuste a paleta extraída de duas a dez cores, baixe a faixa como PNG ou guarde-a no cofre do navegador para reabrir depois. Cada imagem que você abre fica no seu dispositivo — nada é enviado a lugar algum.
Quando uma amostra não basta, o gerador de paletas de cores constrói uma paleta pronta a partir de imagem em segundos. Ele pontua pixels por frequência e saturação, filtra quase-duplicatas e ordena os vencedores por matiz — de duas a dez cores que você pode reordenar, ampliar e excluir. Quem retoca retratos vai gostar dos conjuntos de tons de pele, ao lado das coleções pastel, azuis e verdes. Salve favoritos no cofre do navegador, baixe qualquer paleta de cores como PNG ou SVG e exporte tokens para entrega. Os pinos arrastáveis viajam sobre a imagem nos seus pontos de amostragem, então repetir uma cor é arrastar, não adivinhar.
Uma roda complementar emparelha matizes a 180° para tensão máxima — laranja contra azul, violeta contra amarelo. A faixa de complementares marca sua cor base com um ponto preto, para ver exatamente qual amostra reservar a botões e links enquanto o tom dominante comanda o layout. As rotações dividida, triádica, tetrádica e quadrada a acompanham no painel de harmonias como alternativas mais suaves ou ousadas.
Doze sistemas de análise sazonal vivem na galeria — dezessete paletas cada. Briefings quentes e suaves começam com a paleta outono suave, e os frios e suaves recorrem à paleta verão suave. Os conjuntos de paleta outono de alta calidez servem campanhas de outono e marcas de comida, e a paleta inverno profundo entrega brilhos joia sobre quase-preto para luxo e noite. Designs claros e quentes puxam da paleta primavera clara, o minimalismo arejado da paleta verão frio e o trabalho escuro opulento da paleta outono profundo. O contraste gelado pertence à paleta inverno frio, o calor brilhante à paleta primavera quente, os meios suaves à paleta verão verdadeiro e o luxo silencioso à paleta neutra. Climas mais amplos de verão, inverno, primavera e outono completam mais de 400 conjuntos, cada um com cópia HEX, RGB, HSL e OKLCH em um clique.
Se você chegou buscando Adobe color wheel, Adobe color picker, Canva color wheel ou Google color picker, já conhece a tarefa: transformar uma cor de marca em um conjunto equilibrado. O Ease Colors cobre o mesmo terreno — harmonias, códigos HEX/RGB/HSL/OKLCH, amostragem de imagens e exportação de paletas — grátis no navegador, com URLs compartilháveis e sem contas no caminho. Controles de teclado em primeiro lugar, rótulos para leitores de tela e modo de movimento reduzido incluídos.
Abra a roda de cores, teste o seletor a partir de imagem ou explore mais de 400 paletas de cores. Sua próxima paleta está a um arrasto.
Clique em qualquer amostra. Troque o formato para HEX, RGB, HSL ou OKLCH antes de copiar.
Pressione “Copiar link”. A URL guarda cor base, harmonia e luminosidade.
Sim. Cada HEX, token e exportação é seu — sem atribuição.
A roda de cores é um diagrama circular que organiza os matizes para tornar as relações espaciais: cores vizinhas acalmam, enquanto opostas criam tensão. Aulas de arte ensinam uma roda vermelho-amarelo-azul para misturar tinta; telas usam uma roda RGB que mistura luz. Designers a usam para escolher cores base, construir harmonias e checar contraste antes de uma paleta chegar ao layout.
Comece com uma cor base — digite um código HEX, abra o seletor do sistema ou use a tela. Escolha uma harmonia como análoga, complementar ou triádica e ajuste a luminosidade com o anel externo até ter tons de fundo, texto e destaque. Copie cada amostra como HEX, RGB, HSL ou OKLCH e cole os códigos em CSS, Tailwind ou Figma.
Seu propósito principal é tirar a adivinhação de combinar cores. Em vez de emparelhar no olho, você lê a geometria: distância significa contraste e adjacência significa calma. Isso dá a cada interface uma hierarquia clara — um tom dominante, alguns de apoio e um destaque reservado — para que botões, links e títulos caiam onde o olho os espera.
A literatura de design costuma listar oito: monocromático (um matiz, várias luminosidades), análogo (vizinhos), complementar (opostos), complementar dividido (uma base mais dois vizinhos do seu oposto), triádico (triângulo), tetrádico ou retangular (dois pares complementares), quadrado (quatro cantos) e acromático ou neutro (pretos, brancos e cinzas). Esta ferramenta cobre seis diretamente, mais um modo personalizado para listas de duas a oito cores.
Arraste um ponto pelo disco: o ângulo define o matiz e a distância ao centro define a saturação. Arraste o anel externo para definir a luminosidade sem tocar matiz nem saturação. Você também pode digitar um valor HEX exato, abrir a caixa de cores do sistema ou escolher qualquer pixel do seu monitor com o seletor de tela — todos os métodos chegam à mesma cor base compartilhável.
Um seletor de cores transforma uma escolha visual num valor exato e reutilizável. Ele lê qualquer cor como códigos HEX, RGB, HSL ou OKLCH para que designers e desenvolvedores falem a mesma língua: o que você clica é idêntico ao bit que chega em CSS, tokens Tailwind ou estilos Figma — sem aproximar tons no olho.
Os tipos principais são seletores de roda ou disco (matiz mais saturação de relance), seletores de sliders (canais RGB ou HSL), campos HEX (valores diretos), conta-gotas ou seletores de tela (amostram seu monitor), seletores de imagem (lupa sobre foto) e bibliotecas de paletas (conjuntos selecionados como a galeria de 400+ aqui). Este site combina os seis num só fluxo.
Um código de cor é um valor de texto que descreve uma cor exata. HEX a escreve como seis dígitos hexadecimais (#EDEA37); RGB lista os canais vermelho, verde e azul; HSL lista matiz, saturação e luminosidade; OKLCH é um formato perceptual mais novo onde passos numéricos iguais parecem igualmente diferentes. Os quatro descrevem a mesma amostra — o formato só muda como você a lê e edita.
Escolha uma cor com a roda, um slider, o campo HEX ou o seletor de tela, e copie no formato que seu projeto precisa — HEX para a web, RGB ou RGBA para código de apps, HSL para ajustes rápidos, OKLCH para uniformidade perceptual. Cole o valor na sua folha de estilos, config Tailwind ou ferramenta de design, e guarde o link para ter a cor exata a um clique depois.
Uma paleta de cores mantém todas as superfícies de um produto falando a mesma linguagem visual. Ela atribui papéis — fundo, texto, destaques, estados — para que interfaces pareçam coerentes em vez de montadas com amostras aleatórias. Uma boa paleta ainda embute contraste e hierarquia desde o início, o que significa menos correções de legibilidade e uma marca mais forte e reconhecível.
Os tipos comuns incluem paletas monocromáticas, análogas e complementares construídas com geometria de roda; paletas pastel e neon definidas por energia; paletas sazonais por subtom de pele (de outono suave a neutro); paletas de marca fixadas em cores corporativas; e paletas extraídas amostradas de fotografias. A galeria aqui reúne todas — mais de 400 conjuntos em mais de 60 categorias.
Parta de uma cor base que combine com o clima — quente e suave, fria e arejada, ou escura e dramática. Amplie com uma harmonia e revise como os usuários a verão: contraste do texto, destaques de botões e simulação de daltonismo para protanopia, deuteranopia e tritanopia. Se sobreviver às três, compartilhe o link e publique.