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;
}Cómo generar paletas armónicas
- 1Selecciona un color inicial o pulsa la barra espaciadora para uno aleatorio.
- 2Elige una regla de armonía: Complementaria, Triádica, Análoga o Monocromática.
- 3Copia la paleta como variables CSS o códigos HEX individuales.
Teoría del Color en el Diseño Web
Las armonías cromáticas garantizan coherencia visual y aseguran que los textos mantengan suficiente contraste para su lectura.
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.