Whiteカラーパレット20選｜HEX

白は「無色」以上のものです。デザインにおいては、タイポグラフィをよりシャープにし、レイアウトをすっきりとし、アクセントを意図的に感じさせる強力なベースとなります。

以下に、すぐに使えるHEXコード付きの20以上の白色パレットアイデアと、コントラスト・可読性・実践的な活用のためのヒントをまとめました。

なぜ白いパレットはとても効果的なのか

ホワイトパレットは即座にクリアさを生み出します。ビジュアルノイズを減らし、コンテンツに余白を与え、ユーザーが重要な部分――見出し、商品、データ、アクションボタンなど――に集中できるように助けます。

また、色のアクセントをより強く感じさせます。ティール、ライラック、テラコッタ、ネオンといった色が少しだけでも、クリーンな白をベースに持つことで意図的な強調として機能します。

そして白は、様々な媒体で柔軟に使えます。コントラストをうまく調整すれば、UIから印刷、ブランド、インテリアまで、流行に走らない洗練をもたらします。

20以上の白色カラーパレットアイデア（HEXコード付き）

1) スノースタジオ

HEX： #ffffff #f4f6f8 #d9dee3 #8b97a3 #1f2933

雰囲気： シャープ・モダン・エアリー

最適： SaaSダッシュボードUI

シャープな白とクールなグレーが、クリーンな光とシャープなエッジの明るいスタジオを思わせます。ダッシュボードなど、余白や階層・可読性が自然で伝わる必要がある場面に最適。テキストはスレート、仕切りには微かなグレー、プライマリーCTAや主要指標には濃いチャコールを使うと良いでしょう。コツ：カードのシャドウは柔らかく均一にし、軽やかさを演出しましょう。

メディア.ioで生成したスノースタジオのイメージ例

Media.io

Media.ioはブラウザで動画・画像・音声を作成・編集できるオンラインAIスタジオです。

今すぐ無料で試す

2) アイボリーリネン

HEX： #fffaf0 #f2e8da #d6c2a8 #9a7f65 #2f2a25

雰囲気： 暖かい・ナチュラル・リラックス

最適： ライフスタイルブログのヘッダーデザイン

暖かなアイボリーとリネンのトーンは、陽射しに照らされた布やハンドメイド紙の風合いを感じさせます。ブログのヘッダーやムードボード、ヒーローセクションなど、落ち着いた温もりを演出したいときに最適。見出しにはモカブラウンを、ボタンやタグのアクセントにはタンを使いましょう。コツ：少しテクスチャを加えた背景を選ぶことで、ニュートラルカラーがより意図的に感じられます。

メディア.ioで生成したアイボリーリネンのイメージ例

3) アラバスターブラッシュ

HEX： #fffdfb #f7e9ea #e9c7cf #b57a86 #3a2a2f

雰囲気： ロマンチック・ソフト・上品

最適： 結婚式招待状デザイン

アラバスターの白に淡いブラッシュを重ねることで、上質なステーショナリーの花びらのような繊細さを表現できます。上品さが際立つ招待状やセーブ・ザ・デート向け。濃いローズブラウンを名前や日付に、ブラッシュは枠線やモノグラム、小さなモチーフに控えめに使いましょう。コツ：最も濃い色をタイプに効果的・繰り返し使うことで印刷物に高級感が出ます。

メディア.ioで生成したアラバスターブラッシュのイメージ例

4) ポーセリンブルー

HEX： #fdfefe #e8f1f8 #b7d3e8 #4b87b3 #1b2a38

雰囲気： クリニカル・落ち着き・信頼感

最適： 医療アプリUI

クールなポーセリンとクリーンなブルーは、明瞭さ・ケア・秩序を示唆します。落ち着いたフィードバックや見やすいデータが必要な医療アプリなどに最適。重要なラベルにネイビーを、リンクやトグル、インフォバナーにミッドブルーを使いましょう。コツ：エラーや成功メッセージの色はあえてこのセットから外し、アラートを明確に保ちましょう。

メディア.ioで生成したポーセリンブルーのイメージ例

5) チョークチャコール

HEX： #ffffff #f2f2f0 #c9c9c5 #4a4a48 #0f0f10

雰囲気： ミニマル・大胆・エディトリアル

最適： ロゴ＆ワードマークデザイン

コントラストの高いニュートラルはチョークで黒板に書いたような、シンプルでグラフィカル、そして自信感のある仕上がりに。タイポや余白にフォーカスしたロゴ・ワードマーク・ブランドシステムなどに最適。マークにはチャコール、強調には黒に近い色、サブレイアウトには柔らかなグレーを使いましょう。コツ：ロゴは非常に小さなサイズでも中間色のグレーで縁取りがボケないかテストしましょう。

メディア.ioで生成したチョークチャコールのイメージ例

6) パールセージカーム

HEX： #fffefc #e9efe9 #c6d6cc #6f8a79 #243028

雰囲気： フレッシュ・リフレッシュ・スパ風

最適： ウェルネスブランドのパンフレット

パールのような白とセージグリーンは、静かな朝・スチーム・ユーカリの空気感を表現します。柔らかさを持ちつつ構造感を失わないウェルネス系パンフレットに最適。セクション見出しは濃いフォレストグリーンで、アイコンやルール・コールアウトにセージを穏やかなアクセントとして使いましょう。コツ：たっぷりの余白を残してパレットに息遣いを与えると高級感が増します。

メディア.ioで生成したパールセージカームのイメージ例

7) フロステッドライラック

HEX： #ffffff #f3f0ff #d7cdf7 #8a73d6 #2b2142

雰囲気： ドリーミー・クリーン・フェミニン

最適： 美容製品パッケージ

鮮やかなニュートラルに柔らかいライラックを重ねることで、フロストガラスと優しい香りを想起させます。柔らかいけど甘すぎないモダンな印象にしたいビューティパッケージに最適。成分表示などのテキストは濃いバイオレット、ブランドマークやシールには中間パープルを。コツ：基本は明るさを重視し、バイオレットは可読性や強調に絞って使いましょう。

メディア.ioで生成したフロステッドライラックのイメージ例

8) ココナッツサンド

HEX： #fffef8 #f3eadc #d8c2a6 #a88763 #3b2b20

雰囲気： コースタル・居心地良い・陽だまり

最適： リビングルームインテリアパレット

クリーミーな白とサンドベージュは流木や編みラグ、くつろいだ午後を思い起こさせます。リビング、カフェ、ホスピタリティ空間など、温かみがほしい場所にぴったり。ココア色は木部やメタルパーツ、大きな面やファブリックは最も明るい白に。コツ：黒のマットなアクセントを一つ足すと空間の輪郭が引き締まり、ぼやけ感を防げます。

メディア.ioで生成したココナッツサンドのイメージ例

9) グレイシャーティール

HEX： #fbfdff #e6f6f7 #a6dde2 #2a98a2 #17343a

雰囲気： フレッシュ・エネルギッシュ・テック

最適： スタートアップのピッチデックスライド

氷のような白とティールエネルギーは清らかな水と鋭い勢いを感じさせます。チャートや製品のスクリーンショットがモダンで楽観的な枠を必要とするピッチデッキで使いましょう。見出しには深いブルーグリーンを、重要な数字や矢印、ハイライトにはティールを組み合わせてください。ヒント：ティールのアクセントは各スライドの15％未満に抑え、視覚的なノイズを避けましょう。

media.ioで生成されたグレイシャーティールの画像例

10）ミルクグラスゴールド

HEX： #fffefc #f5f2eb #d9d1c2 #b4945a #2a241b

雰囲気： 豪華、柔らかい、時代を超えた

最適： ジュエリー製品広告

ミルキーなニュートラルとブラッシュゴールドはヴィンテージグラスと温かいスポットライトのような印象です。控えめな輝きが必要なジュエリー広告やプレミアムランディングページ、ブティックパッケージングに最適です。ゴールドは枠や価格タグなどのアクセントに使い、レイアウトをエスプレッソ色のテキストで引き締めましょう。ヒント：メタリック要素が装飾ではなく意図的に見えるよう、十分な余白を確保してください。

media.ioで生成されたミルクグラスゴールドの画像例

11）コットンノート

HEX： #ffffff #f7f7fb #dcdcec #7a7aa3 #26263a

雰囲気： 穏やか、整理された、現代的

最適： SNS引用投稿

淡いコットンホワイトと控えめなペリウィンクルは静かなノートページのような落ち着きと考え深さを感じさせます。引用投稿、告知、タイプグラフィが主役のシンプルなカルーセルに最適です。メインメッセージに深いインク色、作者名や区切りには中間色を使いましょう。ヒント：小さい画面では行間を少し広くしてデザインをエアリーに保つと良いでしょう。

media.ioで生成されたコットンノートの画像例

12）ノルディックパイン

HEX： #fdfdfb #eef2ee #cfd8cf #4f6b5a #1c2a22

雰囲気： 落ち着いた、アウトドアな、高級感

最適： アウトドアブランドアイデンティティ

オフホワイトとパイングリーンは常緑樹の霧や澄んだ山の空気を連想させます。アウトドアブランドが高級感を出しつつ、荒々しくなりすぎない時に適しています。最も暗いグリーンはロゴやラベルに使い、明るいトーンはパッケージやウェブ背景のベースにしましょう。ヒント：微妙なグレインや紙の質感を加えて自然らしさを演出しましょう。

media.ioで生成されたノルディックパインの画像例

13）クラウディラベンダー

HEX： #fffefe #f5f0ff #d9cff5 #9a84d8 #2a2141

雰囲気： 心安らぐ、幻想的、軽やか

最適： 保育園のウォールアート印刷

淡いラベンダーが清らかなニュートラルに漂う様子は、寝る前の柔らかな雲のようです。保育園のアートや優しいグリーティングカード、落ち着いた寝室アクセントに最適です。深いパープルは星や名前などの細部に使い、他はエアリーに保つと作品が安らぎます。ヒント：印刷時は少し暖かい紙を選ぶと冷たい印象を避けられます。

media.ioで生成されたクラウディラベンダーの画像例

14）マーブルローズ

HEX： #fffdfc #f3eeee #e3cfd3 #b07a86 #3a2a2d

雰囲気： 優雅、ロマンチック、高級

最適： レストランメニューデザイン

大理石のような白とダスティローズのアクセントは上品でデートナイトにぴったりです。メニューに柔らかさを求めつつ、セクションや価格の視認性も必要な時に使いましょう。ダークなワインブラウンは料理名に、ローズはセクションタイトルやさりげない仕切りに活用。ヒント：背景はごく明るくして食事やアイコンとテキストがぶつからないように。

media.ioで生成されたマーブルローズの画像例

15）ウィンターシトラス

HEX： #ffffff #f2f5f7 #c9d3dc #ffb347 #1e2a33

雰囲気： 明るい、清潔、前向き

最適： イベントチラシデザイン

冬のニュートラルとシトラスオレンジは新雪に当たる陽光のような印象を与えます。クリーンなベースにひとつのエネルギッシュなアクセントが必要なチラシや告知に最適です。本文にはチャコール、日付やチケット、目立つグラフィック要素にオレンジを使いましょう。ヒント：オレンジはレイアウト内で1〜2ヶ所に限定し、意図的な強調として見せましょう。

media.ioで生成されたウィンターシトラスの画像例

16）ペーパーバックインク

HEX： #fcfbf7 #f0efe8 #cfcbbd #6a6a66 #1b1b1a

雰囲気： 文学的、クラシック、控えめ

最適： 編集マガジンレイアウト

クリーミーな紙色とインキーなニュートラルは、折り目のついた小説や静かなコーヒーショップを思わせます。タイポグラフィとグリッドのリズムで物語性を出す編集レイアウトに最適です。見出しにほぼ黒を、キャプションやフォリオ、ルールには中間グレーを使いましょう。ヒント：セリフとサンセリフを1種類ずつ選び、タイトなタイプスケールで一貫性を持たせてください。

media.ioで生成されたペーパーバックインクの画像例

17）セラミックテラコッタ

HEX： #fffdfa #f2efe7 #d7c9b8 #c56b4a #2d2622

雰囲気： 工芸風、素朴、歓迎

最適： ホームデコールカタログ

柔らかなセラミックニュートラルとテラコッタの温かみは、手作り感や堅実さを感じさせます。ホームデコールのカタログや商品シート、素材感を重視するインテリアのムードボードに適しています。クレイトーンを呼び出しや仕切りに使い、エスプレッソで製品名や仕様を示しましょう。ヒント：写真は温かく自然な雰囲気にしてテラコッタがオレンジではなく豊かさに見えるように。

media.ioで生成されたセラミックテラコッタの画像例

18）スノーフォールネオン

HEX： #ffffff #eef1f5 #cfd6df #ff2bd6 #101826

雰囲気： 大胆、遊び心、未来的

最適： 音楽イベントポスター

明るい雪の白とネオンマゼンタはクラブライトが冬の空気を切り裂くような印象。最大限コントラストと現代的なインパクトが必要なポスターに理想的です。メイン背景ブロックは深いネイビー、アーティスト名や日付、目立つ形にはマゼンタを使いましょう。ヒント：大きな文字とシンプルな幾何学でネオンアクセントが遠くからでも読めるようにします。

media.ioで生成されたスノーフォールネオンの画像例

19）バニラモカ

HEX： #fffdf6 #f3e7d6 #d7bfa6 #8b5e3c #2a1d16

雰囲気： 居心地よい、親しみやすい、食欲をそそる

最適： コーヒーショップパッケージ

バニラクリームとモカブラウンは温かい泡、焙煎豆、紙カップの暖かさを演出します。心地よさと棚での視認性が必要なコーヒーパッケージやラベルに最適です。フレーバー名にはダークロースト、バッジやロースト指標にはタンカラーがおすすめ。ヒント：印刷時は最も明るい色をラベルのベースにして濁った印象にならないように。

media.ioで生成されたバニラモカの画像例

20）クワイエットクォーツ

HEX： #ffffff #f3f4f6 #d1d5db #9aa3af #111827

雰囲気： プロフェッショナル、中立的、建築的

最適： 建築ポートフォリオウェブサイト

静かな白とクォーツグレーは構造的・正確・ギャラリーのような清潔感を感じさせます。写真やプロジェクト図面を中心に見せたいポートフォリオサイトに最適です。ナビゲーションやキャプションにはほぼ黒、中間グレーはグリッドやライン、微細なホバーステートに使いましょう。ヒント：背景はページごとに一貫させてプロジェクトをまとまりある印象に。

media.ioで生成されたクワイエットクォーツの画像例

21）オパールミント

HEX： #ffffff #eefaf6 #c8efe1 #5cc9a8 #12352c

雰囲気： 清潔、さわやか、前向き

最適： モバイルバンキングUI

オパールホワイトとミントの輝きは衛生的で安心感を与え、リフレッシュした新しいスタートのような印象です。バンキングやフィンテック画面で信頼と明確さが最重要な場面に適しています。残高やタイトルは深いグリーン、ミントはポジティブな状態や進行、確認メッセージに使いましょう。ヒント：本文テキストにはミントを使わず、アクセントとして活用するとアクセシビリティが保てます。

media.ioで生成されたオパールミントの画像例

白に合う色は？

白はほぼ全ての色と相性が良く、現代的なUIやブランディングに不可欠です。深いニュートラル（チャコール、インク、ネイビー）は読みやすいタイポグラフィと強い階層の最も安全なパートナーです。

柔らかい印象なら、白と温かなベージュやリネン色、穏やかなブラッシュを組み合わせると親しみやすく編集的な雰囲気に。エネルギーを出したいなら1つ鮮やかなアクセント（ティール、シトラスオレンジ、ネオンマゼンタ）を加え、他は静かにまとめましょう。

迷う場合は、アクセントカラー1色、テキストカラー1色、白（とオフホワイト）でまとめましょう。パレットが抑制されているほど、より「デザインされた」印象になります。

白いカラーパレットを実際のデザインでどう使う？

まず「白」を選びましょう。純粋な #ffffff は画面上で鋭く感じる場合があり、オフホワイト（アイボリー、ミルクグラス、紙色）は暖かく、特に長時間の読書時にまぶしさを軽減します。

意図的にコントラストを作る：本文や主要UI要素に暗色、中間グレーは区切りやセカンダリラベル、アクセントはアクションやハイライト、小さなブランド要素に限定して。

余白やさりげない影、質感で奥行きを出しつつ、無駄な装飾は避けましょう。印刷やインテリアでは上品なグレインや素材感が白の平坦さや未完成感を防ぎます。

AIでホワイトパレットのビジュアルを作成する

これらの白色組み合わせを実際に見たい場合は、AIですぐにモックアップを生成してみましょう。ポスターやパッケージ、アプリ画面やインテリアのシーンでパレットの印象を確認できます。

上記プロンプトを出発点にし、ブランドキーワードやレイアウトタイプ、アスペクト比をプロジェクトに合わせて入れ替えましょう。複数の白トーンやアクセント強度を並べて比較しやすくなります。

方向性が決まったら、システムを一貫させましょう：背景の白（複数可）、テキストのダーク（複数可）、主アクセント1色、サポートニュートラルを少数選ぶだけ。

次へ： プラムカラーパレット