Ferramenta de recomendação de combinações de cores

Gerador profissional de combinações de cores, com suporte a vários modos de paleta, como monocromático, cores complementares e tríade, permitindo gerar e exportar esquemas de cores em lote.

Relatório de bug

Modo de execução no navegador: Seus dados são processados no navegador e não são enviados ao servidor.

Velocidade e estabilidade: A velocidade de processamento depende do seu dispositivo e navegador. Para trabalhos em lote grandes, a versão para desktop pode ser mais estável.

Carregando ferramenta, aguarde...

Se a ferramenta online não carregar ou executar, tente a ferramenta para desktop. https://tools.yikeaigc.com/

Uso da ferramenta

Voltar para a versão antiga

Configure antes de processar

Defina a cor principal e as regras antes de gerar um esquema exportável

Comece rápido com cores de exemplo ou insira um HEX preciso. Cada etapa tem um botão Avançar; depois gere, salve e baixe.

HEX / RGB / HSL / CMYK Monocromático / Complementar / Tríade CSS / SCSS / JSON / PNG Configurações salvas

Cor principal atual Clique no valor da cor para copiar

HEX

RGB

HSL

Configuração da cor principal

Defina primeiro a cor principal. Use o seletor, o campo HEX ou os controles HSL; o esquema atualiza em tempo real.

Cor baseSuporta HEX de 6 dígitos

Valor de cor HEX Exemplo: #0F6FAE

CMYK

Ajuste fino HSLIdeal para ajustar matiz, saturação e brilho

Matiz205°

Saturação78%

Brilho37%

Nome do esquema

Cores de exemploClique para continuar ajustando

Regras de cores

Escolha um modelo de cores e defina a quantidade e o deslocamento claro/escuro. Gere uma vez com os padrões e ajuste conforme o design.

Modelo de coresCores análogas criam um visual uniforme e suave

Parâmetros de geraçãoDefina os parâmetros antes da prévia

Quantidade de cores

Ângulo adjacente24°

Desvio de saturação0%

Desvio de brilho0%

Neutralização8%

Ordenação

Tipo de gradiente

Ângulo do gradiente90°

Prévia e ajuste

Verifique o código de cada cor, a legibilidade do texto e a prévia da interface. Clique em qualquer valor de cor para copiar.

Esquema de cores5 cores

Prévia da interfacePara avaliar rapidamente a hierarquia

Código do gradienteCopie direto para CSS

Salvar e exportar

Exporte o esquema atual ou gere vários em lote. Os resultados em lote mostram só os 20 primeiros; o download inclui todos.

Opções em loteDefina a quantidade conforme necessário

Quantidade de esquemas

Variação

Conteúdo de exportaçãoPara arquivos e código

HEX RGB HSL CMYK

JSON CSS SCSS PNG

Ação de downloadO ZIP inclui todos os resultados em lote

Resultados em loteAinda não gerado em lote

Defina a cor principal e as regras de paleta, depois clique em “Gerar em lote”.

Esquemas salvos0 itens

Os esquemas salvos aparecem aqui. Você pode reaplicar ou excluir.

Instruções

Instruções de uso do software

Definir a cor principal: em “Configurações da cor principal”, use o seletor de cores, o campo de entrada HEX ou os controles deslizantes HSL para definir a cor base; você também pode clicar em uma cor de exemplo para carregá-la rapidamente.
Escolher a regra de combinação de cores:
- Monocromática: gera níveis claros e escuros com base no mesmo matiz, ideal para designs com estilo uniforme.
- Cores análogas: seleciona matizes adjacentes, ideal para efeitos visuais suaves e em camadas.
- Cores complementares: usa cores opostas no círculo cromático, ideal para destacar botões, títulos e conteúdo importante.
- Complementar dividida: adiciona cores suavizadas à relação de contraste, ideal para imagens promocionais e visuais de campanhas.
- Tríade, tétrade e quadrado: ideal para gráficos, etiquetas de categoria e interfaces com vários módulos.
- Cores neutras: ideal para páginas empresariais, interfaces de ferramentas e designs de documentação.
Ajustar os parâmetros de geração: defina a quantidade de cores, o ângulo de proximidade, o deslocamento de saturação, o deslocamento de luminosidade, a proporção de neutralização, o modo de ordenação e o ângulo do gradiente.
Pré-visualizar o esquema de cores: acesse “Pré-visualização e ajustes finos” para ver as informações de HEX, RGB, HSL e contraste de cada cor; clique no botão do valor da cor para copiar.
Salvar esquemas e configurações: clique em “Salvar esquema atual” para favoritar o esquema de cores; clique em “Salvar configurações” para salvar os parâmetros atuais, facilitando o uso posterior.
Geração em lote: acesse “Salvar e exportar” para definir a quantidade de esquemas e a amplitude de variação; clique em “Gerar em lote” para criar vários esquemas de cores. A interface exibe os primeiros 20 esquemas, e o download incluirá todos os resultados.
Exportar arquivos: você pode baixar arquivos JSON, CSS, SCSS e PNG separadamente, ou selecionar o conteúdo a exportar e baixar um pacote ZIP.

Perguntas frequentes

Resposta: Monocromática é ideal para extensões de marca e interfaces simples; cores análogas são ideais para páginas suaves e uniformes; cores complementares são ideais para destacar informações importantes; tríade é ideal para gráficos e layouts com vários módulos; cores neutras são ideais para ferramentas empresariais e cenários de documentação.

Resposta: Insira o código da cor no campo HEX, por exemplo #0F6FAE, e a ferramenta atualizará sincronizadamente o seletor de cores, os controles deslizantes HSL e a pré-visualização da combinação de cores. Você também pode fazer ajustes finos usando os controles deslizantes de matiz, saturação e luminosidade.

Resposta: O arquivo CSS gera códigos de cores em forma de variáveis, que podem ser usados em estilos de páginas web; o arquivo SCSS é adequado para projetos Sass. Ambos os formatos facilitam a reutilização em sistemas de design, troca de temas e estilos de componentes.

Resposta: A geração em lote se baseia na cor principal atual, nas regras de combinação de cores e na amplitude de variação, deslocando de forma adequada a matiz, a saturação e o brilho para obter vários esquemas de cores relacionados em estilo, mas sem repetição.

Resposta: Os esquemas salvos são registrados no armazenamento local do dispositivo atual. Após limpar os dados do site ou trocar de dispositivo, os esquemas salvos anteriormente podem deixar de ser exibidos; recomenda-se exportar os arquivos dos esquemas importantes em tempo hábil.

Resposta: Não. O cálculo das cores, o salvamento dos esquemas e a geração de arquivos são todos realizados no dispositivo atual; a cor principal, os esquemas e o conteúdo exportado não são enviados para o servidor.

Resposta: Em “Pré-visualizar ajuste fino”, veja o contraste do texto branco e do texto escuro para cada cor. Quanto maior o valor, mais clara será a leitura do texto. Ao usar como fundo do corpo do texto, recomenda-se escolher uma cor de texto com maior contraste.