How It Works

Complete guide to Tintly's color generation system, harmony algorithms, and design tokens.

Foundation: Shade Generation

Tintly uses a perceptual lightness model to generate 11 shades (50-950) from any input color, matching Tailwind CSS's visual consistency.

Algorithm Steps:

  1. 1Anchor Detection: Analyzes HSL lightness of input color
  2. 2Shade Mapping: Snaps to nearest standard shade (500 = 50% lightness)
  3. 3Saturation Curves: Lighter shades reduce saturation 70%, darker maintain 70%

Harmony Modes

Each harmony mode uses hue rotation mathematics on the HSL color wheel to generate Secondary and Accent colors.

Smart

Uses your inputs first, fills gaps intelligently

Monochromatic

Single hue with saturation/lightness variations

Analogous

Neighbors on color wheel (±30°)

Complementary

Opposite side of wheel (+180°)

Triadic

Evenly spaced triangle (+120°, +240°)

Tetradic

Square harmony (+90°, +180°, +270°)

Complete Scenarios

Comprehensive examples showing exactly what happens with different color inputs across all harmony modes.

1 Color Input

Smart Mode

Input: #3b82f6 (blue)

Primary: #3b82f6 (your input)

Secondary: #f97316 (complementary, +180°)

Accent: #6366f1 (analogous right, +30°)

Neutral: Cool slate gray (hue 215°)

Monochromatic

Input: #3b82f6 (blue, 217° hue)

Primary: #3b82f6 (original)

Secondary: #7da3d9 (desaturated -20%)

Accent: #7db4ff (lighter +20%)

Neutral: Cool slate gray

Analogous

Input: #3b82f6 (blue, 217° hue)

Primary: #3b82f6 (217°)

Secondary: #3b5ff6 (187°, -30°)

Accent: #6366f1 (247°, +30°)

Neutral: Cool slate gray

Complementary

Input: #3b82f6 (blue, 217° hue)

Primary: #3b82f6 (217°)

Secondary: #f97316 (37°, +180°)

Accent: #7db4ff (monochromatic variant)

Neutral: Cool slate gray

Triadic

Input: #3b82f6 (blue, 217° hue)

Primary: #3b82f6 (217°)

Secondary: #f63b5f (337°, +120°)

Accent: #82f63b (97°, +240°)

Neutral: Cool slate gray

Tetradic

Input: #8b5cf6 (violet, 258° hue)

Primary: #8b5cf6 (258°)

Secondary: #f65c8b (348°, +90°)

Accent: #5cf68b (168°, +270°)

Complementary: #c9f65c (78°, +180°) ⭐ Bonus 4th palette!

Neutral: Cool slate gray

2 Color Inputs

Smart Mode

Inputs: #3b82f6 (blue), #f97316 (orange)

Primary: #3b82f6 (first input)

Secondary: #f97316 (second input)

Accent: #6366f1 (analogous from primary, +30°)

Neutral: Cool slate gray

All Other Harmonies

Inputs: #3b82f6 (blue), #f97316 (orange)

When using Monochromatic, Analogous, Complementary, Triadic, or Tetradic:

Primary: #3b82f6 (best saturation/lightness from inputs)

Secondary & Accent: Generated using harmony math (ignores 2nd input)

Note: Explicit harmony modes prioritize mathematical relationships over additional inputs

3 Color Inputs

Smart Mode

Inputs: #3b82f6, #f97316, #10b981

Primary: #3b82f6 (first/best input)

Secondary: #f97316 (second input)

Accent: #10b981 (third input)

Neutral: Cool slate gray (generated)

All Other Harmonies

Inputs: 3 colors provided

Behavior same as 2 color inputs:

Primary: Best color from inputs (highest saturation/lightness score)

Secondary & Accent: Generated using harmony algorithm

Note: Extra inputs are ignored in favor of mathematical harmony

4 Color Inputs

Smart Mode

Inputs: #3b82f6, #f97316, #10b981, #71717a

Primary: #3b82f6 (first input)

Secondary: #f97316 (second input)

Accent: #10b981 (third input)

Neutral: #71717a (fourth input) - Full control!

All Other Harmonies

Inputs: 4 colors provided

Behavior same as 1-3 color inputs:

Primary: Best color from inputs

Secondary & Accent: Generated using harmony math

Neutral: Generated based on primary's temperature

Note: Only Smart mode uses all 4 inputs directly

Color Locking

Lock specific shades to create immutable anchor points that persist across all regenerations.

Lock Primary-500

That exact hex value is preserved forever

Change Harmony

Secondary/Accent regenerate, locked colors stay identical

Switch Light/Dark

Locked colors remain, structural tokens adapt

Structural Tokens

Tintly generates branded neutral tones based on your primary color's temperature.

Cool Primaries

  • • Hue: 215° (Slate)
  • • Saturation: 16%
  • • Result: Professional gray

Warm Primaries

  • • Hue: 25° (Stone)
  • • Saturation: 5%
  • • Result: Earthy gray

Light vs Dark Mode

Light Mode

  • • Background: neutral-50
  • • Surface: neutral-100
  • • Text: neutral-900
  • • Borders: neutral-300

Dark Mode

  • • Background: neutral-950
  • • Surface: neutral-900
  • • Text: neutral-50
  • • Borders: neutral-700

Preview Engine

Web Preview

CSS variables injected into live landing page with GSAP animations.

--primary-500: #3b82f6;
--surface-bg: #f8fafc;

Mobile Preview

60-30-10 rule: 60% Neutral, 30% Primary, 10% Accent.

60%
30%
10%