ティント・シェード生成

ティントは白を混ぜた色、シェードは黒を混ぜた色、トーンは灰色を混ぜた色です。こうした段階のリストがあれば、デザインシステムは1つのブランドカラーに属するホバー状態や枠線、背景を得られます。このジェネレーターは3種類を必要な段階数で作ります。Sassや多くのサイトで使われる定番のsRGB混合と、見た目が均等なOKLCHの段階から選べ、CSSカスタムプロパティとして書き出せます。

使い方

1. 基準色を入力します。
2. 段階数と、作りたいリストの種類を選びます。
3. 混合方法を選びます。おなじみの結果ならsRGB混合、見た目の均等さならOKLCHです。
4. HEXのリストまたはCSS変数をコピーするか、カラーチップをダウンロードします。

計算式

sRGB混合：各チャンネルで c ＝ c₀ + (t − c₀) × p、t ＝ 255（ティント）、0（シェード）、128（トーン）、p ＝ 段階 ÷ 段階数。OKLCH：L を p だけ 1、0、0.6 に近づけ、彩度は × (1 − p) にします。

0段階目は常に基準色で、最後の段階は純粋な白・黒・灰色の手前で止まります。チャンネル値は整数に丸めます。

計算例

純粋な赤 #FF0000 を2段階にすると、基準色と50%の段階ができます。シェードは 255 × 0.5 ＝ 127.5 → #800000（マルーン）、ティントは 0 + 255 × 0.5 → #FF8080、トーンは (255 + 128) ÷ 2 ＝ 191.5 → #C04040 です。