Gerador de Esquema de Cores
Gere uma paleta de cores harmoniosa a partir de uma cor base — complementar, análogo, tríade, tétrade, semi-complementar ou monocromático — usando rotação de matiz HSL. Obtenha valores HEX e HSL para cada cor.
Entrada
A cor inicial da qual toda a paleta é construída.
Saída
Your color palette will appear here.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/color-scheme-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseColor": "#FF0000",
"schemeType": "complementary"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `color-scheme-generator` tool (Color Scheme Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/color-scheme-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Esquema de Cores — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
Um gerador de esquema de cores constrói uma paleta de cores que funcionam bem juntas, começando a partir de uma única cor base e girando seu matiz em torno da roda de cores de acordo com as regras clássicas da teoria das cores. Escolha uma cor base e um tipo de esquema, e receba de volta os valores HEX e HSL para cada cor na paleta — pronto para usar em uma ferramenta de design, arquivo CSS ou configuração Tailwind.
Tipos de esquema
- Complementar — a cor base mais seu oposto na roda (matiz + 180°). Alto contraste, ótimo para acentos e chamadas para ação.
- Análogo — a cor base mais seus vizinhos 30° em cada lado. Cores que ficam próximas umas das outras na roda, produzindo uma paleta calma e de baixo contraste.
- Tríade — três cores espaçadas uniformemente 120° distantes. Vibrante e equilibrado, uma escolha comum para paletas de marcas lúdicas.
- Semi-Complementar — a cor base mais as duas cores adjacentes ao seu complemento (+150° e +210°). Quase tanto contraste quanto complementar, mas mais suave.
- Tétrade / Quadrado — quatro cores espaçadas uniformemente 90° distantes. Oferece a maior variedade, então geralmente precisa de uma cor dominante e três cores de suporte.
- Monocromático — o mesmo matiz em quatro níveis de claridade diferentes (20%, 40%, 60%, 80%). Uma paleta segura e coesiva para tonalidades e tons de UI.
Como usar
- Escolha uma cor base com o seletor de cores (ou digite um valor hexadecimal).
- Escolha um tipo de esquema no menu suspenso.
- A tabela de paleta se atualiza instantaneamente com a função de cada cor, código hexadecimal e valor HSL.
- Copie a tabela ou baixe como CSV para usar em software de design, propriedades personalizadas de CSS ou tema Tailwind.
Tudo funciona no espaço HSL: a cor base é convertida para matiz/saturação/claridade, o matiz é girado pelos deslocamentos fixos que cada esquema requer, e os resultados são convertidos de volta para RGB e hexadecimal. A rotação de matiz se envolve em 360°, então um matiz base de 300° mais um deslocamento tríade de 120° corretamente chega a 60°, não 420°.
Perguntas Frequentes
Por que HSL em vez de RGB? Girar um matiz no espaço HSL mantém saturação e claridade constantes, então cada cor gerada tem a mesma intensidade e brilho da base — apenas o matiz muda. Fazer a rotação equivalente em RGB é muito mais complicado e não mapeia claramente para como as rodas de cores são ensinadas.
A saturação ou claridade mudam entre as cores? Para cada esquema, exceto monocromático, não — apenas o matiz muda, então todas as cores na paleta compartilham a saturação e claridade da cor base. Monocromático mantém matiz e saturação fixos e, em vez disso, varia a claridade em quatro passos fixos.
Posso usar as cores geradas diretamente em CSS?
Sim. Cada linha fornece um código hexadecimal (#RRGGBB) e uma string HSL (hsl(h, s%, l%)), então você pode copiar qualquer formato diretamente em uma folha de estilos ou arquivo de tokens de design.
Qual esquema devo escolher? Complementar e semi-complementar funcionam bem para um único acento contra um fundo neutro. Análogo e monocromático convêm para interfaces calmas e coesivas. Tríade e tétrade oferecem mais variedade para ilustrações, gráficos ou paletas de marca que precisam de várias cores distintas.
Privacidade
Toda a matemática das cores acontece localmente no seu navegador — sua cor base e esquema escolhido nunca são enviados para um servidor.