tinted-neutrals

色味を加えたニュートラルカラー

ブランドカラーのニュアンスをほのかに感じるニュートラルパレットを作成します。純粋なグレーの代わりに、デザインシステムに調和する暖色系または寒色系のニュートラルカラーを使えます。

使用する場面

• 「ブランドに合うグレーを作りたい」
• 「暖色系／寒色系のニュートラルカラーがほしい」
• 「グレーをもっと魅力的にしたい」
• 「ブランドカラーでニュートラルパレットに色味を加えたい」

インストール

npx @basiclines/rampa

レシピ

1. 純粋なニュートラルカラー（彩度を落としたブランドカラー）

ブランドカラーの色相をベースに、彩度を大幅に落としたニュートラルカラーから始めます。

rampa -C "<brand-color>" -L 98:5 -S 3:8 --size=10 -O css --name=neutral

2. 色味を加えたニュートラルカラー

ブランドカラーを控えめなオーバーレイとして適用し、色味を加えます。

rampa -C "<brand-color>" -L 98:5 -S 3:8 --tint-color="<brand-color>" --tint-opacity=8 --tint-blend=overlay --size=10 -O css --name=neutral-tinted

ポイント： --tint-color には同じブランドカラーを使います。値をハードコードする必要はありません！

色味の強さの選択肢

ほのかな色味（5～8%）

ほとんど目立ちませんが、暖かさ／冷たさが加わります。

--tint-opacity=6 --tint-blend=overlay

中程度の色味（10～15%）

色味がはっきりしていますが、ニュートラルな印象は保たれます。

--tint-opacity=12 --tint-blend=overlay

強い色味（18～25%）

色付きであることがはっきり分かるニュートラルカラーです。

--tint-opacity=20 --tint-blend=soft-light

ブレンドモードの選択肢

モード	効果
overlay	バランスのよい色味で、標準設定に適しています
soft-light	より穏やかで、控えめな色味です
multiply	より暗く、深みのある色調になります
screen	より明るく、軽やかな色調になります
color	明度を変えずに色相を適用します

使用例全体

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

# Pure neutral (cool-ish from purple hue)
rampa -C "#7c3aed" -L 98:5 -S 3:8 --size=10 -O css --name=gray

# Tinted neutral (purple tint)
rampa -C "#7c3aed" -L 98:5 -S 3:8 --tint-color="#7c3aed" --tint-opacity=8 --tint-blend=overlay --size=10 -O css --name=gray-tinted

# Compare: extra warm variant
rampa -C "#7c3aed" -L 98:5 -S 3:8 --tint-color="#7c3aed" --tint-opacity=15 --tint-blend=soft-light --size=10 -O css --name=gray-warm

出力構造

:root {
  /* Pure neutral */
  --gray-0: #fafafa;
  --gray-1: #f4f4f5;
  --gray-9: #18181b;

  /* Tinted neutral */
  --gray-tinted-0: #faf8fc;
  --gray-tinted-1: #f3f0f7;
  --gray-tinted-9: #1a1720;
}

ヒント

1. 色味の元には必ずブランドカラーを使います。グレーをハードコードしないでください
2. ほとんどの場合、overlay ブレンドモードが適しています
3. 「ニュートラルな印象」を保つには、不透明度を15%未満にします
4. 明るい背景と暗い背景の両方でテストします
5. 色味を加えたニュートラルカラーを使うと、暗い背景で白いテキストがより際立ちます