灰色：意味、心理、トーン、配色

グレーはバランス、中立、洗練を象徴します。白と黒の間に位置し、デザインで最も用途が広い色の一つです。

カラーピッカー UIでグレーを見る

Gray#808080

灰色とは？

グレーは白と黒の間のニュートラルです。バランス、中立、洗練を象徴し、UIの構造、タイポグラフィ、サーフェスに不可欠です。

ウェブデザイン、ブランディング、デジタルUIでは、優雅さを加え、可読性を高め、主要内容を邪魔せずにクリーンな構図を作るのに使われます。

グレーは何を表す？

グレーは次のような概念と関連づけられることが多いです。

バランス
中立
プロフェッショナルさ
現代性
安定
優雅さ
成熟
信頼性
落ち着き
テクノロジー

文脈によって意味は変わりますが、通常は静けさ、客観性、洗練を伝えます。

グレーの色彩心理

色彩心理では、グレーは落ち着き、安定、合理性を伝えます。支配的でないため視覚ノイズを減らし集中を助け、デジタルUIやテック製品で最も使われる色の一つです。

最もよく伝える感情は次のとおりです。

静けさ
安心
信頼
客観性
洗練
ミニマリズム

過剰に使うと冷たさを伝えることがあるため、ダイナミズムのために鮮やかな色と組み合わせることが多いです。

グレーはどこで使われる？

グレーはほぼあらゆるプロジェクトの支持色として登場します。よく見られるのは次のとおりです。

ウェブデザイン
ユーザーインターフェース（UI）
モバイルアプリ
ダッシュボード
コーポレートブランディング
テクノロジー
自動車
建築
工業デザイン
EC

中立性から、ほぼあらゆるプロジェクトの優れたサポートカラーになります。

グレーのトーン

よく知られたHTML/CSSカラーには次があります。

名前	サンプル	Hex	RGB	HSL	OKLCH
Gainsboro
LightGray
Silver
DarkGray
Gray
DimGray
SlateGray
LightSlateGray
DarkSlateGray

最も明るいグレーからアントラシットまで、各バリアントがインターフェースに異なる個性を与えます。

HTMLカラー

暖かいグレー、冷たいグレー、ニュートラルグレー

すべてのグレーが同じように見えるわけではありません。色温度がインターフェースの雰囲気を一変させ、ニュートラルパレットで最も求められるポイントの一つです。

暖かいグレー

茶・赤・黄のわずかなニュアンスがあり、より居心地の良い雰囲気を作ります。クラフトブランディング、実物商品のEC、人間味のあるUIに合います。

冷たいグレー

青や緑のニュアンスを含み、よりテックでミニマルな印象を伝えます。ソフトウェア、ダッシュボード、デジタル製品でよく使われます。

ニュートラルグレー

Material Design、Tailwind CSS、Bootstrapなどのデザインシステムでよく使われます。gray、slate、zinc、cool grayなどのスケールは、タイポグラフィ、ボーダー、サーフェスを一貫して構築するのに役立ちます。

多くのデザイナーは gray color palette、neutral gray、slate gray、cool gray などの用語を探します。これらの違いを理解すると、正しいスケールを選び、UIでのグレーの位置づけがしやすくなります。

グレーと合う色

グレーはほぼすべての色と合い、強度を抑えます。よくある組み合わせは次のとおりです。

白#FFFFFF
黒#111111
青#2563EB
緑#16A34A
オレンジ#FFA500
黄#FFD700
赤#EF4444
紫#7C3AED
ピンク#EC4899
ゴールド#DAA520

これらの組み合わせで、エレガントでモダン、読みやすいUIが作れます。

グレーの補色

グレーには補色がありません。白や黒と同様、無彩色のグループに属するためです。主な利点は、デザインの調和を崩さずにほぼあらゆる配色をバランスできることです。

Gray#808080

Black#111111

グレーのカラーハーモニー

グレーはあらゆる色彩ハーモニーの中でニュートラルとして機能します。このページのハーモニーはMatizのカラーホイールとパレットジェネレーターと同じロジックを使います。

類似色

近い色の間の移行を和らげ、視覚的な彩度を下げます。

カラーホイール

グレーのバリエーション

バリエーションはMatizスタジオと同じ関数（HSL上のティント、トーン、シェード）で生成されます。よくあるのは次のとおりです。

ティント（白を加える）

これらのスケールにより、二次タイポグラフィ、ボーダー、無効状態、サーフェスを一貫して構築できます。

グレーのカラーパレット

グレーのパレットはプロフェッショナルさ、バランス、現代性を伝えやすいです。人気の組み合わせは次のとおりです。

グレー + 白 + 黒

3 色

グレー + 青

3 色

グレー + オレンジ

3 色

グレー + 緑

3 色

グレー + 黄

3 色

グレー + 赤

3 色

これらの組み合わせはダッシュボード、コーポレートUI、テック製品でよく見られます。

パレット

コントラストとアクセシビリティ

グレーは明度によってコントラストが大きく変わります。テキストに使う前に必ず比を確認してください。

ミディアムグレーは白の上で不合格になりやすく、ダークグレーは通常テキストに適します。

WCAG推奨に従うと、すべてのユーザーにとってアクセスしやすい体験が保証されます。

ダークグレーテキスト / 白背景
10.31:1AA ✓
白テキスト / ダークグレー背景
10.31:1AA ✓
ミディアムグレーテキスト / 白背景
4.83:1AA ✓
白テキスト / スレート背景
7.58:1AA ✓

WCAGコントラストチェッカー

グレーのグラデーション

グレーは洗練されたミニマルなグラデーションによく合います。よくある組み合わせは次のとおりです。

これらのグラデーションはダッシュボード、テック製品、コーポレートUIでよく使われます。

グラデーションジェネレーター

ウェブデザインにおけるグレー

グレーはデジタルUIの構造を支えます。階層、ボーダー、無効状態、ニュートラルなサーフェスを可能にし、アクセントカラーを引き立てます。

二次テキスト
ボーダー
無効状態
カード
ダッシュボード
フォーム
サイドバー
モバイルアプリ
SaaS
データ表

UIでグレーを見る

よくある質問

グレーはバランス、中立、プロフェッショナルさ、現代性、洗練を象徴します。安定と客観性を伝える色です。

グレーは白、黒、青、緑、オレンジ、黄、赤、紫、ゴールドとよく合います。

グレーは無彩色のため補色はありません。ほぼあらゆる配色をバランスする支持色として機能します。

ウェブデザイン、UI、ダッシュボード、コーポレートブランディング、テクノロジー、自動車、ECで非常によく使われます。

鮮やかなアクセントや十分なコントラストのあるテキストと組み合わせ、冷たさや平坦な印象を避けます。階層のために複数のグレー段階を使いましょう。