brand-expansion

ブランドカラーの拡張

1つのブランドカラーから、完全で一貫性のあるカラシステムを作成します。複数のハーモニータイプを使って、1つの入力色から数学的に導き出した関連色相を生成します。

使用する場面

• 「ブランドカラーを完全なシステムに拡張したい」
• 「色が1色しかないので、もっと増やしたい」
• 「このHEX値から完全なパレットを作成したい」
• 「ロゴの色からカラシステムを構築したい」

インストール

npx @basiclines/rampa

拡張戦略

1つのブランドカラーから、以下を生成します。

1. プライマリー - ブランドカラーの全シェード
2. 類似色 - 微妙な変化をつける隣接色
3. 補色 - コントラストやCTAに使う反対色
4. 分裂補色 - より柔らかなコントラストの選択肢

レシピ

ステップ 1：プライマリーの色調

ブランドカラーを10段階のスケールに拡張します。

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

ステップ 2：類似色

色相環上で隣り合う色（±30°）です。微妙な変化をつけるのに最適です。

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

出力：base、analogous-1、analogous-2

ステップ 3：補色

最大限のコントラストを生む正反対の色です。CTAに最適です。

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

出力：base、complementary-1

ステップ 4：分裂補色

補色の両隣に位置する2色で、より繊細なコントラストを生みます。

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

出力：base、split-complementary-1、split-complementary-2

完全な例

ブランドカラーが #7c3aed（紫）の場合：

# 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

出力構造

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

使い方ガイド

ハーモニー	最適な用途
プライマリー	主なブランド用途、ヘッダー、プライマリーボタン
類似色	ホバー状態、関連セクション、グラデーション
補色	CTA、アラート、注意を引く必要があるハイライト
分裂補色	セカンダリーアクション、バッジ、代替アクセント

オールインワンコマンド

最小限の出力で概要をすばやく確認するには：

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

ヒント

1. まずはプライマリーと補色だけを使い、必要に応じて追加します
2. 類似色はグラデーションやトランジションに最適です
3. 補色は目を引くため、控えめに使います
4. 分裂補色なら、補色ほど強くないコントラストを得られます
5. すべての色が数学的な関係を共有しているため、自動的に調和します