シェードと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%)
おすすめの使用ケース：
すっきりモダン - テック系のUIに映える
#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.