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;
}生成和谐配色步骤
- 1挑选一个基础主色，或敲击空格键随机生成新配色。
- 2切换色彩搭配规则（互补色、邻近色、三色组或单色梯度）。
- 3复制配色为 CSS 变量或单个 HEX 色值。
色彩理论在界面设计中的价值
遵循色环调和原理构建的调色板能有效确保界面色彩关系的和谐感，避免出现视觉冲突与低对比度导致的阅览疲劳。
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.