カラーシェード

カラーシェードとは？

シェードはベースカラーの暗いバージョンで、色相と彩度を保ったまま輝度を下げて作成します。HSL カラーモデルでは、これは L（輝度）値を元の値からゼロ（純黒）に向けて下げることを意味します。シェードは、デザインに深み、影、視覚的階層を作成するために不可欠です。

ティントが白に向かって移動するのとは異なり、シェードは黒に向かって移動します。そのため、ダークモードインターフェース、明るい背景上のテキスト色、より重厚で安定した感じが必要な要素に最適です。

シェードとティント

シェードとティントはコインの裏表です。シェードは輝度を下げて色を暗くし、ティントは輝度を上げて色を明るくします。どちらも元の色相と彩度を保つため、常にベースカラーと調和します。シェードはより重く、真面目で安定した感じ、ティントはより軽く、透明感があって活気があります。

カラーシェードを使用する場面

シェードは現代の UI とグラフィックデザインに不可欠です：

• テキストカラー。 ブランドカラーのシェードをタイトルや本文に使用すると、純黒よりも柔らかい印象になります。
• 影と深み。 背景色のシェードが自然な見た目の影を作ります。
• ダークモード。 シェードの段階がダークテーマに複数の暗さレベルを提供します。
• ホバーとアクティブ状態。 ボタンカラーのわずかに暗いシェードがインタラクションを示します。

カラーシェードの生成方法

このツールはブラウザ内でシェードを即座に生成します。

1. ベースカラーを選択。 カラーピッカーを使って任意の開始色相を選びます。
2. 数を選択。 ドロップダウンメニューから 5、10、15 個のシェードを選びます。
3. HEX をコピー。 スウォッチの横の「コピー」ボタンをクリックして HEX コードをコピーします。

ダークデザインのコツ

シェードの階層を構築する際、数学的に均等なステップではなく、知覚的に均等なステップを目指します。人間の目は中間範囲の輝度変化に敏感なため、最適な視覚的グラデーションを得るには手動で間隔を調整する必要がある場合があります。