Brand Expansion

Transform a single brand color into a complete, cohesive color system. Uses multiple harmony types to generate related hues - all mathematically derived from one input.

When to Use

•"Expand my brand color into a full system"
•"I only have one color, need more"
•"Create a complete palette from this hex"
•"Build a color system from my logo color"

Installation

bash

npx @basiclines/rampa

The Expansion Strategy

From one brand color, generate:

•Primary - Full ramp of the brand color
•Analogous - Adjacent colors for subtle variations
•Complementary - Opposite color for contrast/CTAs
•Split-complementary - Softer contrast options

Recipe

Step 1: Primary Ramp

The brand color expanded to full 10-shade scale:

bash

rampa -C "<brand-color>" -L 95:10 --size=10 -O css --name=primary

Step 2: Analogous Colors

Colors adjacent on the wheel (±30°) - great for subtle variations:

bash

rampa -C "<brand-color>" --add=analogous -L 95:10 --size=10 -O css

Outputs: base, analogous-1, analogous-2

Step 3: Complementary Color

Direct opposite for maximum contrast - perfect for CTAs:

bash

rampa -C "<brand-color>" --add=complementary -L 95:10 --size=10 -O css

Outputs: base, complementary-1

Step 4: Split-Complementary

Two colors flanking the complement - more nuanced contrast:

bash

rampa -C "<brand-color>" --add=split-complementary -L 95:10 --size=10 -O css

Outputs: base, split-complementary-1, split-complementary-2

Complete Example

For brand color #7c3aed (purple):

bash

# Primary - the purple itself
rampa -C "#7c3aed" -L 95:10 --size=10 -O css --name=primary

# Analogous - blue and magenta variations
rampa -C "#7c3aed" --add=analogous -L 95:10 --size=10 -O css

# Complementary - lime/yellow for CTAs
rampa -C "#7c3aed" --add=complementary -L 95:10 --size=10 -O css

# Split-complementary - yellow-green options
rampa -C "#7c3aed" --add=split-complementary -L 95:10 --size=10 -O css

Output Structure

css

:root {
  /* Primary */
  --primary-0: #faf5ff;
  --primary-5: #7c3aed;
  --primary-9: #2e1065;

  /* Analogous */
  --analogous-1-0: #eff6ff;  /* Blue-ish */
  --analogous-1-5: #3b82f6;
  --analogous-2-0: #fdf2f8;  /* Pink-ish */
  --analogous-2-5: #ec4899;

  /* Complementary */
  --complementary-1-0: #fefce8;  /* Yellow/lime */
  --complementary-1-5: #84cc16;

  /* Split-complementary */
  --split-complementary-1-0: #f0fdf4;  /* Green */
  --split-complementary-2-0: #fefce8;  /* Yellow */
}

Usage Guide

Harmony	Best For
Primary	Main brand applications, headers, primary buttons
Analogous	Hover states, related sections, gradients
Complementary	CTAs, alerts, highlights that need attention
Split-complementary	Secondary actions, badges, alternative accents

All-in-One Command

For a quick overview with minimal output:

bash

# See all harmonies at once
rampa -C "#7c3aed" --add=analogous --add=complementary --add=split-complementary --size=3 -O css

Tips

•Start with just primary + complementary, add more as needed
•Analogous colors are great for gradients and transitions
•Use complementary sparingly - it demands attention
•Split-complementary offers contrast without the intensity of direct complement
•All colors share mathematical relationships = automatic cohesion