About this tool
Aesthetic Calculator — Color Harmony is a small, free utility for designers and developers. It builds palettes using the HSL model and classic harmony rules. The interface is lightweight, accessible, and runs entirely in your browser.
Color model
HSL separates hue (0–360°), saturation (0–100%), and lightness (0–100%). It’s convenient for exploring relationships because rotating hue preserves perceived color families while saturation and lightness tune intensity and value. RGB represents device primaries; HSL is derived from RGB and is friendlier for editing.
Harmony schemes
Complementary: base color and its opposite at 180°. Great for contrast accents. We add near variants to make a five-color set.
Analogous: neighbors around the wheel, e.g., −30°, −15°, +15°, +30°. Smooth, cohesive palettes.
Triad: three points 120° apart; we add light/dark tweaks for depth.
Tetrad: four points (90° apart) with one near-base variant. Works for complex UIs with multiple roles.
Monochrome: same hue, varied saturation/lightness. Clean and minimal.
Tips
- For UI text, always check WCAG contrast versus light and dark backgrounds.
- Analogous schemes benefit from one contrasting accent for focus states.
- Export palettes as CSS variables to keep design tokens consistent.
Last updated:
Contact: hello@aestheticcalculator1.digital