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;
}How to create color schemes
- 1Select your base starting color or randomize with spacebar.
- 2Choose a harmony rule: Complementary, Triadic, Analogous, or Monochromatic.
- 3Copy the palette as CSS custom properties or HEX swatches.
Color Theory in UI Design
Consistent color harmony establishes brand identity, guides visual hierarchy, and ensures strong contrast ratios for readability.
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.