Energy & Tension: Intuitive Color Control
Tonal Field's proprietary model for understanding color relationships
Beyond HSL and LCH
Traditional color models (HSL, LCH) are mathematically sound but can feel unintuitive when designing systems. Energy and Tension map to design intent instead of color math.
Energy: Calm → Vivid
Energy controls saturation and vibrancy. Move the slider from left (Calm) to right (Vivid).
- Calm (0%): Desaturated, neutral, professional. Good for productivity apps.
- Vivid (100%): Saturated, energetic, playful. Good for creative tools.
Tension: Soft → Sharp
Tension controls harmony and contrast. Move the slider from left (Soft) to right (Sharp).
- Soft (0%): Analogous colors, harmonious, relaxing. Muted palettes.
- Sharp (100%): Complementary colors, high contrast, striking. Bold palettes.
The 2D Field
Combine Energy (X-axis) and Tension (Y-axis) to explore the entire color space in real time. The Field visualizes how colors relate to each other as you adjust both dimensions.
Design Intent
| Style | Energy | Tension |
|---|---|---|
| Professional | Low (Calm) | Low (Soft) |
| Creative | High (Vivid) | High (Sharp) |
| Playful | High (Vivid) | Low (Soft) |
| Elegant | Low (Calm) | High (Sharp) |
Getting Started
Head to the Studio and experiment with the Energy and Tension sliders. Watch the Field update in real time to see the relationships between your colors.