色のトーンとシャドー生成器

色のトーンとシャドー生成器

ヘックスまたはRGBの色を選択し、直ちに10つのトーン（白色へブレンドされた色）と10つのシェード（黒色へブレンドされた色）を視覚的に表示するスワッチを取得できます。任意のスワッチをクリックしてそのヘックスコードをコピーするか、CSSカスタムプロパティ、SCSS変数、JSON、またはシンプルなヘックスリストとして全セットをエクスポートできます。

使用方法

1. 色選択器でベースカラーを選択するか、ヘックスフィールドに3桁または6桁のヘックス値を貼り付けます。
2. オプション：変数名（出力されたCSS/SCSS/JSONキーで使用）を変更します。
3. ミックス方法を選択します。OKLCHは最も滑らかなグラデーションを提供し、HSLはウェブの古典的なアプローチであり、RGBは最もシンプルな線形ブレンドです。
4. エクスポートフォーマットを選択します。エクスポートは、何らかの変更をした際にリアルタイムで更新されます。
5. 任意のスワッチをクリックしてそのヘックスコードをコピーするか、エクスポートコードパネルのコピー／ダウンロードボタンを使用します。

機能

• 10トーン＋10シェード – 10%のインクリメントで2つのスワッチストリップがあり、わずかな10%ミックスからほぼ純粋な100%ミックスまでをカバーしています。
• 3つのミックス方法 – 認知的に均一なステップのためにOKLCH、色を保持しながら明るさを変化させるためにHSL、または直線的なRGB。
• クリックでコピー可能なスワッチ – 各セルはそのヘックスコードを表示し、1クリックでクリップボードにコピーします。
• 複数のエクスポートフォーマット – CSSカスタムプロパティ、SCSS変数、JSONパレット、またはシンプルな読みやすいヘックスリスト。
• ライブプレビュー – 色、名前、方法、またはフォーマットのいずれかの変更により、スワッチとコードが即座にリレンダリングされます。
• エクスポートをダウンロード – 生成されたパレットを、フォーマットに適した拡張子でファイルに保存します。