Gerador de esquemas de cores

Suporta a geração de vários esquemas de cores, extração de cores de imagens, geração de gradientes CSS e efeitos de sombra, com processamento de cores individuais ou 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

Modo monocromático

Captura em lote

1Escolher cor base

RGB: 2, 132, 199 HSL: 243°, 75%, 59%

2Escolher esquema de cores

Nº de cores:

Ajuste de saturação: 0%

Ajuste de brilho: 0%

3Esquema de cores

4Gradiente CSS

Tipo de gradiente:

Ângulo: 90°

5Efeito de sombra

Raio de desfoque: 20px

Raio de expansão: 0px

Opacidade: 40%

Pré-visualizar

6Extrair cores da imagem

Clique para enviar ou arraste a imagem aqui

Suporta JPG, PNG, GIF, WebP

1Enviar várias imagens

Clique para enviar ou arraste várias imagens aqui

Suporta seleção em lote; a cor principal será extraída de cada imagem

Cores extraídas por imagem:

Esquema de cores:

Copiado para a área de transferência

'; zip.file('preview.html', htmlContent); const content = await zip.generateAsync({ type: 'blob' }); const link = document.createElement('a'); link.href = URL.createObjectURL(content); const timestamp = new Date().toISOString().replace(/[-:.]/g, '').slice(0, 15); link.download = `color-palettes-${timestamp}.zip`; link.click(); downloadBatchZip.disabled = false; batchStatus.textContent = 'ZIP文件已下载'; }); // ========== 导出功能 ========== document.getElementById('exportPaletteBtn').addEventListener('click', function() { if (currentPalette.length === 0) return; const data = { baseColor: baseColorPicker.value, scheme: currentScheme, colors: currentPalette.map(c => ({ hex: c.hex, rgb: `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`, hsl: `hsl(${Math.round(c.hsl.h)}, ${Math.round(c.hsl.s)}%, ${Math.round(c.hsl.l)}%)` })), gradient: gradientCode.textContent, shadow: shadowCode.textContent }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `color-palette-${baseColorPicker.value.replace('#', '')}.json`; link.click(); showCopyToast('配色方案已导出'); }); // ========== 初始化 ========== schemeDescription.textContent = schemeDescriptions['monochromatic']; updateColorDisplay(); updatePalette(); });

Instruções

Instruções de uso do software

Escolher a cor base:Use o seletor de cores para escolher a cor base ou insira diretamente o valor HEX (como #4f46e5). Você também pode clicar no botão "Cor aleatória" para obter inspiração. A ferramenta exibirá em tempo real as informações dos valores RGB e HSL.
Escolher o esquema de cores:
- Esquema monocromático:Mesmo matiz, com variações geradas ao alterar a saturação e a luminosidade
- Esquema de cores análogas:Cores adjacentes no círculo cromático, naturais e suaves
- Esquema de cores complementares:Duas cores opostas no círculo cromático, com contraste forte
- Complementar dividido:A cor base e as cores dos dois lados de sua cor complementar
- Esquema triádico:Três cores distribuídas em distâncias iguais no círculo cromático
- Esquema tetrádico quadrado:Quatro cores distribuídas em distâncias iguais
- Esquema tetrádico:Dois pares de cores complementares, com camadas bem definidas
Ajustar parâmetros:
- Número de cores:Escolha gerar 3, 5, 7 ou 9 cores
- Ajuste de saturação:Arraste o controle deslizante para aumentar ou diminuir a saturação geral
- Ajuste de luminosidade:Arraste o controle deslizante para aumentar ou diminuir a luminosidade geral
Gerar gradiente CSS:Escolha o tipo de gradiente linear ou radial e ajuste o parâmetro de ângulo para gerar um código de gradiente CSS pronto para uso.
Gerar efeito de sombra:Ajuste os parâmetros de raio de desfoque, raio de expansão e transparência para gerar código CSS de sombra com base na cor base atual.
Extrair cores de uma imagem:Depois de carregar uma imagem, a ferramenta extrai automaticamente os tons principais. Você pode clicar em qualquer ponto da imagem para selecionar a cor com precisão e aplicar a cor extraída como cor base.
Modo de seleção de cores em lote:Alterne para a aba "Seleção de cores em lote", carregue várias imagens, defina a quantidade de cores a extrair de cada uma e o modo de expansão do esquema de cores, clique para iniciar a extração em lote e, ao concluir, baixe um ZIP com todos os resultados.
Copiar e exportar:Clique em qualquer cartão de cor para copiar o valor da cor. Clique no botão "Exportar esquema de cores" para baixar um arquivo JSON com as informações completas do esquema de cores.

Perguntas frequentes

R: O esquema monocromático é adequado para designs simples e elegantes; cores análogas são adequadas para temas naturais e fundos em gradiente; cores complementares são adequadas para designs de destaque que exigem forte contraste; cores triádicas são adequadas para produtos infantis vibrantes e criações artísticas; esquemas tetrádicos quadrados e tetrádicos são adequados para interfaces complexas e visualização de dados. Escolha o esquema adequado de acordo com o objetivo do design.

R: Carregue uma imagem na área "Extrair cores da imagem"; a ferramenta analisará automaticamente e extrairá 8 tons principais. Você pode clicar em uma cor extraída para selecioná-la e, em seguida, clicar no botão "Usar a cor selecionada como cor base" para gerar uma paleta de cores completa com base nessa cor.

R: Clique no botão "Copiar" na área do código de gradiente, cole o código no seu arquivo CSS e aplique-o ao elemento que precisa de um fundo em gradiente. São compatíveis dois tipos: gradiente linear e gradiente radial; no gradiente linear, é possível personalizar o ângulo e a direção.

R: O ZIP baixado após a conclusão do processamento em lote contém três arquivos: palette-summary.json (resumo em JSON de todos os dados das paletas), palettes.css (definições de variáveis CSS prontas para uso), preview.html (página de pré-visualização). Isso facilita o uso das paletas extraídas em diferentes cenários.

R: A saturação controla a intensidade da cor: aumentar a saturação torna a cor mais viva, enquanto reduzi-la deixa a cor mais suave e acinzentada; a luminosidade controla o quão clara ou escura é a cor: aumentar a luminosidade deixa a cor mais clara, enquanto reduzi-la a deixa mais escura. Ao ajustar esses dois parâmetros, é possível refinar o efeito geral da paleta de cores.

R: Suporta formatos de imagem comuns, como JPG, JPEG, PNG, GIF e WebP. Recomenda-se usar imagens com cores ricas e alto contraste para obter resultados mais precisos na extração das cores principais. O processamento da imagem é feito totalmente localmente e não será enviado para o servidor.

R: Clique diretamente em qualquer cartão de cor ou bloco de cor, e o valor HEX correspondente será copiado automaticamente para a área de transferência; no rodapé da página, será exibida a mensagem "Copiado para a área de transferência". Nos resultados em lote, basta clicar na barra de cor para copiar o valor correspondente.