モダングレー＆ホワイト配色20選｜おしゃれなカラーパレットアイデア

グレーとホワイトのカラーパレットは、デザインをクリーンでモダンで意図的に感じさせる最速の方法です。コンテンツと戦うことなく、コントラスト、階層、呼吸の余地を提供します。

以下は、UI、ブランディング、プリント、インテリアに使用できる 20 のグレーとホワイトのパレットの組み合わせ (十六進コード付き) と、Media.io で再作成できるプロンプトの例を示します。

グレーとホワイトのパレットがとてもうまく機能する理由

グレーとホワイトの色の組み合わせは自然に柔軟です。ミニマルで読みやすいまま、暖かく見える（クリーミーなホワイト+トープグレー）またはクールに見える（ブルー傾きのグレー+シャキシャキしたホワイト）。

また、信頼性の高い階層を作成します。ホワイトからチャコールへのほんの数ステップで、視覚的なノイズを加えることなく、セクションを分離し、カードの深さを構築し、ボタンや見出しに注意を向けることができます。

最も重要なのは、ニュートラルなトーンがコンテンツをヒーローにすることです。写真、製品、タイポグラフィ、データの視覚化は、パレットが注目を集めていない場合、よりプレミアムに見える傾向があります。

20 以上のグレーとホワイトのカラー パレットのアイデア (十六進コード付き)

1) つやコンクリート

十六進：#f6f6f4 #e3e4e6 #c7c9cc #8e9096 #2f3033

気分：クール、地に着いた、建築的

最適な場合:インダストリアルロフトインテリア

クールで建築的なこれらのトーンは、冬の光の下で磨かれたコンクリートのように感じます。壁、キャビネット、微妙なコントラストが重要なビルトインなどの大きな表面で美しく機能します。マットブラックのハードウェア、ブラッシュスチール、または暖かいオークと組み合わせると、無菌感を防ぎます。使用法のヒント: トリムや窓枠に最も暗い炭を置くと、空間を圧倒することなくシャープになります。

media.ioを使って生成したすりコンクリートの画像例

メディア.io

Media.io は、ブラウザでビデオ、画像、オーディオを作成および編集するためのオンライン AI スタジオです。

今すぐ無料でお試しください

2) 冬用リネン

十六進：#fbfaf7 #f0eee8 #d9d6cf #b0aea7 #4a4946

気分：暖かい、落ち着いた、親密な

最適な場合:結婚式の招待状

暖かくて落ち着く、リネン生地、ベラム紙、柔らかいキャンドルの明かりのように読みます。クリーミーなホワイトはタイポグラフィをエレガントに保ち、濃いグレーは名前や日付に十分な構造を加えます。金箔やチークのアクセント、プレスフラワーのイラストと合わせるとロマンチックな仕上がりになります。使用法のヒント: 印刷の鮮明さを維持するために、背景をオフホワイトに保ち、見出しには最も暗い色調を予約してください。

media.ioを使って生成した冬用リネンの画像例

3）グラファイトミスト

十六進：#ffffff #e7e8ea #bfc2c7 #6b6f77 #1f2228

気分：洗練された、モダンな、集中的な

最適な場合:ダークモード アプリ UI

洗練された集中力のあるこのレンジは、グラファイトの上を霧が転がっているように感じられ、鮮明なハイライトが物事を読みやすくします。階層が大きな色ではなく微妙なステップに依存するダークモードインターフェイスに適しています。アクティブな状態や通知のために、シアンやライムのような1つの電気アクセントとペアリングします。使用法のヒント: メインキャンバスにはほぼ黒、カードにはミッドグレーを使用して、濁ったコントラストを避けます。

media.ioを使って生成したグラファイトミストの画像例

4) ギャラリーの壁

十六進：#f8f8f8 #ededed #cfcfcf #9a9a9a #2a2a2a

気分：清潔、厳選された、ミニマリスト

最適な場合:アートギャラリーブランディング

清潔でキュレーションされた、白い壁、柔らかいトラック照明、アートワークの周りの静かなネガティブな空間を思い起こさせます。このグレーとホワイトのカラーパレットは、プレミアム感を感じながらもコンテンツをリードする必要があるブランドに最適です。展示会のハイライトやイベントタグには、単一の大胆なシグネチャーカラーとペアリングします。使用法のヒント: ロゴを木炭に保ち、ライトグレーに背景を処理させて、プリントを鮮明に保ちます。

media.ioを使って生成したギャラリーウォールの画像例

5) 钢鉄及び雪

十六進：#fafbfd #dfe6ee #b9c3cf #6c7a89 #22272e

気分：さわやかで、テクノロジー最先端で、風通しの良い

最適な場合:テクノロジー製品ランディングページ

さわやかで技術的なこれらのクールなグレーは、ブラッシュスチールに対して雪のまぶしさのように感じます。トーンは、重い境界線なしでセクションやカードに深みを生み出し、現代の web レイアウトに最適です。このようなグレーとホワイトの色の組み合わせは、コバルト、ティール、またはネオングリーンのCTAとよく組み合わせて、即座に焦点を合わせます。使用法のヒント: ヒーロー スペースには最も明るい色合いを使用し、ナビゲーションにはスレート グレーを使用してページを固定します。

media.ioを使って生成したsteel & snowの画像例

6) 真珠炭

十六進：#f5f3f4 #e0dde0 #b8b2b9 #7a747d #2b262e

気分：ソフト、ラックス、洗练された

最適な場合:美容パッケージ

柔らかく豪華なパレットは、化粧台の鏡に映るパールパウダーとスモーキーチャコールのように読めます。微妙なコントラストが品質と抑制を示す化粧品にうまく機能します。ローズゴールドのホイル、光沢のあるブラックのキャップ、または落ち着いたモーブのアクセントと組み合わせると、モダンなブティック感が得られます。使用法のヒント: コピーを最も暗い色合いに保管し、セカンダリ パネルにはミッド トーンを使用して、まぶしさの下でラベルが読みやすいようにします。

media.ioを使って生成した真珠炭の画像例

7) フォギーハーバー

十六進：#f2f5f4 #d6dcda #aeb8b5 #6a7774 #2d3534

気分：霧がかかる, 海岸沿い, リラックス

最適な場合:海岸沿いのホテルのロビー

霧がかかってリラックスしており、海岸線近くの海霧、流木、スレート石を思い出させます。グリーンとグレーのノートにより、特にオープンな公共スペースではニュートラルが平らに感じられません。サンドベージュ、風化した木材、暖かい真鍮と組み合わせると、居心地の良い海岸の雰囲気が醸し出されます。使用法のヒント: wayfinding signage には最も暗い色調を使用して、淡い壁で読みやすいようにしてください。

media.ioを使って生成したフォギーハーバーの画像例

8) モノクロスタジオ

十六進：#fcfcfc #f1f1f1 #d5d5d5 #7d7d7d #1a1a1a

気分：シャープ、編集、時代を超越した

最適な場合:ポートフォリオウェブサイト

シャープで時代を超越した、黒い旗ときれいな紙の背景がある明るいスタジオのように感じられます。強力なエンドポイントにより、最小限のスタイリングでもタイポグラフィとイメージが意図的に見えます。ホバー状態とプロジェクトタグには1つのアクセントカラーとペアリングしますが、控えめにしてください。使用法のヒント: 本文のテキストを純粋な黒ではなく濃いグレーに設定して、白いセクションのまぶしさを軽減します。

media.ioを使って生成したmonochrome studioの画像例

9) 柔らかいスレート

十六進：#f7f8fa #e1e4ea #c2c7d0 #7b8391 #343a44

気分：プロフェッショナル、落ち着いた、信頼できる

最適な場合:コーポレートレポート

プロフェッショナルで落ち着いたこれらの青い傾きのグレーは、磨かれたスライド、きちんとしたテーブル、信頼できるデータを示唆しています。これらは、チャートが厳しい線なしで分離する必要があるレポートに最適です。ネイビーやエメラルドのような抑制されたアクセントと組み合わせて、重要な指標やコールアウトを実現します。使用法のヒント: ページの背景には最も淡い色合いを使用し、見出しにはスレートを予約して、長いドキュメントを簡単にスキャンできるようにします。

media.ioを使って生成したソフトスレートの画像例

10) 大理石の台帳

十六進：#f9f9f9 #e8e7e5 #c9c6c0 #9a968f #3a3936

気分：エレガント、静か、洗練された

最適な場合:豪華なバスルームのデザイン

エレガントで静かで、大理石の脈、石灰岩のタイル、柔らかいホテルの照明を思い出させます。温かみのあるグレーは、臨床的ではなくスパのような空間を保ちます。シャンパンメタル仕上げ、クリーミーなタオル、淡い木材と組み合わせると、リラックスしたラグジュアリーな外観になります。使用法のヒント: グラウトや石のディテールでミッドトーンのグレーをエコーして、部屋全体がまとまりを感じさせます。

media.ioを使って生成したmarble ledgerの画像例

11) クラウドオフィス

十六進：#ffffff #f2f4f7 #d6dbe3 #9aa3b2 #2e3440

気分：透明、風通しがよく、生産的

最適な場合:SaaSダッシュボード

澄んで風通しがよく、静かなオフィスの大きな窓から日光が差し込むような気分になります。このグレーホワイトの配色は、落ち着いた表面と紛れもない階層を必要とするダッシュボード用に構築されています。プライマリボタンには単一のブランドカラーと組み合わせ、状態やアラートには微妙な色合いを使用します。使用法のヒント: グリッドラインを非常に軽く保ち、間隔と中間グレーの構造に依存してください。

media.ioを使って生成したクラウドオフィスの画像例

12) 静かなロフト

十六進：#f4f4f2 #deddd9 #b9b6af #86827a #3c3a35

気分：居心地が良く、モダンで、住んでいます

最適な場合:モダンなアパートメントステージング

居心地が良く、住みやすいこれらの暖かいニュートラルは、ウールのスロー、天然紙、柔らかい影を思い起こさせます。木製の床を引き立て、空間の写真をよく撮るため、ステージングに最適です。テラコッタセラミック、オリーブの植物、質感のあるテキスタイルと組み合わせて暖かさをプラスします。使用法のヒント: 部屋を明るく保つために、フレームや照明には最も暗い色合いを控えめに使用してください。

media.ioを使って生成した静かなロフトの画像例

13) スノーキャップのブランディング

十六進：#ffffff #f5f5f5 #dadada #a3a3a3 #2c2c2c

気分：クリーン、自信、多用途

最適な場合:スタートアップのロゴとピッチデッキ

清潔で自信があり、鮮明なインクとモダンなタイポグラフィを備えた新鮮な紙のように見えます。コントラストは、あまり厳しく傾くことなく、ロゴ、アイコン、チャートに十分に強力です。このようなグレーとホワイトの色の組み合わせは、コバルト、コーラル、ライムなどの大胆なブランドアクセントとうまくマッチします。使用法のヒント: スライドはほとんど軽くし、タイトルとキー番号にのみ炭を使用します。

media.ioを使って生成されたスノーキャップブランディングの画像例

14) アッシェンミニマル

十六進：#f8f7f6 #e2e0de #c6c2bf #8f8a86 #3b3836

気分：シンプル、ソフト、控えめ

最適な場合:製品撮影の背景

シンプルで控えめな、柔らかい漆喰、灰、拡散したスタジオライトに似ています。これらのトーンは、アグレッシブなコントラストやカラーキャストなしで製品を際立たせます。クラフト紙、リネン、セラミックなどの1つの触覚素材と組み合わせると、ショットに深みを加えます。使用法のヒント: ミッドグレーを表面として使用し、シームレスな背景スイープのために最も明るい色合いを保ちます。

media.ioを使って生成したashen minimalの画像例

15) シルバーバーチ

十六進：#f6f7f5 #e0e4dd #c0c7bf #879186 #2f352f

気分：フレッシュ、ナチュラル、バランスの取れた

最適な場合:エコスキンケアラベル

新鮮で自然で、白樺の樹皮、セージの葉、早朝の光をほのめかします。グリーングレーのアンダートーンは、クリーンなビューティー&ウェルネスブランドに似合うオーガニックな雰囲気をプラスします。再生紙の質感とユーカリや粘土のような落ち着いたボタニカルなアクセントと組み合わせてください。使用法のヒント: 成分ブロックを最も明るい背景に保ち、規制テキストには深いトーンを使用して読みやすさを確保します。

media.ioを使って生成したシルバーバーチの画像例

16) ポーラーナイト

十六進：#fdfdfd #d9dde1 #a7adb5 #515a66 #0f141b

気分：ドラマチック、映画的、ハイコントラスト

最適な場合:映画ポスター

ドラマチックで映画的で、深くインクのような地平線がある月明かりの下の雪のような感じがします。広いコントラストレンジは、大胆なタイプ、ムーディーなグラデーション、強いシルエットをサポートします。タイトルヒットには、クリムゾンやエレクトリックブルーなどの単一の飽和アクセントと組み合わせてください。使用法のヒント: 背景のテクスチャは中グレーに保ち、ほぼ黒のテキストと焦点要素がシャープに保たれます。

media.ioを使って生成した極夜の画像例

17) コンクリートシック

十六進：#f3f3f3 #d8d8d8 #b2b2b2 #707070 #252525

気分：都会的、スタイリッシュ、モダン

最適な場合:レストランメニュー

都会的でスタイリッシュで、コンクリートのカウンター、ブラッシュメタル、薄暗いダイニングルームを思い起こさせます。このグレーとホワイトのカラーパレットは、価格とセクションヘッダーを強調しながらレイアウトをきれいに保つため、メニューにぴったりです。ディープレッドやハーブグリーンなどのシグネチャー料理には、ポップなカラーと組み合わせてください。使用法のヒント: 小さなテキストには最も明るい色合いを使用しないでください。読みやすくするために、中灰色に細かい文字を残してください。

media.ioを使って生成したコンクリートシックの画像例

18) 雾のタイプ

十六進：#fafafa #e6e8eb #c8ccd3 #818896 #303643

気分：思慮深く、文学的で、モダン

最適な場合:ブックカバー

思慮深く文学的で、柔らかい霧、層になった紙、静かな書店を示唆しています。クールなミッドトーンは、特にノンフィクションや現代フィクションの場合、大きな色を必要とせずにタイトルを目立たせるのに役立ちます。グレイン、水彩ウォッシュ、または微妙な写真オーバーレイなどの1つのテクスチャ要素とペアリングします。使用法のヒント: 著者名を最も暗いトーンに保ち、タイトルをスレートシェードに設定して、洗練された階層にします。

media.ioを使って生成したmisted型の画像例

19) 北欧のキッチン

十六進：#fcfbf9 #ecebe7 #d1cec7 #9c978d #3f3c36

気分：明るく、家庭的な、北欧

最適な場合:北欧のキッチン

明るく家庭的な雰囲気で、塗装されたキャビネットや淡い石のカウンターに朝の光が差し込むような感じがします。ほんのり温かみのあるグレーで白がキツイ見えにくいので、反射面が多いキッチンに最適です。ライトアッシュウッド、マットブラックの備品、柔らかいグリーンの植物と組み合わせてバランスを取ります。使用法のヒント: アイランドまたは下部のキャビネットの濃いグレーを使用して、スペースを接地します。

media.ioを使って生成した北欧キッチンの画像例

20) 嵐の文房具

十六進：#f7f7f9 #e2e3e8 #bfc3cc #6d7380 #242832

気分：洗練された、モダンな、少しムーディーな

最適な場合:最小限の文房具セット

ほんのりムードを感じさせる磨きで、雨の降る午後、なめらかな紙、すっきりとしたインクラインを思い起こさせます。クールなグレーは、レターヘッド、封筒、メモカードを厳しくなくプロフェッショナルに感じさせます。ネイビー、フォレストグリーン、ミュートバーガンディなどのシングルスポットカラーと組み合わせて、シールや小さなマークを作ります。使用法のヒント: 大きなフィールドを最も明るい色調で印刷し、モノグラムや連絡先の詳細については暗い色合いを保ちます。

media.ioを使って生成した嵐の文房具の画像例

グレーホワイトと相性の良い色は？

グレーとホワイトはニュートラルで予測可能なので、ほとんどすべてのアクセントカラーとよくマッチします。モダンなUIの雰囲気を求めるには、コバルト、シアン、ライム、コーラルなどの鮮やかなアクセントを試して、CTAやアクティブな状態をすぐに目立たせてください。

暖かさが必要な場合は、サンディベージュ、キャラメル、テラコッタ、またはソフトブラッシュを追加してください。これらは、モノクロのデザインをミニマリストの外観を失うことなく、より魅力的なものに変えます。

プレミアムまたはエディトリアルブランディングでは、メタリック（ゴールド/ローズゴールド）とディープトーン（ネイビー、フォレストグリーン、バーガンディ）が豊かさを加えながら、全体的なパレットをコントロールします。

グレーとホワイトのカラーパレットを実際のデザインで使用する方法

各トーンのジョブから始めます。背景の場合は最も明るく、サーフェス (カード/セクション) の場合はライトミッド、境界線と仕切りの場合はミッド、セカンダリ テキストの場合はダークミッド、タイトルとキー ナンバーの場合はチャコールです。

特に白の場合は、コントラストに注意してください。長い読書のために、深い灰色のテキストはしばしば純粋な黒よりも快適であり、非常に明るい灰色は小さなタイプではなく広い領域に予約する必要があります。

フラットな外観を避けるために、テクスチャを導入します。微妙な木目、柔らかい影、紙/リネンのキュー、またはインタラクティブな瞬間のための単一の高彩度のアクセントです。

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

ブランドの方向性を売り込んだり、UIムードボードを構築したりする場合、ビジュアルは十六進コードと同じくらい重要です。グレーホワイトの配色をリアルなシーン（インテリア、パッケージ、ポスター、ランディングページ）に変えると、意思決定が早くなります。

Media.io のテキストから画像への変換ツールを使用すると、プロンプトを貼り付けたり、スタイルを反復したり、プレゼンテーション、クライアント レビュー、コンテンツ プランニングの一貫した例を生成したりできます。

上記のプロンプトを出発点として使用し、業界 (「フィンテック ダッシュボード」または「スキンケア ラベル」など) と好みのアスペクト比を入れ替えます。

次へ： ブラックカラーパレット