シェードとティントとは｜色に黒・白を混ぜる濃淡の作り方とHSLでの実装

Webサイトやアプリのデザインで、ボタンの通常時・ホバー時・押下時に少しずつ色の濃さを変えたり、グラフを1色の濃淡で塗り分けたりした経験はないでしょうか。こうした「同じ色相のまま濃さだけを変える」表現の土台になっているのが、シェードとティントという考え方です。本記事では、シェードとティントとは何か、どう違うのか、そしてHSLを使ってどう作るのかを順を追って解説します。

シェード・ティント・トーンとは

ある1色（ベースカラー）をもとに濃淡のバリエーションを作るとき、混ぜる色によって呼び名と効果が変わります。基本となるのは次の3つです。

• シェード（Shade）：ベース色に黒を混ぜて暗くした色。
• ティント（Tint）：ベース色に白を混ぜて明るくした色。
• トーン（Tone）：ベース色に灰（黒と白の混色）を混ぜて、鮮やかさを抑えた色。

これらに共通するのは、色相（赤・青・緑といった色味そのもの）を変えずに、明るさや鮮やかさだけを動かす点です。色相が一定なので、できあがった色を並べても統一感が崩れず、自然なグラデーションやまとまりのある配色を作れます。実際にベース色から濃淡の一覧を生成してみると違いがつかみやすく、カラーシェード生成ツールを使えば、入力した1色からシェードとティントの段階をまとめて確認できます。

シェード：黒を混ぜた暗い色

シェードは、ベース色に黒を加えて暗くした色です。たとえば鮮やかな青に黒を少しずつ足していくと、紺色に近い落ち着いた青へと変化していきます。混ぜる黒の量が多いほど暗くなり、最終的には黒に近づきます。

デザインの実務では、シェードは次のような場面で活躍します。

• ボタンのホバー・押下状態：通常時のボタン色より一段暗いシェードを当てると、「押せる」「今押している」という変化が自然に伝わります。
• 影や境界：ベース色のシェードを影色に使うと、黒をそのまま使うより色になじみ、上品な陰影になります。
• テキストの可読性：明るい背景の上に濃いシェードの文字を載せると、コントラストを確保しつつ色相の統一感を保てます。

注意したいのは、黒を混ぜると明るさが下がると同時に鮮やかさ（彩度）の印象も変わる点です。混ぜすぎると「ただ暗いだけのくすんだ色」になりやすいため、段階を細かく刻んで、ちょうど良い暗さを探すのがコツです。色のコードを別の表記に変換して確認したいときは、カラーコード変換ツールでHEXとRGB・HSLを行き来すると扱いやすくなります。

ティント：白を混ぜた明るい色

ティントは、ベース色に白を加えて明るくした色です。鮮やかな青に白を足していくと、水色やパステル調のやわらかい青になっていきます。白を多く混ぜるほど明るく淡くなり、最終的には白に近づきます。

ティントは、画面に余白感や軽やかさを出したいときに欠かせません。

• 背景色・面の塗り：ベース色の薄いティントをセクション背景に使うと、主張しすぎずにブランドカラーを感じさせられます。
• 無効状態（disabled）：ボタンを薄いティントにすると、「今は押せない」状態をやわらかく表現できます。
• 選択中のハイライト：リストやカレンダーの選択行を淡いティストで塗ると、強すぎない強調になります。

ティントは明るくなる一方で鮮やかさが下がって見えるため、淡くしすぎると白っぽくぼやけて要素の境界が分かりにくくなることがあります。背景に使う場合は、上に載せる文字とのコントラストが十分かを必ず確認しましょう。ベース色からティントの段階を一気に作るなら、カラーシェード生成ツールでまとめて生成して見比べるのが手早い方法です。

トーンと明度・彩度の調整

トーンは、ベース色に灰色を混ぜて鮮やかさを抑えた色です。黒だけ・白だけを混ぜるシェードやティントに対し、トーンは彩度を下げて落ち着いた印象にするのが特徴です。ビジネス系のサイトや、写真を主役にしたい画面では、彩度を抑えたトーンが上品にまとまります。

ここで鍵になるのが明度と彩度という2つの軸です。

• 明度（Lightness）：色の明るさ。上げると白に、下げると黒に近づきます。ティントは明度を上げ、シェードは明度を下げる操作にほぼ対応します。
• 彩度（Saturation）：色の鮮やかさ。上げると派手に、下げると灰色に近づきます。トーンは彩度を下げる操作に対応します。

つまり、シェード・ティント・トーンは「黒や白や灰を混ぜる」という直感的な言い方ですが、デジタルの世界では明度と彩度の数値を動かすこととして整理できます。この対応関係を理解しておくと、後述するHSLでの実装がぐっと分かりやすくなります。

配色で美しい段階を作るコツ

濃淡のバリエーションを作るとき、ただ等間隔で明るさを変えれば良いとは限りません。人間の目は明るい領域の差に敏感で、暗い領域の差には鈍いため、機械的に等分するとバランスが悪く見えることがあります。美しい段階を作るためのポイントを挙げます。

• 段階の数を決める：UIなら「ベース＋シェード2段＋ティント2段」の5段階程度が扱いやすく、デザインシステムの色トークンとしても再利用しやすくなります。
• 中間（ベース）を基準にする：ベース色を中央に置き、そこから暗い方（シェード）と明るい方（ティント）へ対称的に広げると、見た目のバランスが取りやすくなります。
• コントラストを確認する：文字と背景に使う組み合わせは、読みやすさの基準を満たすかをチェックします。淡いティント同士の組み合わせは特に注意が必要です。
• 色相のわずかなずらし：上級テクニックとして、暗くするほど少し色相を寄せる（青なら紫寄りにするなど）と、より自然で深みのある濃淡になります。

こうした段階づくりは、手作業だと数値の調整が大変です。まずはカラーシェード生成ツールでベース色から自動生成した段階をたたき台にし、必要な部分だけ微調整すると効率的です。生成した色のコードをHEXやRGB、HSLで使い分けたいときはカラーコード変換ツールが役立ちます。

HSLでの実装方法

シェードとティントをコードで作るとき、もっとも直感的なのがHSLという色の表し方です。HSLは色をH（色相）・S（彩度）・L（明度）の3つの数値で表します。色相はそのままに、明度や彩度だけを動かせるため、濃淡づくりと相性が抜群です。

hsl(210, 80%, 50%) ← H=210（青）, S=80%（鮮やか）, L=50%（中間の明るさ）

このベース色から、HSLの数値を動かすだけで濃淡を作れます。

• シェード：Lを下げる。例）hsl(210, 80%, 35%)、hsl(210, 80%, 20%)
• ティント：Lを上げる。例）hsl(210, 80%, 70%)、hsl(210, 80%, 88%)
• トーン：Sを下げる。例）hsl(210, 45%, 50%)、hsl(210, 20%, 50%)

このように、色相（H）を210で固定したまま明度（L）を増減すればティントとシェードが、彩度（S）を下げればトーンが得られます。CSSではHSL値を直接書けるほか、近年はcolor-mix()のようにベース色へ白や黒を割合で混ぜる関数も使えるようになっており、ティントやシェードをより宣言的に表現できます。

HEXコード（#3399eeのような表記）しか手元にない場合でも、いったんHSLに変換すれば同じ手順で濃淡を組み立てられます。HEXとHSLの相互変換はカラーコード変換ツールで手早く行え、生成した濃淡の一覧はカラーシェード生成ツールでまとめて確認できます。まずは手元のブランドカラーをベースに、シェードとティントを数段ずつ作って並べてみてください。色相を保ったまま濃淡だけが整然と変化する様子を見れば、配色の引き出しが一気に広がるはずです。

なお本記事は一般的な情報の提供を目的としたものです。色の見え方は表示環境や個人差によって変わり、アクセシビリティの基準やブラウザの色機能の仕様も更新されます。実制作にあたっては最新の公式情報やガイドラインを確認したうえで判断してください。