🎨 Gerador de Cores
Crie paletas de cores, gradientes CSS e explore harmonias cromáticas
🎯 Seletor de Cor
💡 Dica: Clique no círculo de cores para selecionar rapidamente
🎨 Paleta de Cores
🌈 Harmonias Cromáticas
🌈 Gerador de Gradientes
background: linear-gradient(45deg, #ff0000, #00ff00);
📁 Exportar Cores
CSS Variables
:root {
--primary: #FF0000;
--secondary: #00FF00;
}
SCSS/Sass
$primary: #FF0000;
$secondary: #00FF00;
JSON
{
"primary": "#FF0000",
"secondary": "#00FF00"
}
Adobe ASE
Arquivo Adobe Swatch Exchange
💡 Dicas de Teoria das Cores
🎯 Cores Complementares
Cores opostas no círculo cromático criam contraste máximo. Ideal para CTAs e elementos que
precisam se destacar.
🔺 Tríade
Três cores igualmente espaçadas no círculo cromático. Cria vibrância mantendo harmonia.
Perfeito para designs jovens.
🎨 Monocromático
Variações de uma única cor com diferentes saturações e luminosidades. Cria elegância e
sofisticação.
♿ Acessibilidade
Mantenha contraste mínimo de 4.5:1 para textos. Use ferramentas de verificação para garantir
legibilidade.
📱 Responsividade
Teste cores em diferentes dispositivos. Considere como gradientes se comportam em telas
pequenas.
🧠 Psicologia das Cores
Azul transmite confiança, vermelho urgência, verde naturalidade. Escolha cores alinhadas com
sua mensagem.