シェードとUI階層ガイド - グレースケールデザイン、視覚的階層、プロフェッショナルなインターフェースシステムをマスターする
グレーは、デザイナーのツールキットの中で最も多目的なツールです。ウェブサイトの 視覚的階層（Visual Hierarchy） を定義します。異なるグレーの濃淡を使い分けることで、ユーザーは主要な見出し、補足テキスト、無効化されたボタンを区別することができます。2026年には、デジタルインターフェースに人間味を加えるために「ウォームグレー」（グレージュ）を採用する動きが加速しています。
クールグレー（青みがかった色）は現代主義と効率性を投影し、SaaSやフィンテックで頻繁に使用されます。ウォームグレー（茶色や黄色がかった色）はオーガニックで親しみやすく、ECサイトやウェルネスプラットフォームに最適です。
Blue undertones create a modern, efficient feel
最適な用途：テック系SaaS、フィンテック、一般企業
Brown/yellow undertones add organic warmth
最適な用途：EC、ウェルネス、ライフスタイル
視覚的な奥行きを生む5段階のグレースケール
SaaSインターフェース向けのクールグレー
オーガニックな雰囲気のウォームグレー（グレージュ）
プロフェッショナルでバランスが取れた色 - コーポレートUIに最適
#708090
rgb(112, 128, 144)
hsl(210, 13%, 50%)
おすすめの使用ケース：
反射的でプレミアム - デザインにエレガンスを加える
#C0C0C0
rgb(192, 192, 192)
hsl(0, 0%, 75%)
おすすめの使用ケース：
モダンで効率的 - テック系インターフェースに理想的
#909090
rgb(144, 144, 144)
hsl(0, 0%, 56%)
おすすめの使用ケース：
オーガニックで親しみやすい - デジタルインターフェースに人間味を加える
#B8A99A
rgb(184, 169, 154)
hsl(30, 17%, 66%)
おすすめの使用ケース：
スモーク
#F5F5F5
プラチナ
#E0E0E0
ライトグレー
#D3D3D3
シルバー
#C0C0C0
ダークグレー
#A9A9A9
グレー
#808080
ディムグレー
#696969
ミディアムグレー
#505050
ディープグレー
#404040
チャコール
#303030
ダークチャコール
#202020
ニアーブラック
#101010
ヘッダーの背景
linear-gradient(135deg, #2D3748 0%, #718096 100%)カードのオーバーレイ
linear-gradient(180deg, #4A5568 0%, #A0AEC0 100%)オーガニックな背景
linear-gradient(135deg, #6B5B52 0%, #C4B8AC 100%)プレミアムなアクセント
linear-gradient(135deg, #C0C0C0 0%, #E8E8E8 100%)#FFFFFF
クリーンなコントラスト - ミニマリスト的魅力
#000000
大胆な主張 - ドラマチックな効果
#000080
コーポレート - プロフェッショナルな信頼感
#8B4513
アースカラー - 自然な温かみ
グレーはバランス、中立性、妥協を表します。白と黒の中間に位置し、対極にあるものの間の架け橋となります。
グレーはプロフェッショナリズム、成熟、権威を伝えます。安定性を伝えるために企業環境で広く使用されています。
シルバーやクールグレーは、洗練された高級感を連想させます。ラグジュアリーブランドやプレミアムな体験に関連付けられます。
クールグレーは現代のテックデザインで主流であり、革新、効率、先見の明のあるアプローチを表しています。
白に近い色から黒に近い色まで、5〜9色のグレー段階を作成します。テキスト、境界線、背景、無効状態に一貫して使用します。
テックや金融分野にはクールグレー（青みがかった色）を。ライフスタイル、ウェルネス、ECブランドにはウォームグレー（グレージュ）を選びましょう。
グレーの濃淡を使って階層を確立します。見出しには濃い色を、本文には中間色を、メタデータやキャプションには薄い色を使用します。
純粋な50%グレー (#808080) は平面的な印象を与えることがあります。わずかな温かみや冷たさを加えることで、より自然で魅力的な仕上がりになります。
| 色名 | HEX | RGB | HSL | 白背景とのコントラスト |
|---|---|---|---|---|
| スレートグレー | #708090 | rgb(112, 128, 144) | hsl(210, 13%, 50%) | AA |
| シルバー | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | AA |
| クールグレー | #909090 | rgb(144, 144, 144) | hsl(0, 0%, 56%) | AA |
| ウォームグレー（グレージュ） | #B8A99A | rgb(184, 169, 154) | hsl(30, 17%, 66%) | AA |
.gray-scale {
/* 5段階のコーポレート・グレースケール */
background: linear-gradient(135deg, #2D3748 0%, #CBD5E0 100%);
}.tech-gray {
/* SaaSインターフェース向けのクールグレー */
background: linear-gradient(180deg, #4A5568 0%, #A0AEC0 100%);
}.warm-gray {
/* グレージュ - オーガニックな雰囲気のウォームグレー */
background: linear-gradient(135deg, #6B5B52 0%, #C4B8AC 100%);
}Discover our complete collection of color guides with HEX codes, palettes, and design inspiration.