brand-expansion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

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

从单一品牌色生成以下内容：

主色 - 品牌色的完整色阶
邻近色 - 用于细微变化的相邻颜色
互补色 - 用于对比/CTA的对立颜色
分裂互补色 - 对比度更柔和的选项

Recipe

操作步骤

Step 1: Primary Ramp

步骤1：主色色阶

The brand color expanded to full 10-shade scale:

bash

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

将品牌色扩展为10个色阶的完整尺度：

bash

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

Step 2: Analogous Colors

步骤2：邻近色

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

色轮上相邻的颜色（±30°）——非常适合细微变化：

bash

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

输出：

base

analogous-1

analogous-2

Step 3: Complementary Color

步骤3：互补色

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

完全对立的颜色，可实现最大对比度——非常适合CTA：

bash

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

输出：

base

complementary-1

Step 4: Split-Complementary

步骤4：分裂互补色

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

位于互补色两侧的两种颜色——对比度更细腻：

bash

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

输出：

base

split-complementary-1

split-complementary-2

Complete Example

完整示例

For brand color

#7c3aed

(purple):

bash

undefined

针对品牌色

#7c3aed

（紫色）：

bash

undefined

Primary - the purple itself

Primary - 紫色本身

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

Analogous - blue and magenta variations

Analogous - 蓝色和洋红色变体

rampa -C "#7c3aed" --add=analogous -L 95:10 --size=10 -O css

Complementary - lime/yellow for CTAs

Complementary - 用于CTA的石灰绿/黄色

rampa -C "#7c3aed" --add=complementary -L 95:10 --size=10 -O css

Split-complementary - yellow-green options

Split-complementary - 黄绿调选项

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

undefined

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

undefined

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 */
}

css

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

  /* Analogous */
  --analogous-1-0: #eff6ff;  /* 偏蓝 */
  --analogous-1-5: #3b82f6;
  --analogous-2-0: #fdf2f8;  /* 偏粉 */
  --analogous-2-5: #ec4899;

  /* Complementary */
  --complementary-1-0: #fefce8;  /* 黄/石灰绿 */
  --complementary-1-5: #84cc16;

  /* Split-complementary */
  --split-complementary-1-0: #f0fdf4;  /* 绿色 */
  --split-complementary-2-0: #fefce8;  /* 黄色 */
}

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

色彩调和类型	最佳用途
主色	品牌核心应用、标题、主按钮
邻近色	悬停状态、相关区块、渐变效果
互补色	CTA、警告、需要吸引注意力的高亮内容
分裂互补色	次要操作、徽章、替代强调色

All-in-One Command

一键生成命令

For a quick overview with minimal output:

bash

undefined

如需快速查看所有调和类型，输出简化结果：

bash

undefined

See all harmonies at once

同时查看所有调和类型

rampa -C "#7c3aed" --add=analogous --add=complementary --add=split-complementary --size=3 -O css

undefined

rampa -C "#7c3aed" --add=analogous --add=complementary --add=split-complementary --size=3 -O css

undefined

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

先从主色+互补色开始，根据需要添加更多类型
邻近色非常适合渐变和过渡效果
互补色要谨慎使用——它会吸引大量注意力
分裂互补色既能提供对比度，又不会像直接互补色那样强烈
所有颜色都基于数学关联，自动保证协调性