カラーシェード＆ティント生成ツール｜1色から明暗21段のカラースケールを設計

ベースカラーのHEXを1つ入力するだけで、黒に近づく10段階のシェードと白に近づく10段階のティントを自動で並べるツールです。各色のHEXとRGBが同時に表示され、UIのhover/active/disabled状態やダークモードの濃淡設計に必要な階調をまとめて取得できます。

💡 このツールについて

デザインカンプで「メインカラーは決まったが、ボタンの押下時やボーダー、背景の薄い面に使う色をどう派生させるか」で手が止まる場面は多いはずです。勘で少しずつ明度を変えて作ると、トーンが揃わずチグハグな配色になりがちです。

このツールはベースカラーのRGB値を黒（0,0,0）と白（255,255,255）へ向けて等間隔で補間します。シェードは各チャンネルに係数を掛けて暗く、ティントは255との差分を係数で埋めて明るくするため、明度の刻みが均等なスケールが得られます。シェード10色・ベース1色・ティント10色の合計21段が一覧になるので、デザイントークンの命名（shade-1〜10, tint-1〜10）にもそのまま対応できます。

各スウォッチには可読性を考慮したコントラスト色でHEXとRGBを重ねて表示しています。スウォッチ単体のコピーと、CSS変数形式での一括出力の両方に対応しているため、Figmaの手作業からコードへの橋渡しもスムーズです。

🧐 よくある質問

シェードとティントの違いは何ですか？ シェードは元の色に黒を混ぜた暗い派生色、ティントは白を混ぜた明るい派生色です。中間に灰色を混ぜたものはトーンと呼びますが、このツールはシェードとティントの2軸に絞っています。

10段階の刻みはどう計算されていますか？ シェードは元のRGBに i/11（iは10〜1）の係数を掛けます。ティントは 元の値 + (255 − 元の値) × i/11（iは1〜10）で算出します。分母を11にすることで、両端の純黒・純白を含めずベースに近い側まで均等な刻みになります。

HSLの明度を変えるのと何が違いますか？ HSLのLだけを動かすと色相によって見た目の明るさがずれることがあります。本ツールはRGB各チャンネルを線形補間するため、計算が単純で結果が予測しやすいのが特徴です。厳密な知覚均等が必要な場合はLab系のツールを併用してください。

3桁の短縮HEX（#f0c など）は使えますか？ 6桁に展開して処理します。#f0c は #ff00cc として解釈されます。

生成した色をまとめて使うには？ 一括出力ではシェードとティストをCSS変数のコメント付きリストとして出力するため、そのままスタイルシートの変数定義の下書きに使えます。

📚 配色の豆知識

Material DesignやTailwind CSSのカラーパレットが50〜900のように番号で管理されているのは、明暗のスケールをトークン化して再利用するためです。1つのブランドカラーから機械的に階調を派生させておくと、後からダークテーマを追加する際にも「どの番号を反転させるか」で対応でき、配色の意思決定が大幅に減ります。シェードとティントを軸に据える発想は、印刷の網点（ハーフトーン）でインク量を変えて濃淡を作る技法とも通じています。