Git Branch Colors
How two branch colors blend to create clear merge visualization.┌─────────────────────────────────────────────────────────────────┐
│ │
│ THE MERGE LINE PROBLEM │
│ │
│ main (Blue) feature (Orange) │
│ | | │
│ | | │
│ | merge commit | │
│ |<------------------------+ │
│ | ^ │
│ | | │
│ | What color should │
│ v this line be? │
│ │
│ Option A: Use Blue (main's color) │
│ Problem: Loses visual connection to feature │
│ │
│ Option B: Use Orange (feature's color) │
│ Problem: Inconsistent with main's identity │
│ │
│ Option C: BLEND BOTH COLORS │
│ Solution: Visual connection to both parents │
│ │
└─────────────────────────────────────────────────────────────────┘
The sRGB Problem
┌─────────────────────────────────────────────────────────────────┐
│ │
│ BLENDING BLUE AND ORANGE IN sRGB │
│ │
│ Main (Blue): ████████████████████ rgb(38, 136, 199) │
│ Feature (Orange): ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ rgb(199, 136, 38) │
│ │
│ sRGB Midpoint: │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ R = (38 + 199) / 2 = 118.5 │ │
│ │ G = (136 + 136) / 2 = 136 │ │
│ │ B = (199 + 38) / 2 = 118.5 │ │
│ │ │ │
│ │ Result: rgb(119, 136, 119) = Grayish-green │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ Result: ░░░░░░░░░░░░░░░░░░░░ (muddy gray-green) │
│ │
│ main (vibrant) feature (vibrant) │
│ | | │
│ | +-------------+ | │
│ |<---| MUDDY MIX |------+ │
│ | | (dull) | │
│ | +-------------+ │
│ v │
│ │
│ The merge line looks "sick" compared to vibrant branches │
│ │
└─────────────────────────────────────────────────────────────────┘
The OKLAB Solution
┌─────────────────────────────────────────────────────────────────┐
│ │
│ BLENDING BLUE AND ORANGE IN OKLAB │
│ │
│ Main (Blue): ████████████████████ oklch(55% 0.15 230) │
│ Feature (Orange): ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ oklch(55% 0.15 50) │
│ │
│ OKLAB Calculation: │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Blue: L=0.55, a=-0.10, b=-0.11 │ │
│ │ Orange: L=0.55, a= 0.10, b= 0.11 │ │
│ │ │ │
│ │ Mix at 50%: │ │
│ │ L = 0.55 (same) │ │
│ │ a = (-0.10 + 0.10) / 2 = 0.00 │ │
│ │ b = (-0.11 + 0.11) / 2 = 0.00 │ │
│ │ │ │
│ │ Result: Neutral gray at 55% lightness │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ Wait - this is also gray? │
│ │
│ YES, BUT: │
│ ───────── │
│ Blue and Orange are OPPOSITE on the color wheel (180 apart) │
│ Their true midpoint IS mathematically neutral │
│ │
│ The difference: │
│ - sRGB gray: Muddy, brownish-green, inconsistent lightness │
│ - OKLAB gray: Clean neutral, consistent 55% lightness │
│ │
└─────────────────────────────────────────────────────────────────┘
Non-Opposite Colors
┌─────────────────────────────────────────────────────────────────┐
│ │
│ WHERE OKLAB REALLY SHINES: NON-OPPOSITE COLORS │
│ │
│ Main (Blue): ████████████████████ oklch(55% 0.15 230) │
│ Hotfix (Red): ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ oklch(55% 0.15 25) │
│ │
│ Hue difference: 230 - 25 = 205 degrees (NOT opposite) │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ OKLAB midpoint: │ │
│ │ │ │
│ │ Result: A desaturated PURPLE-ish color │ │
│ │ (Hue approximately 307 degrees) │ │
│ │ │ │
│ │ Compare to sRGB: │ │
│ │ sRGB midpoint = Muddy brown-gray │ │
│ │ OKLAB midpoint = Recognizable purple │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ main (blue) hotfix (red) │
│ | | │
│ | | │
│ |<------- purple-ish -----+ │
│ | (clean) │
│ v │
│ │
│ The merge line is a recognizable intermediate hue! │
│ │
└─────────────────────────────────────────────────────────────────┘
Golden Angle Branch Distribution
┌─────────────────────────────────────────────────────────────────┐
│ │
│ MAXIMUM BRANCH DISTINCTION WITH GOLDEN ANGLE │
│ │
│ Golden Angle = 137.5 degrees (from golden ratio) │
│ No matter how many branches, they never cluster together │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Branch Index Hue Color │ │
│ │ ────────── ───── ─── ───── │ │
│ │ main 0 0 Red │ │
│ │ develop 1 137.5 Yellow-Green │ │
│ │ feature-1 2 275 Blue-Purple │ │
│ │ feature-2 3 52.5 Yellow-Orange │ │
│ │ hotfix 4 190 Cyan │ │
│ │ release 5 327.5 Pink-Red │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ │
│ 0 deg (main) │
│ * │
│ / \ │
│ / \ │
│ 5 * * 3 (feature-2) │
│ (release) 52.5 deg │
│ / \ │
│ / \ │
│ 270 deg -------+-------------------+------- 90 deg │
│ \ / │
│ \ / │
│ 2 * * 4 (hotfix) │
│ (feature-1) 190 deg │
│ 275 deg \ / │
│ \ / │
│ \ / │
│ * │
│ 1 (develop) │
│ 137.5 deg │
│ │
│ Maximum separation between any two branches │
│ │
└─────────────────────────────────────────────────────────────────┘
Merge Scenarios
┌─────────────────────────────────────────────────────────────────┐
│ │
│ FEATURE INTO MAIN │
│ ────────────────── │
│ │
│ main: H=0 (Red) feature: H=275 (Blue-Purple) │
│ │
│ Hue difference: 275 degrees │
│ Shorter path: 360 - 275 = 85 degrees │
│ │
│ main (red) │
│ * │
│ | │
│ |<----- merge line (pink-ish) -----* feature (purple) │
│ | │
│ v │
│ │
│ The merge line is visually between both colors │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ HOTFIX INTO MAIN │
│ ───────────────── │
│ │
│ main: H=0 (Red) hotfix: H=190 (Cyan) │
│ │
│ Hue difference: 190 degrees (close to opposite) │
│ │
│ main (red) │
│ * │
│ | │
│ |<----- merge line (grayish) -----* hotfix (cyan) │
│ | │
│ v │
│ │
│ Near-opposite colors produce near-neutral merge │
│ This is mathematically correct │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ DEVELOP INTO MAIN │
│ ────────────────── │
│ │
│ main: H=0 (Red) develop: H=137.5 (Yellow-Green) │
│ │
│ Hue difference: 137.5 degrees (not opposite) │
│ │
│ main (red) │
│ * │
│ | │
│ |<----- merge line (yellow-ish) -----* develop (green) │
│ | │
│ v │
│ │
│ The merge line is a recognizable intermediate hue │
│ │
└─────────────────────────────────────────────────────────────────┘
Merge Commit vs Merge Line
┌─────────────────────────────────────────────────────────────────┐
│ │
│ DISTINCTION │
│ │
│ Merge LINE: The arrow connecting parent to merge commit │
│ Merge COMMIT: The node representing the merge itself │
│ │
│ parent1 parent2 │
│ * * │
│ \ / │
│ \ <-- MERGE LINES --> / │
│ \ (interpolated) / │
│ \ / │
│ \ / │
│ \ / │
│ +------*------+ │
│ ^ │
│ | │
│ MERGE COMMIT │
│ (target branch color) │
│ │
│ Color assignments: │
│ ─────────────────── │
│ Merge LINE from parent1: Blend of parent1 + target │
│ Merge LINE from parent2: Blend of parent2 + target │
│ Merge COMMIT: Target branch color (pure) │
│ │
└─────────────────────────────────────────────────────────────────┘
Many Branches
┌─────────────────────────────────────────────────────────────────┐
│ │
│ SCALING STRATEGY │
│ │
│ ┌─────────────┬────────────────────────────────────────────┐ │
│ │ Branches │ Strategy │ │
│ ├─────────────┼────────────────────────────────────────────┤ │
│ │ 2-6 │ Golden angle works perfectly │ │
│ │ 7-12 │ Golden angle still works │ │
│ │ 13-20 │ Colors may repeat, use groups │ │
│ │ 20+ │ Add patterns or icons │ │
│ └─────────────┴────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ HIERARCHICAL COLORING FOR MANY BRANCHES │
│ │
│ Tier 1: Branch Type (Hue Range) │
│ ─────────────────────────────── │
│ main/master: Red area (0-30 deg) │
│ develop: Green area (100-160 deg) │
│ feature/*: Blue area (200-260 deg) │
│ hotfix/*: Orange area (30-60 deg) │
│ release/*: Purple area (270-330 deg) │
│ │
│ Tier 2: Within Group (Chroma/Lightness) │
│ ─────────────────────────────────────── │
│ feature/auth: oklch(55% 0.15 220) │
│ feature/ui: oklch(55% 0.12 230) <-- lower chroma │
│ feature/api: oklch(60% 0.15 240) <-- higher lightness │
│ feature/db: oklch(50% 0.15 250) <-- lower lightness │
│ │
│ Same type = same hue range │
│ Different branches = vary chroma/lightness │
│ │
└─────────────────────────────────────────────────────────────────┘
Key Takeaways
┌─────────────────────────────────────────────────────────────────┐
│ │
│ SUMMARY │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. Merge lines should BLEND both parent colors │ │
│ │ Using target-only loses visual connection │ │
│ │ │ │
│ │ 2. OKLAB produces clean merge colors │ │
│ │ No "muddy middle" problem │ │
│ │ Opposite colors = clean neutral │ │
│ │ Non-opposite colors = recognizable intermediate │ │
│ │ │ │
│ │ 3. Use 50% blend for equal parent weighting │ │
│ │ Can adjust for visual emphasis │ │
│ │ │ │
│ │ 4. Golden angle (137.5 deg) maximizes distinction │ │
│ │ Works well up to 12-15 branches │ │
│ │ │ │
│ │ 5. For many branches, use hierarchical coloring │ │
│ │ Hue groups by type │ │
│ │ Chroma/lightness variation within groups │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ When two branches merge, their colors should blend. │
│ OKLAB ensures the merge line looks clean, not muddy. │
│ │
└─────────────────────────────────────────────────────────────────┘