モダングレー＆シルバートーン：20の配色とHEXコード一覧

グレイシルバーは、ミニマルとプレミアムの間の「ちょうどいい」バランスに位置します。モダンなUIのようにクリーンでありながら、ブランドやインテリアを格上げする、さりげない金属感を持ち合わせています。

以下に、選び抜かれたグレイシルバーのカラーパレットとHEXコード、さらにアクセントの組み合わせやコントラスト管理、ブランド感のあるビジュアルを素早く作るための実用的なコツを紹介します。

なぜグレイシルバーパレットはとても効果的なのか

グレイシルバーパレットは「静かな構造」として自然に多用途です。派手な色に頼らず、明度のグラデーション（明るい〜暗い）によって階層感を生み出します。

シルバー寄りのグレーはモダンで精密さを感じさせるため、SaaSのダッシュボードや商品ページ、プレミアムブランドにもよく使われます。ほんの少しのニュアンス（クール、ウォーム、ブルーグレー、バイオレットグレー）でも雰囲気を変えますが、中立性は保ちます。

何より、グレイシルバーはアクセントが意図的に際立つようにしてくれます。強いハイライトカラーを1色使えば、CTAやステータス、装飾でも十分。ニュートラルを基調にすることで全体のまとまりを保てます。

20種類以上のグレイシルバーカラーパレットアイデア（HEXコード付き）

1）アーバンクローム

HEX： #f2f4f6 #c9ced3 #9aa3ab #5f666d #1f2327

雰囲気： スタイリッシュ、都会的、ハイコントラスト

最適な用途： SaaSダッシュボードUIやプロダクト分析画面

シャープで都会的なこの色調は、夜のガラス越しのブラッシュドメタルのような印象です。シルバーからチャコールへのグラデーションがあり、派手な色を使わなくても明確な階層感が生まれます。ダッシュボードや管理パネル、データ量の多いページに最適で、アクセントにはエレクトリックブルーやライムなどをプラス。コツ：一番暗い色はテキストやナビ用、ミッドグレーはカード類で使い分けるとフラットなUIを防げます。

media.ioで生成したアーバンクロームの画像例

Media.io

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

今すぐ無料でお試し

2）フォギーハーバー

HEX： #e8ecef #b9c2c9 #7a8793 #3f4a55 #0f141a

雰囲気： 霧がかった、穏やか、沿岸風

最適な用途： モダンなリビングやオープンプランのインテリア

霧がかる静かな港の朝を思わせる色合い。クールなシルバーで空間を広く、インクのような濃いベースカラーが奥行きを与えます。壁やキャビネット、テキスタイルで活用し、ウォームオークやリネン、マットブラックの家具とも好相性。コツ：一番明るい色を天井やトリムにリピートして、暗い部屋でも高さを演出。

media.ioで生成したフォギーハーバーの画像例

3）サテン・グラファイト

HEX： #f7f7f8 #d1d4d8 #8b9097 #44484f #121418

雰囲気： 上品、エディトリアル、モダン

最適な用途： テックやプレミアムサービスのブランドアイデンティティ

上品でエディトリアルなこのパレットは、サテンの光沢とグラファイトの影がフレッシュな雑誌の見開きを思わせます。冷たすぎない洗練感を保ちたいプレミアムブランドの定番。オートやコバルトなど暖色や鮮やかなアクセントをプラスして個性も演出できます。コツ：ロゴや見出しにはほぼ黒を使い、背景にはオフホワイトでコントラストを保ちましょう。

media.ioで生成したサテン・グラファイトの画像例

4）パールワークショップ

HEX： #ffffff #e2e5e8 #c1c7cd #8c959e #5a6168

雰囲気： 明るい、実用的、スタジオの清潔感

最適な用途： クラフトショップやワークショップ系ブログ、ハウツーサムネイル

明るく実用的で、陽射しあふれるスタジオや整頓された引き出しのような雰囲気。クリーンな白が読みやすさを保ち、ミッドグレーがボーダーやキャプション、目立たせたい部分の枠組みに役立ちます。チュートリアルやECカテゴリー、ステップ式グラフィックに最適で、アクセントにはコーラルやミントがフレンドリー。コツ：2番目に暗い色は控えめに、影をさりげなく使って粗さを避けましょう。

media.ioで生成したパールワークショップの画像例

5）ルナコンクリート

HEX： #f1f2f3 #d0d2d5 #a5a9ae #6f747b #2b2f35

雰囲気： インダストリアル、重厚、建築的

最適な用途： 建築ポートフォリオや事例紹介

インダストリアルで重厚なこのパレットは、月明かりのコンクリートやシャープなエッジを思わせる色調。大きな画像を引き立てつつ、キャプションやグリッドも整理されます。建築サイトやプロダクト事例、プレゼン資料にぴったりで、温かみのある木目写真や銅のアクセントとも好相性。コツ：一番暗いトーンはラベルなど要所だけに使い、全体の余白を広く取りましょう。

media.ioで生成したルナコンクリートの画像例

6）バーチアッシュ

HEX： #f6f4f1 #d7d2cc #b0a8a0 #7e7a75 #3a3a38

雰囲気： 暖かみのある中立、オーガニック、心地よい

最適な用途： 北欧キッチンやライフスタイルブランド

温かみのあるオーガニックカラーで、白樺の樹皮や暖炉の灰のような雰囲気。無機質にならず落ち着いた印象なので、自然素材のテクスチャやコットン、淡いオークと合わせて、サゲやクレイの控えめなアクセントで季節感を演出できます。コツ：暖かみのあるベージュグレーを主背景に使うと冷たくなりません。

media.ioで生成したバーチアッシュの画像例

7）ミュージアム・ミニマル

HEX： #fbfbfc #d9dde1 #b4bac0 #6b737b #22272d

雰囲気： 静かな高級感、美術館風、シャープ

最適な用途： アートギャラリーやミュージアム、展覧会カタログ

静かで美術館のようなこのパレットは、白い壁や磨かれたサイン、静謐な空間を連想させます。柔らかなシルバーはアートの邪魔をせず、チャコールがタイトルやナビを引き締め。カタログやイベントページ、会場案内サインなどに最適で、深いバーガンディなど上品なアクセントでハイライトを。コツ：ライトグレーで余白や細い線をたっぷり取り、美術館のような仕上がりに。

media.ioで生成したミュージアム・ミニマルの画像例

8）ストーミースチール

HEX： #e9edf2 #b8c0c9 #8793a0 #4c5866 #1d2630

雰囲気： ドラマチック、クール、自信に満ちた印象

最適な用途： ゲームサイトや映画的なランディングページ

ドラマチックでクールなこのパレットは、嵐の前の鋼鉄の雲のような雰囲気。青みがかったグレーで緊張感とエネルギーを持たせつつ、派手な彩度にはならないのが特徴。主役セクションやトレーラー、目立つCTAに最適で、ネオンシアンやホットマゼンタを合わせればモダンなエッジも。コツ：一番暗い色を見出しの背後のビネットに使うと文字が際立ちます。

media.ioで生成したストーミースチールの画像例

9）コールドシャンパン

HEX： #f5f1ea #ddd5cb #b8b0a6 #8a8580 #3b3b3c

雰囲気： エレガント、やわらかい温かみ、お祝い感

最適な用途： 結婚式の招待状や高級イベントのブランディング

エレガントでやわらかな温かみのあるこのパレットは、冷えたシャンパンやサテンリボン、ろうそくの灯りに照らされたグラスを思い起こさせます。フォーマルな招待状やメニュー、会場サインにぴったりで、メタリックフォイルのエフェクトとも好相性。アクセントにはブラッシュやアイボリー、深いグリーンを組み合わせてロマンチックさと現代感を両立。コツ：一番明るい色でシルバー箔を再現、ミッドグレーでさりげないベベル影を加えましょう。

media.ioを使って生成した冷たいシャンパンの画像例

10) 回路ダスト

HEX：#f2f5f7 #c7d0d8 #8a97a3 #51606c #1b232b

雰囲気：テクニカル、鮮明、少し未来的

最適な用途：開発者ドキュメントとエンタープライズUIシステム

技術的で鮮明で、ビルド後にクリーンなハードウェアをブラッシュダウンしたように感じます。クールなミッドトーンは、読みやすさを損なわないテーブル、コードブロック、微妙な仕切りに最適です。ドキュメント、デザインシステム、B2Bアプリに使用し、リンクやアクティブな状態には単一の明るいアクセントとペアリングします。ヒント: 本文のテキストには最も暗い色合い、ページの背景には最も淡い色合いを使用して、コントラストにアクセスしやすくします。

media.ioを利用して発生する回路ダストの画像例

11) 冬のカシミヤ

HEX：#faf8f6 #e3ded9 #c3bbb3 #8e877f #4c4743

雰囲気：柔らかく、心地よく、控えめな

最適な用途：化粧品パッケージとウェルネス製品

柔らかく心地よい、カシミヤラップと静かな冬の朝を思い出させます。温かみのあるグレーのニュートラルがスキンケアとウェルネスのビジュアルをフラットにし、ラベルを優しく信頼できるようにします。マットゴールド、ダスティピンク、または落ち着いたラベンダーと組み合わせると、叫ぶことなくプレミアムなタッチを加えます。ヒント: 印刷しやすいデザインは、広い領域を 2 つの最も明るい色合いにし、小さなタイプのみに暗い色合いを予約すると最もよく見えます。

media.ioを使って生成した冬用カシミヤの画像例

12) モノクロロフト

HEX：#f8f9fa #d4d7db #aeb4bb #707983 #2d333a

雰囲気：モダンで風通しの良い都会的な家庭

最適な用途：不動産リストとプロパティパンフレット

モダンで風通しがよく、コンクリートの床ときれいなラインの日当たりの良いロフトのような気分です。バランスの取れたミッドグレーは、フロアプランのオーバーレイ、リストカード、微妙なアイコンに最適です。暖かい木の写真や落ち着いたテラコッタのアクセントと組み合わせると、魅力的な外観を保ちます。ヒント: すぐにスキャンできるように、価格タグを最も暗い色合いで表示し続けてください。

media.ioを使って生成したモノクロロフトの画像例

13) 氷河インク

HEX：#edf3f7 #c4d1dc #90a5b5 #4c6a7f #10202c

雰囲気：氷のような、海のような、知的な

最適な用途：金融アプリと信頼第一のブランディング

氷のようで知的で、氷河の水が暗いインクに出会ったように読めます。ブルーからグレーへのシフトにより、金融、コンサルティング、セキュリティのブランドが過度に企業的になることなく自信を持つことができます。ボタンやハイライトには、さわやかなホワイトと抑制されたティールのアクセントを合わせてください。ヒント: 明るい背景でデータを読みやすく保つために、グラフとキー番号に深いネイビーグレーを使用します。

media.ioで生成したglacier inkの画像例

14) 静かな合金

HEX：#f4f6f8 #cfd5db #a0a8b1 #6a727c #2a3036

雰囲気：バランスの取れた、プロフェッショナルな、控えめな

最適な用途：企業スライドデッキとアニュアルレポート

バランスが取れていてプロフェッショナルで、さりげなく光沢のある仕立ての良いスーツのような感じです。このグレーシルバーのカラーパレットは、チャート、写真、ブランドのアクセントの余地を残しながら、プレゼンテーションを鮮明に保ちます。ロゴの1つのシグネチャーカラーとペアリングして、セクション全体で注意を誘導します。ヒント: グリッド線とテーブルの境界線にミッドグレーを適用して、視覚的な乱雑さなくデータを読み取りやすくします。

media.ioを使って生成した静音合金の画像例

15) ソフトピューターローズ

HEX：#f7f1f3 #e0d3d6 #bfa8ae #8b6f77 #3f2f35

雰囲気：ロマンチック、モダンなヴィンテージ、優しい

最適な用途：美容ブランドとブティックのソーシャル投稿

モダンなヴィンテージのひねりを加えたロマンチックで、ピューターとほこりっぽいローズハッシュをブレンドしています。柔らかいピンクグレーは、タイポグラフィを鮮明に保ちながら、写真で肌の色合いを美しく感じさせます。クリーミーなホワイトとメタリックシルバーのタッチを合わせると、ラックスな仕上がりになります。ヒント: 小さなテキストのみに最も深いプラムグレーを使用し、明るいトーンに重い作業をさせます。

media.ioを使って生成したソフトピューターローズの画像例

16) メトロクォーツ

HEX：#f3f3f5 #d1d1d8 #a5a6b2 #6f7080 #2b2c36

雰囲気：クールで洗練された現代的な

最適な用途：モバイルアプリのUIキットとコンポーネントライブラリ

クールで洗練された、駅のライトの下の石英の反射を思い出させます。わずかにバイオレットに傾いたグレーは、カラフルになることなく、インターフェイスに新鮮で現代的な雰囲気を与えます。選択した状態とバッジのために明るい白と単一の飽和アクセントと組み合わせてください。ヒント: アクセシビリティのコントラストをコントロールし続けるために、無効になっているコンポーネントを 2 つの最も明るい色合いに保ちます。

media.ioを使って生成したmetro quartzの画像例

17) 钢鉄および砂

HEX：#f4f2ee #d6d0c6 #b1a79c #7d746b #2e2b28

雰囲気：土っぽい、モダンな素朴な、地に足のついた

最適な用途：カフェメニューとホスピタリティブランディング

土っぽく接地された、スチールニュートラルと砂で温めたグレーを混ぜ合わせています。このパレットは、カフェ、ホテル、自然でモダンなエッジを必要とするパッケージにとって歓迎的な感じがします。クラフト紙の質感、エスプレッソブラウン、落ち着いたグリーンと組み合わせると、落ち着いたオーガニックな外観になります。ヒント: オフホワイトの在庫にメニューを印刷し、見出しと価格にのみ最も暗い色合いを使用します。

media.ioを使って生成した鋼と砂の画像例

18) 水星の夕暮れ

HEX：#e7e9ee #b9bdc8 #80879a #474e60 #181c26

雰囲気：ムーディー、映画的、未来的

最適な用途：アルバムジャケット・イベントポスター

ムーディーで映画的で、水銀の反射が夕暮れに消えていくように見えます。これらのグレーシルバーの色の組み合わせは、タイポグラフィがシャープでモダンに感じる必要があるポスターや表紙に輝きます。アシッドグリーンや紫外線などの単一の高電圧アクセントと組み合わせると、即座にインパクトが得られます。ヒント: 大きな背景でバンディングを避けるために、グレインまたはミッドトーンとダークトーンの間に微妙なグラデーションを使用します。

media.ioを使って生成した水星の夕暮れの画像例

19) 磨かれたスレート

HEX：#f0f2f4 #c8ced3 #9ca3aa #616a73 #242a31

雰囲気：清潔で信頼性の高い、モダンなクラシック

最適な用途：ビジネスウェブサイトとサービスランディングページ

清潔で信頼性が高く、雨が降った後に磨かれたスレートのような感じです。中央の値は、セクション ブレーク、アイコン フィル、および明確に読み取れる微妙なボタン ステートに最適です。アンバーや落ち着いたティールなどの温かみのあるアクセントと組み合わせると、CTAが意図的に感じられるようになります。ヒント: 背景は最も明るい 2 つの色合いに保ち、ナビゲーションとフッター ブロックにのみ slate を使用します。

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

20) 曇りチタン

HEX：#f6f7f9 #dde0e6 #b7bcc6 #808896 #343b45

雰囲気：軽く、風通しがよく、テクノロジーに優れた

最適な用途：ハードウェア製品ページとeコマースギャラリー

軽量でテクノロジーに優れた、曇ったチタンと精密にカットされたエッジを思い起こさせます。穏やかなコントラストにより、ページを明るくスクロールしやすく保ちながら、製品をプレミアムに感じさせます。クリーンなホワイトスペース、微妙な影、購入ボタンのための単一のアクセントカラーと組み合わせてください。ヒント: ボーダーとセパレーターには 3 番目の色合いを使用して、ギャラリー グリッドが重く見えずに鮮明に保ちます。

media.ioを使って生成した曇りチタンの画像例

グレイシルバーと相性の良い色は？

グレーシルバーは、同じニュートラルベースを共有しているため、鮮明な白、ニアブラック、チャコールと簡単にペアになります。これにより、レイアウトがきれいに保たれ、タイポグラフィと間隔がより意図的に感じられるようになります。

アクセントには、「コールド エネルギー」（エレクトリック ブルー、シアン、ライム）または「ウォーム ソフィスティケーション」（アンバー、ブラッシュ、オート麦、落ち着いたテラコッタ）のいずれかを選択してください。グレーがニュートラルであればあるほど、乱雑に見えることなくアクセントが飽和しています。

より柔らかくプレミアムな仕上がりが必要な場合は、落ち着いたグリーン、ダスティピンク、深いバーガンディを使用してください。これらのトーンは個性を加えながら、シルバーグレーをコントロールし続けます。

実際のデザインでグレイシルバーパレットを使う方法

まず、明るい背景、表面/カードグレー、境界線用ミッドグレー、テキストとナビゲーション用のダークグレーの役割を割り当てます。これにより、一般的な「すべてが同じグレー」の問題が防止され、コントラストを予測可能に保ちます。

UI では、インタラクティブ ステート (プライマリ CTA、アクティブ タブ、リンク) に最も明るいアクセントを予約し、すべてのセカンダリ UI クローム (ディバイダー、無効状態) をライト グレーからミッド グレーに保ちます。インテリアやブランディングでは、パレットが偶然ではなく意図的に感じられるように、素材 (金属、石、生地) に 1 つのシルバー トーンを繰り返します。

さらに深みが必要な場合は、テクスチャを追加してください。微妙なグラデーション、柔らかい影、またはグレインを使用すると、シルバーパレットは触覚的で平坦ではなく、特に大きな背景では感じられます。

AIでグレイシルバーパレットビジュアルを作成

ムード ボード、UI モックアップ、ブランド グラフィックを作成している場合は、クイック ビジュアルを生成すると、グレー シルバー トーンがクール、暖かい、またはコンテキストで完全にニュートラルに感じるかどうかを確認できます。

Media.io を使用すると、プロンプト (「ダッシュボード UI」、「カタログ レイアウト」、「結婚式の招待状」など) を一貫したパレット主導の画像に変換できます。これは、タイポグラフィのコントラスト、製品のプレゼンテーション、全体的な雰囲気をテストするのに最適です。

上記のパレットを 1 つ選択し、そのプロンプトを再利用し、主題 (UI、インテリア、ポスター) のみを微調整して、デザイン全体でまとまりのある外観を保ちます。

次へ： イエローグリーンカラーパレット