タスクの道筋 / 入力から結果へ
カラーのシェードスケールを生成する方法
- 01
ベースカラーを設定する
「ベースカラー」に 16 進数値を入力します。#RGB、#RGBA、#RRGGBB、#RRGGBBAA のいずれも使え、フィールドは #6D5EF8 で開きます。ベースカラーは完成したスケールの必ず中央に配置されます。
- 02
シェード数を選ぶ
「シェード数」を 3〜20 の整数に設定します。デフォルトは 9 です。奇数にすると、ベースカラーを挟んで暗側と明側が均等に配置されます。偶数でもベースは中央に保たれ、明側にスウォッチが 1 つ多くなります。
- 03
ランプを生成する
「シェードを生成」を押します。パレットは深いシェードからベースカラーを経て明るいティントへと並び、各スウォッチには番号と 16 進数値が付くので、位置 1 が常に最も暗い段階になります。
- 04
ブレンドの動作を確認する
ベースより下のシェードは黒に向かって、上のティントは白に向かって混合されますが、ブレンドがどちらの極端に向かっても 78% を超えることはありません。両端の段階がほぼ黒・ほぼ白に潰れず、彩度のある使える色に保たれます。
- 05
サンプルのスケールを読み込む
「サンプルを読み込む」を押すと、#0EA5E9 を中心に 7 つのシェードが生成されます。自分のブランドカラーを入力する前に確認できる、完全な参照実行です。「リセット」でベース #6D5EF8 とシェード数 9 に戻ります。
- 06
トークンをコピーまたはダウンロードする
「出力をコピー」で --toolars-shade-1 … のカスタムプロパティからなる :root ブロックをコピーするか、「ダウンロード」で toolars-color-shades.css として保存します。そのままスタイルシートに貼り付けられます。各スウォッチカードにも 16 進数値が表示されるので、1 色だけのコピーもできます。