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色配色、単色グラデーション）を選択します。
- 3気に入ったパレットをCSS変数またはHEXコードとしてコピーします。
UIデザインにおける色彩調和の重要性
感覚だけに頼らず色相環の調和理論（Color Harmony）に沿ってパレットを組むことで、統一感と高い可読性を備えたWebデザインが実現します。
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.