白は何を表す？
白は次のような概念と関連づけられることが多いです。
- 純粋さ
- 清潔さ
- 明瞭さ
- 平和
- バランス
- シンプルさ
- 始まり
- 透明性
- 最小限
- 開放感
文化によって意味は変わりますが、一般に清潔さと秩序を伝えます。
白色とは？
白は無彩色で、純粋さ、明瞭さ、シンプルさを象徴します。UIでは構造、タイポグラフィ、サーフェスの基盤です。
余白、可読性、他の色を引き立てるキャンバスとして機能し、クリーンでモダンな体験を支えます。
白の色彩心理
色彩心理では、白は秩序、開放感、精神的なクリアさを促します。視覚ノイズを減らし、コンテンツに集中しやすくします。
最もよく伝える感情は次のとおりです。
- 平静
- 信頼
- 秩序
- 中立
- 軽やかさ
- 新鮮さ
- 静けさ
過剰に使うと冷たく感じることがあるため、温かみのあるアクセントやテクスチャと組み合わせることが多いです。
白はどこで使われる？
白はほぼあらゆるデザインプロジェクトの基盤です。よく見られるのは次のとおりです。
- ウェブデザイン
- UIインターフェース
- モバイルアプリ
- ブランディング
- 印刷
- パッケージ
- ヘルスケア
- テクノロジー
- 建築
- EC
中立性から、ほぼあらゆる配色の優れた支持色・背景色になります。
白のトーン
よく知られたHTML/CSSカラーには次があります。
| 名前 | サンプル | Hex | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| White | |||||
| Snow | |||||
| GhostWhite | |||||
| WhiteSmoke | |||||
| FloralWhite | |||||
| Ivory | |||||
| MintCream | |||||
| Azure | |||||
| HoneyDew | |||||
| Seashell | |||||
| Linen | |||||
| OldLace | |||||
| Beige |
スノーやアイボリーなどの微妙なニュアンスが、冷たさや温かさを変え、インターフェースの個性を決めます。
HTMLカラー白と合う色
白はほぼすべての色と合います。よくある組み合わせは次のとおりです。
- 黒
#111111 - グレー
#6B7280 - 青
#2563EB - 緑
#16A34A - 赤
#EF4444 - オレンジ
#FFA500 - 黄
#FFD700 - 紫
#7C3AED - ピンク
#8B4513 - ネイビー
#DAA520
これらの組み合わせで、ミニマル、コントラストの強い、または柔らかなデザインが作れます。
白の補色
白には色相環上の補色がありません。黒やグレーと同様、無彩色だからです。主な利点は、デザインの調和を崩さずにほぼあらゆる配色を引き立てるキャンバスになることです。
White#FFFFFF
Gray#6B7280
白のカラーハーモニー
白はあらゆる色彩ハーモニーの中でニュートラルとして機能します。このページのハーモニーはMatizのカラーホイールとパレットジェネレーターと同じロジックを使います。
類似色
近い色の間の移行を和らげ、構成を軽くします。
白のバリエーション
バリエーションはMatizスタジオと同じ関数（HSL上のティント、トーン、シェード）で生成されます。よくあるのは次のとおりです。
ティント（白を加える）
これらのスケールにより、背景、カード、ボーダー、無効状態を一貫して構築できます。
白のカラーパレット
白のパレットは清潔さ、シンプルさ、現代性を伝えやすいです。人気の組み合わせは次のとおりです。
白 + 黒 + グレー
3 色
白 + 青
3 色
白 + 緑
3 色
白 + ベージュ
3 色
白 + 赤
3 色
白 + ネイビー
3 色
これらの組み合わせはミニマルUI、ブランディング、エディトリアルデザインでよく見られます。
パレットコントラストとアクセシビリティ
白背景は暗いテキストで優れたコントラストを提供しますが、明るい色のテキストは不合格になりやすいです。
ライトグレーのテキストは可読性が落ちることがあるため、WCAG比を確認してください。
十分なコントラストにより、すべてのユーザーにとって快適な読書体験が保証されます。
黒テキスト / 白背景
18.88:1AA ✓
グレーテキスト / 白背景
7.56:1AA ✓
白テキスト / 黒背景
18.88:1AA ✓
白テキスト / 青背景
6.70:1AA ✓
白のグラデーション
白は柔らかくクリーンなグラデーションの起点としてよく使われます。よくある組み合わせは次のとおりです。
- 白 → 青
#FFFFFF → #2563EB - 白 → グレー
#FFFFFF → #9CA3AF - 白 → ベージュ
#FFFFFF → #F5F5DC - 白 → ピンク
#FFFFFF → #F9A8D4 - 白 → シアン
#FFFFFF → #06B6D4 - 白 → ラベンダー
#FFFFFF → #C4B5FD
これらのグラデーションはランディングページ、ヒーローセクション、ミニマルUIでよく使われます。
グラデーションジェネレーターウェブデザインにおける白
白はデジタルUIの基盤です。余白、階層、可読性を支え、他の色が主役になれるようにします。
- 背景
- カード
- フォーム
- タイポグラフィ
- 余白
- モーダル
- ダッシュボード
- ランディングページ
- モバイルアプリ
- EC
よくある質問
白は純粋さ、清潔さ、明瞭さ、シンプルさ、平和を象徴します。秩序と開放感を伝える色です。
白はほぼすべての色と合います。特に黒、グレー、青、緑、赤、ネイビーとよく使われます。
白は無彩色のため補色はありません。他の色を引き立てるキャンバスとして機能します。
ウェブデザイン、UI、ブランディング、印刷、ヘルスケア、テクノロジー、ミニマルな製品で基盤として使われます。