色のシャデーゲネレーター 任意の色を指定したステップ数で暗くすることができます。

What Is 色のシャデーゲネレーター?

色調生成器は、HSLカラースペースでベースカラーの明度を系統的に減らすことで、どのベースカラーにも順番に暗いバージョンを作成します。色調は元の色相と彩度を保持しながら黒に向かって移動し、一貫したダーカーバリエーションのセットを作成します。これは、ブランドカラーの複数の強度 - プライマリーボタン用のオリジナルからテキスト、ボーダー、ホバーステート用の深いバージョンまで - が必要なデザインシステムでは不可欠です。RGBで単純に黒を追加する（色相が変化する可能性がある）とは異なり、HSLベースのアプローチは、色調全体でカラーIDを保存します。調整可能なステップ数により、シンプルな3色調セットから包括的な15ステップスケールまでを作成できます。

Why Use 色のシャデーゲネレーター?

• HSLベースのダーケン処理により、すべてのシェードで色相の一貫性が保たれる
• 調整可能なステップ数（3〜15）による用途に応じた柔軟性
• 各シェードには参考として明度パーセンテージが表示される
• デザインシステムのカラースケール構築に最適
• 個々のシェードまたは全セットを1クリックでコピー

Common Use Cases

デザイントークン

デザインシステム用に番号付きシェードスケール（600、700、800、900）を生成します。

ホバーステート

ベースカラーと一致するボタンホバー状態のより暗い色を作成します。

テキストカラー

見出しや本文用にブランドカラーのダークシェードを見つけます。

ボーダーとシャドウ

ボーダーやアウトライン、シャドゥカラーのより暗いバリアントを取得します。

Technical Guide

シェードジェネレーターは、ベースカラーをHSLに変換し、N個のシェードを作成するために明度をベース値からほぼゼロまで減らします。各シェードの式は次のとおりです: L = baseLightness × (1 - i/(N-1))、ここでiは0からN-1まで変化します。これにより、元の色からほぼ黒まで均等に分布したシェードが作成されます。色相と彩度は一定であり、すべてのシェードが異なる暗さレベルでの同じ色であることを保証します。色理論では、シェードとは特に黒を混合した色です。これは、白を混合したティント（tint）やグレーを混合したトーン（tone）と対比されます。HSLアプローチは、3つのチャンネルすべてを比例して調整する必要があるRGBの暗化よりも知覚的に一貫しています。

Tips & Best Practices

• 1
  標準的なデザインシステムスケール（100-900）を作成するには9ステップ使用
• 2
  最も暗いシェードは明るい背景におけるテキストに適しています
• 3
  シェードとティントジェネレーターを組み合わせて完全なカラースケールを作ります
• 4
  暖色（赤、オレンジ）のシェードは優れたダークバックグラウンドになります
• 5
  意図した背景に対する十分なコントラストのために暗いシェードをテストします

Related Tools

カラーピッカー

HEX、RGB、HSL、CMYK形式の出力に対応したインタラクティブなカラーピッカー。

🎨 Color Tools

モノクロマティックパレットジェネレーター

任意のベースカラーからモノクロマティックな色彩パレットを生成します。

🎨 Color Tools

カラーティントジェネレーター

任意の色を指定したステップ数で明るくするティントを生成します。

🎨 Color Tools

カラーミキサー

2つの色を任意の比率で混合し、グラデーション全体を見てみましょう。

🎨 Color Tools

コントラスト比チェッカー

前景色と背景色の間のWCAGコントラスト比を確認します。

🎨 Color Tools

Frequently Asked Questions

Q シェードとティントの違いは何ですか？

シェードは、黒（明度の低下）を加えることで暗くした色です。ティントは、白（明度の上昇）を加えることで明るくした色です。トーンは、グレイ（彩度の低下）を加えることで抑制された色です。

Q RGBで暗くする理由は何ですか？

RGBでの暗く処理（すべてのチャンネルの低下）は、知覚される色相を変化させる可能性があります。HSLベースの暗く処理により、色相が一定に保たれ、すべてのシェードが同じ色として認識されます。

Q 何ステップ使用するべきですか？

デザインシステムの場合、9〜10ステップ（Tailwind CSSスケールのように）を使用します。よりシンプルなニーズの場合は、ベース、ダーク、最も暗いバリアントをカバーする3〜5ステップを使用します。

About This Tool

色のシャデーゲネレーター is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.