rampa-colors

Rampa カラーパレットジェネレーター

OKLCH 色空間を使用して、ベースカラーから知覚的に均一なカラーパレットを生成します。

インストール

# Run directly
npx @basiclines/rampa -C "#3b82f6"

# Or install globally
npm install -g @basiclines/rampa

クイック例

基本的な 10 色のパレットを生成

rampa -C "#3b82f6"

CSS 変数として出力

rampa -C "#3b82f6" -O css --name=primary

出力：

:root {
  --primary-0: #000000;
  --primary-1: #1e3a5f;
  --primary-2: #2d5a8a;
  ...
}

JSON として出力

rampa -C "#3b82f6" -O json

補色ハーモニーを追加

rampa -C "#3b82f6" --add=complementary -O css

明度と彩度の範囲をカスタマイズ

rampa -C "#3b82f6" -L 15:95 -S 100:20

フィボナッチ分布を使用

rampa -C "#3b82f6" --lightness-distribution=fibonacci

トライアドハーモニーで 5 色を生成

rampa -C "#3b82f6" --size=5 --add=triadic -O css --name=brand

すべてのオプション

フラグ	エイリアス	説明	デフォルト
--color	-C	必須。 ベースカラー（hex、rgb、hsl、または名前付きカラー）	-
--size	-	パレットの色数	10
--output	-O	出力形式：text、json、css	text
--format	-F	色形式：hex、rgb、hsl、oklch	hex
--name	-	パレット名（CSS／JSON 出力用）	base
--lightness	-L	明度の範囲（例：15:95）	0:100
--saturation	-S	彩度の範囲（例：100:20）	100:0
--hue	-H	色相のシフト範囲（例：-10:10）	-10:10
--lightness-distribution	-	明度の分布曲線	linear
--saturation-distribution	-	彩度の分布曲線	linear
--hue-distribution	-	色相の分布曲線	linear
--add	-	ハーモニーランプを追加	-
--tint-color	-	ティントのオーバーレイカラー	-
--tint-opacity	-	ティントの不透明度（0-100）	10
--tint-blend	-	ティントのブレンドモード	overlay
--no-preview	-	カラープレビューのブロックを非表示にする	false

分布の種類

パレット全体で値をどのように分布させるかを指定します。

• linear - 均等な間隔（デフォルト）
• fibonacci - フィボナッチ数列
• golden-ratio - 黄金比による推移
• ease-in - 緩やかに始まり、速く終わる
• ease-out - 速く始まり、緩やかに終わる
• ease-in-out - 始まりと終わりが緩やか
• geometric - 指数関数的な増加
• logarithmic - 対数曲線

ハーモニーの種類

関連するカラ―ランプを生成します。

• complementary - 色相環上で反対に位置する色（+1 ランプ）
• triadic - 120° 間隔の 3 色（+2 ランプ）
• analogous - 30° 間隔で隣接する色（+2 ランプ）
• split-complementary - 反対色の近くに位置する 2 色（+2 ランプ）
• square - 90° 間隔の 4 色（+3 ランプ）

ブレンドモード（ティント用）

normal · multiply · screen · overlay · darken · lighten · color-dodge · color-burn · hard-light · soft-light

このスキルを使う場面

• ユーザーが「カラーパレットを生成して」と依頼したとき
• ユーザーが「CSS カラー変数」を必要としているとき
• ユーザーが「アクセシブルな色」や「デザインシステムの色」を求めているとき
• ユーザーが「カラ―ランプ」や「カラースケール」に言及したとき
• ユーザーが「補色／トライアド／類似色」を必要としているとき
• ユーザーが「知覚的に均一な」色を求めているとき
• ユーザーがテーマやデザイントークンを作成しているとき

ヒント

1. ダークモードのテーマでは、純粋な黒／白を避けるために -L 5:85 を使用します
2. 彩度を抑えたパレットには -S 60:20 を使用します
3. 調和の取れた複数色のテーマには --add=analogous を使用します
4. 色をプログラムで処理する場合は -O json を使用します
5. --size=5 と組み合わせると、最小限のパレットになります