Modern Silver and Blue Color Combinations: 20 Ideas with HEX Codes

シルバーブルーは、風通しの良いニュートラルと自信に満ちたブルーグレーの間のスイートスポットに位置しており、高級感を感じながらもモダンで落ち着いたデザインを簡単に構築できます。

以下は、16進コードを使用した20以上の厳選されたシルバーブルーパレットのアイデアと、UI、ブランディング、プリント、インテリアの各ルックを視覚化するために使用できるAI画像プロンプトです。

シルバーブルーのパレットがうまく機能する理由

シルバーブルーのパレットは、クールなニュートラルと落ち着いたブルーをブレンドしているため、クリーンでモダンで信頼できると読めます。そのため、ダッシュボード、デッキ、製品ページなどの情報が多いレイアウトに信頼できる選択肢となります。

また、ミニマルからドラマチックまでうまくスケールできます。フォギーシルバーと柔らかいブルーグレーで物事を軽く保ったり、ナビゲーション、見出し、プレミアムコントラストにインキネイビーを使用して重みを追加したりできます。

シルバーブルーはニュートラルのように振る舞うため、温かみのあるアクセント（シャンパンゴールド、サンド、カッパー）とさわやかなクールなアクセント（アイシーシアン、スチール、グラファイト）の両方とうまくマッチし、視覚的なノイズなしに多くの柔軟性を与えます。

20 以上のシルバー ブルー カラー パレットのアイデア (十六進コード付き)

1) フロストハーバー

十六進：#E9EEF3 #BFC9D6 #7F97B3 #3E5C76 #0F2233

気分：さわやか、海岸沿い、落ち着いた

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

さわやかで海岸沿いのこれらのトーンは、静かな港から朝の霧が上がっているように感じます。淡いシルバーは、鋼鉄のようなミッドブルースとコントラストのための自信のある深いネイビーの後ろにきれいに座っています。明瞭さが重要なダッシュボードに使用し、シンプルなライン アイコンと広い間隔を組み合わせます。ヒント: レイアウトを読みやすくするために、主なアクションとキーナビゲーションに最も暗いトーンを予約してください。

media.ioを使って生成したfrosted harborの画像例

メディア.io

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

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

2）氷河インク

十六進：#F2F5F7 #C7D2DD #8AA0B5 #2F4B63 #121C26

気分：洗練された、焦点を当てた、編集

最適な場合:テックピッチデッキスライド

洗練された集中力があり、濡れたインクのネイビーの横に磨かれた金属のように読めます。このシルバーブルーの組み合わせは、重さを感じずにシリアスでモダンなトーンが必要なときにうまく機能します。淡いグレーブルーをスライドキャンバスとして使用し、ほぼ黒の色合いで見出しをアンカーします。ヒント: ミッド スチール トーンに 1 つのアクセント ルールまたはディバイダー ラインを追加して、濃密なコンテンツを構成します。

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

3) 月明かりの钢鉄

十六進：#EDF0F4 #D0D7E1 #9AAEC2 #5E768E #263445

気分：静かで洗練された、モダンな

最適な場合:高級文房具セット

静かで洗練されたこれらの色合いは、つや消し鋼に反射する月明かりのように感じます。柔らかいシルバーが物事をエレガントに保ち、より深いブルーグレーがタイポグラフィに重力を加えます。文房具、封筒、最小限のモノグラム、特にコーティングされていない紙の質感に輝きます。ヒント: 全体的な外観を風通し良く保つために、名前と重要な詳細にのみ最も暗い色合いを使用してください。

media.ioを使って生成したムーンライトスチールの画像例

4) シーサイドクローム

十六進：#F6F8FA #C9D4DE #7E9AB2 #375B77 #0C2A3D

気分：フレッシュ、さわやか、自信満々

最適な場合:ブランド アイデンティティ キット

さわやかでさわやかで、海の空気、クロームのディテール、さわやかなユニフォームを思い出させます。このシルバーブルーのカラーパレットは、フレンドリーなライトトーンと、マークとタイプの大胆で信頼性の高いネイビーのバランスを取っています。モノクロにすることなく、モダンで技術的で信頼できると感じる必要があるブランドシステムに適合します。ヒント: ロゴはネイビーのままにし、セカンダリ グラフィックとパターンにはミッド ブルーを使用します。

media.ioを使って生成したseaside chromeの画像例

5) 北极の雾

十六進：#FAFBFC #DCE3EA #A7B7C7 #6B8296 #2B3E52

気分：明るく、風通しがよく、穏やかな

最適な場合:ウェルネスブログヘッダー

軽やかで風通しが良く、開いた空に冷たい風が漂っているような感じです。ほぼ白と柔らかいグレーブルーが写真の優しいベースになり、より深いスレートが構造を見出しにもたらします。落ち着いた読みやすさが必要なウェルネスやライフスタイルのレイアウトに使用してください。ヒント: 明るい背景での厳しいコントラストを避けるために、本文のテキストはネイビーではなくスレートにしてください。

media.ioを使って生成した北極ミストの画像例

6) デニム シルバーライン

十六進：#F1F4F7 #CBD6E0 #8EA4BA #4E6C87 #1A2A3A

気分：カジュアル、スマート、親しみやすい

最適な場合:eコマース製品ページui

カジュアルでスマートな、きれいなシルバーの糸でステッチされた着用したデニムを思い出させます。このようなシルバーブルーの色の組み合わせは、無菌に見えずに信頼感があるため、ショッピングページに最適です。コンテンツ ブロックには淡いトーン、タグ、評価、セカンダリ ボタンにはデニムのミッド トーンを使用します。ヒント: スキャンをガイドするために、価格とアクションへの主な呼びかけのために、ほぼ黒のみを導入します。

media.ioを使って生成したデニムシルバーラインの画像例

7) ストームグラス

十六進：#E8EEF2 #BAC8D4 #7F95A7 #3F586B #1B2B36

気分：ムーディー, 成熟した, 控えめ

最適な場合:ブックカバーデザイン

ムーディーで成熟したこれらの色合いは、ガラス越しに見る嵐の雲を示唆しています。クールなグレーブルーのベースがドラマチックなタイポグラフィをサポートし、チャコールネイビーが瞬時に深みを生み出します。ノンフィクション、スリラー、または映画的なミニマリスト フィクションの表紙に適しています。ヒント: タイトルを最も明るいトーンに配置し、中央の色合いに薄いボーダーを追加すると、プレミアムな仕上がりになります。

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

8) クラウドバンク ネイビー

十六進：#F4F7FA #D3DCE6 #A1B2C3 #5D748B #102233

気分：清潔、構造化された、プロフェッショナル

最適な場合:フィンテックアプリのui

清潔で構造化されており、鮮やかなネイビーの地平線に囲まれた明るい雲の塊のように感じられます。シルバーブルーの配色として、落ち着いた信頼性を保ちながら高い情報密度をサポートします。画面には最も明るいトーンを使用し、2 つの中間トーンを hover、selected、disabled などの状態に割り当てます。ヒント: エラーと成功の色は、海軍のアンカーと戦わないようにミュートにしてください。

media.ioを使って生成したcloudbank navyの画像例

9) ポーラーパール

十六進：#FBFCFD #E2E8EF #B6C4D2 #7C92A6 #344656

気分：柔らかく、明るく、エレガント

最適な場合:結婚式の招待状スイート

柔らかく明るく、青白い空の下で雪に真珠の光沢を呼び起こします。ほぼ白からスレートへの穏やかなグラデーションは、招待状に厳しいことなく洗練されたモダンな雰囲気を与えます。シャンパンゴールドのような暖かいメタリックホイルと組み合わせると、クールなトーンが歓迎されます。ヒント: 明るい紙のストックで読みやすくするために、本体のコピーを中央のスレートにセットします。

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

10）コバルトヘイズ

十六進：#EEF2F6 #C6D2DE #7F9DB7 #2F5E86 #0F1F2C

気分：エネルギッシュ、さわやか、モダン

最適な場合:スポーツウェア商品広告

エネルギッシュでさわやかで、冷たい霧をコバルトが切り裂いているように見えます。よりパンチの効いたミッドブルーはアスレチックなドライブをもたらし、ダークアンカーはレイアウトをしっかりとプレミアムに保ちます。大きなネオンのアクセントなしでモーションを求める製品広告に使用してください。ヒント: ミッドブルーにハイライトを加え、大きな背景を最も淡いトーンに保ち、すっきりとしたスタジオの雰囲気を醸し出します。

media.ioを使って生成したコバルトヘイズの画像例

11) 青写真アイス

十六進：#F0F6FA #CFE0EC #9AB7CE #4D7AA1 #173048

気分：技術的、きちんとした、独創的

最適な場合:アーキテクチャポートフォリオ

技術的で整頓されており、つや消しベラムに設計図の線が描かれているように感じられます。明るい氷のような色調でページが開いたままになり、より豊かな青が正確でエンジニアリングされたアクセントを加えます。階層が重要なポートフォリオのセクション、図、キャプションに使用してください。ヒント: グリッドラインとキャッチアウトにミディアムブルーを適用して、図面を一目で読みやすくします。

media.ioを使って生成したblueprint iceの画像例

12) リバーストーン シルバー

十六進：#F7F9FB #D8E0E8 #AEBBC8 #6E8497 #273646

気分：接地された、自然な、バランスの取れた

最適な場合:リビングルームのインテリアコンセプト

接地されたナチュラルな、クールで銀色のウォッシュでリバーストーンを思い出させます。ミッドグレーブルーは汎用性の高いニュートラルのように振る舞い、深いスレートはトリム、キャビネット、またはフィーチャーウォールを定義できます。オーク、リネン、マットブラックのハードウェアと組み合わせると、モダンでオーガニックな外観になります。ヒント: 冷たいキャストを避けるために、夕方の光の下で最も明るい 2 つの色合いをテストしてください。

media.ioを使って生成したリバーストーンシルバーの画像例

13) ウィンターマリーナ

十六進：#EFF3F7 #C8D3DD #8CA1B3 #506A80 #182733

気分：クール、海上、リラックス

最適な場合:旅行パンフレットカバー

涼しくて航海的で、静かなドック、冬の水、そしてバンドルされた週末を提案しています。明るいシルバーブルーは画像を明るく保ち、暗いトーンはタイトルと重要な情報をフレーム化します。トロピカルすぎず、新鮮で信頼性の高い感触が必要なトラベルカバーに使用してください。ヒント: 視覚的なバランスを向上させるために、砂や銅などの小さな暖かいアクセントを追加します。

media.ioを使って生成したウィンターマリーナの画像例

14) 银波勾配

十六進：#F9FBFD #D7E3EF #A4BFD6 #6E95B8 #2A4E6C

気分：スムーズ、楽観的、現代的

最適な場合:ランディングページ ヒーローセクション

滑らかで楽観的な、それは明るい地平線に転がる柔らかい波のように感じます。ステップダウンブルースは、濃い影のないグラデーション、ボタン、微妙な奥行きに最適です。動きと鮮明さを同時に求めるヒーローセクションに使用してください。ヒント: グラデーションを穏やかに保ち、アクセシビリティとコントラスト制御のために単色のコンポーネントを追加します。

media.ioを使って生成したsilverwaveグラデーションの画像例

15) 深い流れ

十六進：#E6EDF4 #B8C7D7 #6F8DA7 #2D4C66 #0B1A24

気分：ドラマチック、自信満々、プレミアム

最適な場合:ウイスキーラベルデザイン

ドラマチックでプレミアムで、銀色の空の下の深い水に似ています。ダークベースは贅沢さを加え、明るいトーンはプリントのディテールを鮮明で読みやすく保ちます。このシルバー ブルーの色の組み合わせは、暖かいゴールド ホイルやテクスチャード ペーパーと美しくマッチし、コントラストを生み出します。ヒント: 装飾的なラインには中央の青を使用し、ブランド マークにはほぼ黒を残します。

media.ioを使って生成したディープカレントの画像例

16) 天窓スレート

十六進：#F5F8FB #D6DFE8 #A9B8C7 #697D90 #2A3946

気分：ミニマル、風通しがよく、実用的

最適な場合:履歴書テンプレート

ミニマルで実用的な、それは滑らかなスレートから跳ね返る天窓のように見えます。淡い背景はページを明るく保ち、スレートトーンは見出しと仕切りに明確な階層を作成します。タイポグラフィがほとんどの作業を行う履歴書や 1 ページのポートフォリオに使用してください。ヒント: セクション ヘッダーを最も暗い色合いに設定し、本文のテキストを 1 ステップ明るくして、より柔らかく読みます。

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

17) フロストラインセラミック

十六進：#F8FAFC #DDE6EE #B1C2D0 #7390A8 #314252

気分：新鮮で清潔、スパのような

最適な場合:スキンケアパッケージ

フレッシュでスパのような、釉薬のセラミックと涼しいスチームを思い出させます。ライトシルバーは衛生的な感じがしますが、ミディアムなブルーグレーは優しい臨床的自信を加えます。シンプルさが品質と信頼を示すスキンケアパッケージに使用してください。ヒント: 支配的なラベルの背景 (最も明るいトーン) を 1 つ選択し、材料と小さなアイコンにのみ暗い色合いを使用します。

media.ioを使って生成したフロストラインセラミックの画像例

18) 天文台の夜

十六進：#EAEFF5 #C2D0DE #7E97B0 #3A5672 #0A1520

気分：ミステリアス、シャープ、ハイコントラスト

最適な場合:イベントポスター

神秘的でさわやかで、きれいな夜空を背景に星の光を感じます。このシルバーブルーのカラーパレットは、厳しい純粋な黒に頼ることなく、ポスターに強いコントラストを与えます。タイプブロックには最も明るいトーンを使用し、大胆なフィールドとエッジには深い夜の色合いを使用してください。ヒント: レイアウトをシンプルに保ち、特大の見出し 1 つでドラマを伝えましょう。

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

19) アイシーボタニカル

十六進：#F3F7FA #D7E4EA #A3BCCA #6A8CA1 #2C4556

気分：繊細で爽やかな、自然主導の

最適な場合:ボタニカルアートプリント

繊細でさわやかで、霜がまみれた淡い葉に似ています。優しいシルバーブルーのウォッシュはイラストに最適で、ラインワークを見やすく柔らかく保ちます。オフホワイトペーパーと薄いチャコールアウトラインと組み合わせると、ギャラリー対応のプリントになります。ヒント: 茎や影などの最も小さなディテールは、明るさを保つために最も暗いトーンを維持してください。

media.ioを使って生成したicy botanicalの画像例

20) シルバーメトロ

十六進：#F6F7F9 #D2D8E0 #9FAEBF #5F748A #1F2B36

気分：都会的、洗练された、効率的

最適な場合:道案内サイネージシステム

都会的で洗練された、それはブラッシュスチール、地下鉄のタイル、そしてきれいなタイポグラフィを提案しています。ニュートラルは標識を読みやすく保ちますが、深い青灰色は叫ぶことなくルートやゾーンをコード化できます。明確さが最も重要なオフィス、診療所、またはキャンパスのウェイファインディング システムに使用してください。ヒント: 遠くでコントラストをテストし、テキストではなく背景のトーンを最も明るくしてください。

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

21) 静かなフィヨルド

十六進：#EEF4F8 #C7D7E2 #8FB0C4 #4B738C #162834

気分：穏やかで、広々としていて、映画のような

最適な場合:旅行ブログの編集スプレッド

穏やかで広大な空間で、曇り空の下のフィヨルドのように感じられ、穏やかで映画のような寒さが漂います。ミッドトーンが雰囲気を加え、深い色合いがキャプションや引用符を美しくフレーム化します。写真には余裕が必要で、テキストは控えめにする必要がある編集レイアウトで使用してください。ヒント: 余白を広くし、重いルールの代わりにミディアムブルーを使用して小さなセクションマーカーを使用してください。

media.ioを使って生成した静かなフィヨルドの画像例

シルバーブルーと合う色は何ですか？

シルバーブルーは、ディープネイビー、チャコール、スレートと自然にマッチし、すっきりとしたトーナルシステムを実現します。これは、見出し、ナビゲーション、およびプライマリアクションに十分なコントラストを備えたモダンなモノクロの雰囲気が必要な場合に理想的です。

暖かさのために、シャンパンゴールド、真鍮、銅、砂、または暖かいオフホワイトを追加して、クールなブルーグレーが氷を感じないようにします。インテリアやパッケージでは、ウッドトーン（オーク、ウォールナット）やリネンのようなニュートラルが特に効果的です。

より多くのエネルギーが必要な場合は、コバルト、アイシーシアン、ミュートティールなどのコントロールされたアクセントを試してください。これらのアクセントはハイライト(アイコン、チャート、リンク)に限定して、シルバーブルーのベースが落ち着いて読みやすい状態を保ちます。

実際のデザインでシルバーブルーのカラーパレットを使用する方法

ロールを割り当てることから始めます。背景はライトシルバー、サーフェスとセカンダリUIはミッドブルーグレー、タイポグラフィとキーコントロールは最も暗いネイビー/スレートです。これにより、ページとコンポーネント全体で階層が一貫して保たれます。

ブランディングでは、ロゴとコアテキストに暗いアンカーカラーを使用し、パターン、文房具フィールド、ソーシャルテンプレートにシルバーブルーを取り入れます。このアプローチは、冷めずに技術的でプレミアムな感じがします。

インテリアの場合は、シルバーブルーをニュートラルペイントファミリーのように扱います。壁には明るい色合い、室内装飾品やキャビネットにはミッドトーン、トリムや金属のアクセントにはダークスレートを使用してください。夜間に青いキャストを避けるために、常に異なる照明の下でテストしてください。

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

シルバーブルーのパレットが実際のレイアウトでどのように動作するかを確認したい場合は、AIを使用してクイックモックアップを生成してください。完全なデザイン システムにコミットする前に、コントラスト、ムード、素材の感触 (紙、金属、セラミック) をプレビューできます。

上記のプロンプトを出発点として使用し、製品タイプ (アプリ画面、ポスター、ラベル、リビングルーム) を入れ替えて、プロンプト内のパレットを一貫した状態に保つと、より制御された結果が得られます。

気に入った外観を見つけたら、一度に 1 つの変数 (照明、テクスチャ、タイポグラフィ スタイル) のみを変更して繰り返します。そうすれば、シルバー ブルーのトーンがバリエーション全体で一貫性を保ちます。

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