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

Matiz (Hue)
Saturação 100%
Luminosidade 50%

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.