カラーシェードジェネレーター
単一の色から明るい色から暗い色まで全範囲を生成 — 明暗ステップとシェード数を選び、任意の値を即座にコピーできます。
ベースカラー
ステップ
各シェードのステップあたりの明暗変化量（1〜25%）。
%
シェード数
ベースカラーの両側に生成するティントとシェードの数。
グラデーション
生成されたシェード
ベースカラー、ステップ率、数を選ぶと、すべてのティントとシェードがブラウザで即座に計算されます。
カラーシェードジェネレーターについて
カラーシェードジェネレーターは、1つの色を完全なティントとシェードの範囲に展開します。ベースカラーを与えると、片側には段階的に明るいティントを、もう片側には段階的に暗いシェードを生成します。これは現代のデザインシステムで使われる、古典的な50から900のスタイルのランプです。
出力を形作る2つのコントロールがあります。ステップ率は各シェードがどれだけ明るく、あるいは暗くなるかを設定し(1ステップあたり1〜25%)、カウントはベースの両側にそれぞれ最大10個のティントとシェードを表示するかを設定します。グラデーションストリップでランプ全体を一目でプレビューできます。
生成は入力するそばからブラウザ内で瞬時に行われ、サーバーには何も送信されません。任意の値、リスト全体、あるいはランプ全体をCSS変数としてコピーし、デザイントークンファイルやTailwindスタイルのカラースケールにそのまま組み込めます。
カラーシェードジェネレーターの使い方
- ピッカーでベースカラーを選ぶか値を入力し、インスピレーションが欲しければ「ランダムカラー」をクリックします。
- ステップ率を設定して、各シェードがどれだけ強く明るく・暗くなるかを制御します。
- シェード数を選んで、両側にいくつのティントとシェードを表示するか決めます。
- スウォッチをクリックしてコピーするか、「すべてコピー」や「CSS変数をコピー」でランプ全体を取得します。
よくある質問
はい、完全に無料です。すべてのティントとシェードはブラウザ内でリアルタイムに計算されるため、費用もアカウントも、ランプを生成する回数の制限もありません。
ティントはベースカラーを白に近づけて混ぜたもの(明るく)、シェードはベースを黒に近づけて混ぜたもの(暗く)です。ジェネレーターはベースカラーの周りに両方向を同時に生成し、「ティント(明るい)」「シェード(暗い)」とラベル付けします。
カウントを片側4または5に設定すると、ベースを中央に合計9〜11個のスウォッチが得られます。ステップをおよそ8〜10%にすると、人気フレームワークで使われる50〜900スケールに近い間隔になります。
小さいステップ(3〜6%)は繊細なホバーやボーダーのバリエーションに、中程度のステップ(8〜12%)はデザインシステム全体のランプに適しています。大きいステップ(15〜25%)は高コントラストなポスター風のセットを作ります。グラデーションプレビューを見て、バンディングなく均等に暗くなるランプになっているか確認しましょう。
はい。「CSS変数をコピー」はランプ全体を名前付きCSSカスタムプロパティとして出力し、「すべてコピー」はSCSSのマップからJavaScriptのテーマオブジェクトまで、どこにでも貼り付けられるプレーンな値のリストを提供します。
人気の検索
色のシェード生成
ティントとシェード
色を明るく暗く
ある色のシェード
カラーティント生成
カラーシェードを生成
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。