See your colors
come to life.
Generate palettes, set your type scale, and preview everything on a real site — instantly.
TintScale Editor
Colors
#4338ca
#6366f1
#c7d2fe
#f5f5f7
#1a1a2e
Typography
Aa
Playfair / Inter
Everything you need to start designing.
Color Palettes
Harmony-based palette generation in OKLCH color space. Complementary, triadic, split-complementary — with automatic dark mode derivation and WCAG contrast checking.
Typography Scale
Pick from 15 curated Google Font pairings or choose your own. Set a modular scale ratio and base size — get fluid type with CSS clamp() baked in.
Live Preview
See your colors and type applied to a real website template in real-time. Not a swatch grid — a full page that updates as you design.
Your design system, visualised.
Stop guessing how your colors and type will look together. See them on a real page in seconds.