カラーシェード生成ツール

カラーシェード生成ツールについて

このカラーシェード生成ツールは、すべてブラウザ内で完結します。ベースカラーを選び、ステップ数を設定すると、ティント（白と混ぜた明るいバリエーション）とシェード（黒と混ぜた暗いバリエーション）のパレットが生成されます。各色に hex、RGB、HSL 値が表示されます。スウォッチをクリックして hex 値をコピーできます。アップロードは一切なく、JavaScript によってデバイス上で処理されます。

使い方

1. カラーピッカーでベースカラーを選択、またはテキストボックスに hex 値を入力します。
2. ステップ数（3-20）を設定します。ベースカラーを中心に等量のティントとシェードが生成されます。
3. 「パレット生成」をクリックしてカラーバリエーションを作成します。
4. 任意のスウォッチをクリックして hex 値をクリップボードにコピーします。
5. 「CSS 変数としてコピー」で即使用可能な :root ブロックを、「全 hex 値をコピー」でプレーンなリストを取得します。

ティントとシェードの違い

ティントは色を白と混ぜて作成し、より明るくします。シェードは色を黒と混ぜて作成し、より暗くします。生成ツールは最も明るいティントから最も暗いシェードまでの滑らかなグラデーションを作成し、ベースカラーが中間に配置されます。これは UI カラーシステムの設計、アクセシブルなカラーパレットの作成、要素間の十分なコントラストの確保に役立ちます。

よくある質問

名前付きカラーを使えますか？ ツールは hex 値（例：#0EA5E9）を受け付けます。名前付きカラーの場合は、まずカラーピッカーや変換ツールで hex に変換してください。

中間色はどのように計算されますか？ 各ティントはベースカラーと白の間の線形補間で作成され、各シェードはベースカラーと黒の間の補間で作成されます。補間は RGB 空間で行われ、滑らかで予測可能な結果が得られます。

データはアップロードされますか？ いいえ。すべての操作はブラウザのローカルで行われます。