status-from-accent

アクセントカラーからステータスカラーを生成

スクエアハーモニーを使って、ブランドカラーと数学的な関係を持つステータス／フィードバックカラー一式（成功、警告、危険、情報）を生成します。

使用する場面

• 「ブランドに合うステータスカラーを作成したい」
• 「成功、警告、エラーのカラーが必要」
• 「アクセントカラーからフィードバックカラーを生成したい」
• 「ブランドイメージに合う危険／成功カラーを作りたい」

インストール

npx @basiclines/rampa

スクエアハーモニーのアプローチ

スクエアハーモニーでは、色相環上で90°ずつ離れた4色を生成します。これにより、数学的な関係を保ちながら、色を最大限に区別できます。

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

次の4つのランプが出力されます。

• base - ブランドカラー（情報／プライマリとして使用）
• square-1 - +90°回転
• square-2 - +180°回転（反対色）
• square-3 - +270°回転

色相をステータスに対応付ける

実際のカラーは入力によって異なります。生成後、色相に基づいて対応付けてください。

色相範囲	一般的なステータス
80-150°	成功（緑／ティール）
30-80°	警告（黄／オレンジ）
0-30° または 330-360°	危険（赤／ピンク）
180-270°	情報（青／紫）

例： ブランドカラーが青（#3b82f6、約220°）の場合：

• base（220°）→ 情報
• square-1（310°）→ 危険（マゼンタ／赤系）
• square-2（40°）→ 警告（オレンジ系）
• square-3（130°）→ 成功（緑系）

完全な例

# Generate all 4 status ramps from blue brand
rampa -C "#3b82f6" --add=square -L 95:15 --size=10 -O css

出力には4つの完全なランプが含まれます。色相に基づいて意味を割り当ててください。

:root {
  /* Info (base - blue) */
  --base-0: #eff6ff;
  --base-5: #3b82f6;
  --base-9: #1e3a8a;

  /* Danger (square-1 - magenta/red) */
  --square-1-0: #fdf2f8;
  --square-1-5: #ec4899;
  --square-1-9: #831843;

  /* Warning (square-2 - orange) */
  --square-2-0: #fff7ed;
  --square-2-5: #f97316;
  --square-2-9: #7c2d12;

  /* Success (square-3 - green) */
  --square-3-0: #f0fdf4;
  --square-3-5: #22c55e;
  --square-3-9: #14532d;
}

意味に合わせた名前の変更

各ランプの用途を特定したら、明示的な名前を指定して再実行できます。

# If you know square-3 is your green/success
rampa -C "#22c55e" -L 95:15 --size=10 -O css --name=success

または、CSSで対応付けます。

:root {
  --success: var(--square-3-5);
  --warning: var(--square-2-5);
  --danger: var(--square-1-5);
  --info: var(--base-5);
}

別の方法：ステータス用のベースカラーを指定する

生成された色相が希望に合わない場合は、入力を調整してください。

# Start from green to ensure success is the base
rampa -C "#22c55e" --add=square -L 95:15 --size=10 -O css
# Now: base=green, square-1=blue, square-2=red, square-3=yellow

ヒント

1. スクエアハーモニーにより、視覚的に最大限の区別が保証されます
2. 4色すべてが同じ「数学的なDNA」を共有します
3. -L 95:15 の範囲はステータスカラーに適しています（明るい背景、濃い文字）
4. ランプ全体には --size=10、最小構成には --size=5 を使用します
5. 中間のランプ値（4-6）は、バッジ、ボタン、アラートに最適です