Círculo cromático online

Escolha uma cor base e o círculo cromático calcula paletas análogas, complementares, triádicas e mais. Copie os códigos HEX, RGB, HSL ou OKLCH ou exporte-os para CSS, Tailwind e Figma.

Harmonias

Harmonias: Análoga

Conversao de cor

Consulte o código desta cor em dez formatos distintos, prontos para copiar.

O que é o círculo cromático

O círculo cromático (ou roda de cores) organiza as cores segundo seu matiz, de 0° a 360°. É a base da teoria das cores: mostra num relance quais tons estão próximos, quais se opõem e quais esquemas são equilibrados ou contrastantes. É usado em web design, branding, UI, ilustração e em qualquer projeto em que a paleta precise comunicar com clareza.

Ao contrário do seletor de cor, pensado para quando você já tem um código concreto, ou do seletor de cor de imagem, pensado para extrair cores de uma foto, o círculo cromático do Matizly parte de uma única cor base. Você define o tom na roda ou em Hex, RGB, HSL ou OKLCH; a ferramenta calcula o resto conforme a harmonia escolhida e permite ajustar, bloquear, reordenar e exportar a paleta.

Cores primárias, secundárias e terciárias

O círculo cromático tradicional, o da pintura e da escola, tem doze cores construídas em três níveis.

Primárias

Vermelho, amarelo e azul. Não se obtêm misturando outras cores, e a partir delas se criam todas as demais.

Amarelo
Vermelho
Azul

Secundárias

Laranja, verde e violeta. Cada uma surge da mistura de duas primárias em partes iguais: vermelho e amarelo dão laranja, amarelo e azul dão verde, e azul e vermelho dão violeta.

Laranja
Violeta
Verde

Terciárias

Misturam uma primária com a secundária vizinha: amarelo-alaranjado, vermelho-alaranjado, vermelho-violeta, azul-violeta, azul-esverdeado e amarelo-esverdeado.

Amarelo-alaranjado
Vermelho-alaranjado
Vermelho-violeta
Azul-violeta
Azul-esverdeado
Amarelo-esverdeado

Cores quentes e frias

Se você dividir o círculo ao meio, ficam duas famílias. As cores quentes (amarelos, laranjas e vermelhos) lembram o sol e o fogo: transmitem energia e proximidade e parecem se aproximar de quem olha.

As cores frias (verdes, azuis e violetas) lembram a água e o céu: transmitem calma e distância e parecem se afastar. No design, costuma-se reservar uma cor quente para o que deve chamar a atenção e usar as frias em fundos e áreas de descanso.

Quentes
Frias

RYB, RGB e CMY: três círculos cromáticos

Não existe um único círculo cromático: ele muda conforme se misture pigmento, luz ou tinta.

RYB, para pintura

Vermelho, amarelo e azul como primárias. É o círculo tradicional da escola e das belas-artes, útil para misturar tintas.

RGB, para telas

Vermelho, verde e azul de luz: somados dão branco. É o usado por monitores, celulares e web design, e o que mostra a roda do Matizly.

CMY, para impressão

Ciano, magenta e amarelo de tinta, mais o preto (CMYK). Ao se sobreporem, subtraem luz. É o sistema da impressão.

Como usar o círculo cromático do Matizly

Clique na roda ou digite um código Hex, RGB, HSL ou OKLCH para definir a cor base. No menu, escolha a harmonia: análoga, complementar, complementar dividida, triádica, tetrádica, quadrada, monocromática, tons, composta ou personalizada. A paleta é atualizada na hora em colunas que você pode bloquear, reordenar, editar ou ampliar.

A partir de cada cor você abre sombras e ajustes finos; pode guardar a paleta na sua coleção, copiar códigos ou exportar para CSS, Tailwind ou Figma. Tudo roda no navegador: não precisa de conta nem de enviar arquivos. Se partir de uma foto, use antes o seletor de cor de imagem e traga esses tons para o círculo.

Tipos de harmonias do círculo cromático

Análoga

As cores análogas ficam lado a lado no círculo. No Matizly, a partir da cor base são gerados cinco tons vizinhos (aprox. ±20° e ±40°). O resultado é uma paleta suave e coesa, ideal para fundos, seções tranquilas e marcas que buscam continuidade visual sem saltos bruscos de contraste.

Complementar

A harmonia complementar une uma cor ao seu oposto na roda (180°). O Matizly devolve o par base + complementar. É o esquema de maior contraste: perfeito para CTAs, acentos e para destacar um elemento sem adicionar mais tons que o necessário.

Complementar dividida

Em vez do oposto exato, usa a cor base e os dois vizinhos da sua complementar (150° e 210°). Mantém o contraste da complementar, mas com menos tensão visual. Funciona bem em interfaces e branding que precisam de acentos vivos sem polarizar toda a paleta.

Triádica

Três cores equidistantes no círculo (0°, 120° e 240°). O Matizly calcula a tríade a partir da sua cor base. Equilibra vibração e harmonia: útil para paletas com personalidade, iconografia e sistemas de cor em que cada tom tem um papel claro.

Tetrádica

Também chamada retangular: dois pares complementares (no Matizly, deslocamentos de 60°, 180° e 240°). Gera quatro cores com muita variedade. Convém escolher uma dominante e usar as demais como acentos para não saturar a interface.

Quadrada

Quatro cores em intervalos iguais (90°, 180° e 270° a partir da base). Parecida com a tetrádica, mas mais simétrica. Dá paletas ricas e equilibradas para dashboards, ilustrações ou identidades com vários acentos no mesmo nível.

Monocromática

Um único matiz com diferentes luminosidades e saturações, do claro ao escuro. No círculo do Matizly, a roda se comporta como uma escala do mesmo tom. Ideal para tipografia, superfícies, estados e temas minimalistas com muita coerência.

Tons

Variações do mesmo matiz alterando sobretudo a saturação (adicionando cinza à cor base). A escala de tons é mais suave e sofisticada que as sombras puras. Serve para hierarquias discretas, chips, bordas e fundos que não competem com o conteúdo.

Composta

Combina vizinhos análogos da cor base com uma zona de complementar dividida (inclui o oposto). O Matizly gera um esquema de cinco cores rico, mas controlado: análogas para a área principal e complementares para os acentos.

Personalizada

Divisão uniforme de cinco cores ao redor do círculo (a cada 72°). É um ponto de partida livre: depois você pode mover, bloquear ou eliminar cores na paleta até deixar o esquema exato de que seu projeto precisa.

Perguntas frequentes

No círculo tradicional (RYB), são vermelho, amarelo e azul. Em telas (RGB), as primárias são vermelho, verde e azul, e na impressão (CMY) ciano, magenta e amarelo.

As quentes são os amarelos, laranjas e vermelhos; as frias, os verdes, azuis e violetas. As quentes chamam a atenção e as frias transmitem calma.

É uma representação circular dos matizes (0°–360°) que ajuda a escolher combinações harmoniosas ou contrastantes. No Matizly, serve para gerar paletas prontas para design e desenvolvimento a partir de uma única cor base.

Análoga, complementar, complementar dividida, triádica, tetrádica, quadrada, monocromática, tons, composta e personalizada. Cada uma coloca as cores na roda segundo regras diferentes da teoria das cores.

São as que ficam em lados opostos do círculo (180°). Escolha sua cor base, selecione «Complementar» e o Matizly calcula o par automaticamente, com códigos prontos para copiar.

As análogas são vizinhas na roda e dão combinações suaves. As triádicas ficam a 120° umas das outras e geram paletas mais vibrantes, mantendo o equilíbrio entre os três tons.

Ambas usam quatro cores. A quadrada as distribui a cada 90°. A tetrádica (retangular) usa dois pares complementares com outra distribuição (no Matizly, 60°/180°/240°), mais assimétrica e com mais variedade de acentos.

A monocromática varia a luminosidade (e a saturação) do mesmo matiz, do claro ao escuro. A de tons reduz a saturação adicionando cinza, com um resultado mais suave e sofisticado. Ambas mantêm um único matiz.

O círculo cromático explora harmonias a partir de uma cor base. O seletor de cor serve quando você já conhece o código exato e quer convertê-lo entre Hex, RGB, HSL, OKLCH e outros formatos.

Sim. Você pode copiar cada cor, guardar a paleta na sua coleção e exportá-la em formatos úteis para CSS, Tailwind ou Figma, sem cadastro.