Base Seed Color:
Harmony Model
Number of Colors in Palette5 Colors
Generated Palette Preview
Click any card to copy HEX#1
#3cf6af
Click to copy
#2
#3ce0f6
Click to copy
#3
#3c83f6
Click to copy
#4
#523cf6
Click to copy
#5
#af3cf6
Click to copy
:root {
--palette-color-1: #3cf6af;
--palette-color-2: #3ce0f6;
--palette-color-3: #3c83f6;
--palette-color-4: #523cf6;
--palette-color-5: #af3cf6;
}Como gerar paletas harmônicas
- 1Escolha uma cor de partida ou aperte a barra de espaço para gerar aleatoriamente.
- 2Selecione a regra de harmonia: Complementar, Triádica, Análoga ou Monocromática.
- 3Copie a paleta como variáveis CSS ou códigos HEX individuais.
Teoria das Cores no Design de Interfaces
Harmonias cromáticas garantem coesão estética e asseguram contraste adequado para leitura de textos.
Architecture & Privacy
- Algorithmic Color Wheel Trigonometry: Calculates exact hue angles and saturation balancing in HSL space.
- Multiple Color Export targets: CSS variables, Tailwind configuration JSON, and JSON Hex arrays.
- Automated Text Contrast detection: Determines WCAG dark/light contrast for each generated swatch.
- Zero dependencies: Pure client-side mathematical calculations rendered with zero delay.