ブルークリーム配色22選｜おしゃれなカラーパレットとHEXコード

ブルークリームパレットは、クールで落ち着いたブルーと、温かみのあるクリーム色をブレンドし、モダンでありながら人間味のあるデザインを作りたいときにぴったりです。

以下に、ブランド、UI、印刷にも再利用できるHEXコードつきで厳選した20以上のブルー＆クリーム配色組み合わせと、実用的なヒント、AIプロンプトを紹介します。

ブルークリームパレットが優れている理由

ブルーは明快さ、信頼、落ち着きをもたらし、クリームは温かみと柔らかさを加えます。これらを組み合わせることで、心地よく読みやすいデザインのコントラストが生まれます。

これらのトーンはデジタルから印刷まで美しく応用できます。濃いブルーは見出しやCTAに構造をもたらし、クリームは高級感のある「紙」らしいキャンバスになり、ページがまぶしくなりすぎるのを防ぎます。

最後に、ブルー＆クリームの組み合わせは柔軟性があり、ネイビーの濃さやクリームの明るさ次第で、海辺の雰囲気やコーポレートな印象、くつろぎ感や手作り感など、幅広いイメージが演出できます。

20種類以上のブルークリーム配色アイデア（HEXコード付き）

1) コースタルバニラスサーフ

HEX: #1F4E79 #3D7EA6 #A9D6E5 #F7E7CE #FFF7EA

雰囲気: フレッシュ、爽やか、楽観的

おすすめ用途: 旅行サイトのヒーローバナー

海辺の空気と温かい砂を感じさせる、フレッシュで爽やかなトーン。濃い青を見出しに使い、淡い青をセクションやアイコンに重ね、クリーム色をキャンバスとして使います。モダンさを保つために、シンプルなサンセリフ書体とさりげない線画と組み合わせましょう。ポイントは、一番濃いブルーを主要ボタンに使うことで、インターフェースが軽快でエアリーな印象になります。

media.ioで生成されたコースタルバニラスサーフの画像例

Media.io

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

無料で今すぐ試す

2) ポーセリンスカイ

HEX: #0B2545 #4B88A2 #BFD7EA #F5E6CC #FFFFFF

雰囲気: クリーン、落ち着き、ギャラリー風

おすすめ用途: 編集雑誌レイアウト

白とクリームがページ全体を支え、青で引用やルール、セクション見出しにアクセントをつけます。セリフ体の見出しやゆったりした余白と組み合わせることで高級感が生まれます。ポイントは、画像もクールトーンにすることで、全ページで配色の統一感を保ちましょう。

media.ioで生成されたポーセリンスカイの画像例

3) ソフトデニムジェラート

HEX: #2D5D7B #6FA8DC #CFE8FF #F2E3C6 #FFF9F0

雰囲気: 親しみやすい、カジュアル、スイート

おすすめ用途: アイスクリームショップのメニュー

デニムのエプロンとバニラジェラートのような親しみやすい甘さ。ブルーで構造を作り、クリームで食欲を誘う印象を作れます。丸みのある書体やシンプルな味アイコンと合わせて、素早く内容が把握できるデザインに。ポイントは、中間の青を価格やラベルに使い、淡いトーンでもコントラストを失わないこと。

media.ioで生成されたソフトデニムジェラートの画像例

4) ブルーベリークリームソーダ

HEX: #243B6B #4F7CAC #9CC4E4 #F6E2B3 #FFF3E0

雰囲気: 遊び心、爽快、若々しい

おすすめ用途: 飲料商品広告ポスター

ブルーベリーシロップがクリームソーダに混ざるような楽しく爽快な配色。広告では、エネルギーと柔らかさを両立できます。ネイビーに力強い書体で商品名を、クリームでオファーや価格をフレーム。ポイントは、淡い青でさりげないバブルの形を加えるとテーマ性を崩さず賑やかに。

media.ioで生成されたブルーベリークリームソーダの画像例

5) フレンチリビエラリネン

HEX: #123C69 #2E86AB #BEE3F8 #EED9C4 #FAF6F0

雰囲気: 日差し、リラックス、高級感

おすすめ用途: リゾートブランドのステーショナリー

海沿いスイートのリネンカーテンのような日差しの中でリラックス。ロゴやレターヘッドに濃い青、紙面にはクリームやオフホワイトを主役にするとミニマルな高級感が生まれます。金箔ディテールや軽やかな写真とも好相性。ポイントは、中間の青で補助テキストを書くと温かい用紙になじみ、黒の印象を和らげます。

media.ioで生成されたフレンチリビエラリネンの画像例

6) アイシーハーバークリーム

HEX: #0E3A53 #3A8FB7 #D7F2FF #F3E7D3 #FFFBF5

雰囲気: クリスプ、モダン、リフレッシュ

おすすめ用途: SaaSダッシュボードUI

朝の静かな港の光のようなクリスプでモダンな印象。淡いアイシーブルーをパネルやチャートに使い、深いティールブルーでナビゲーションをアンカーして明快に。クリームトーンはインターフェースの無機質感を柔らげ、ウェルカムな印象を作ります。ポイントは、主要CTAは濃いブルーに、最も明るい色はアクセントだけに使いましょう。

media.ioで生成されたアイシーハーバークリームの画像例

7) モーニングクラウドカップケーキ

HEX: #355C7D #6C9BCF #D9EEFF #F7E1C3 #FFF6E8

雰囲気: やさしい、居心地よい、親しみやすい

おすすめ用途: ベーカリー包装ラベル

雲のようなふわふわ感と新鮮なカップケーキの温もり。中間の青でラベルテキストを読みやすくし、温かいクリームで親しみやすさや手作り感を演出。手描きアイコンや少しざらついた紙質と相性抜群。ポイントは、最も淡い青で背景パターンを作り、クリームを主役に。

media.ioで生成されたモーニングクラウドカップケーキの画像例

8) ノーティカルクリームストライプ

HEX: #0A2342 #2C6E9B #8EC9E6 #F2D7B6 #FFFDF7

雰囲気: クラシック、クリスプ、マリン

おすすめ用途: サマーイベント招待状

セーラーストライプと温かいキャンバスの組み合わせ。濃いネイビーを主なテキストに、明るいブルーをボーダーや錨・波などモチーフに。クリームで柔らかなレイアウトに仕上げ、カジュアルイベントでもマリンの洗練が残ります。ポイントはストライプは一部だけに絞り、招待状をすっきり読みやすく。

media.ioで生成されたノーティカルクリームストライプの画像例

9) ダスティアズールビスケット

HEX: #2E4057 #5C7FA3 #B7CFE6 #E9D3B0 #FBF4E9

雰囲気: ソフト、控えめ、ヴィンテージモダン

おすすめ用途: ホームデコール ムードボード

ソフトで控えめ、温かいビスケットの隣にあるくすんだ陶器のようなムード。これらの色調は、強いコントラストが欲しくない落ち着いたインテリアに最適です。ダスティアズールは明るいオーク材やウーヴンテクスチャー、マットなブラスと組み合わせることで住みやすさを演出します。ヒント：中間のブルーを2〜3個のアイテムに繰り返し使うと、部屋全体が意図的に整って見えます。

media.ioで生成されたダスティアズールビスケットの画像例

10）クラシックブルーシャンティイ

HEX: #1B3B6F #2F6690 #A3CEF1 #F6E4C8 #FFF8EE

雰囲気: 洗練、信頼感、温かみ

おすすめ用途: 法律事務所ブランディングリフレッシュ

洗練され信頼感があり、企業のネイビーよりも人間味のある柔らかさ。ブルークリームのカラーパレットは、冷たくならない権威を求めるプロフェッショナルなブランディングに最適です。洗練されたセリフロゴやゆとりのあるクリームの余白と合わせることで、プレミアムな仕上がりになります。ヒント：ライトブルーはアイコンや区切り線に控えめに使い、深いブルーでブランドイメージを安定させましょう。

media.ioで生成されたクラシックブルーシャンティイの画像例

11）パウダーブルーパーチメント

HEX: #274C77 #6096BA #E7F0FA #EADBC8 #FDF7F0

雰囲気: エアリー、知的、静けさ

おすすめ用途: オンライン講座ランディングページ

柔らかく知的、デスクライトの下の羊皮紙ノートのような雰囲気。セクション背景にパウダームースを使い、見出しやリンクには濃いブルーを活用。クリームやパーチメントトーンは長文のページも無機質になりすぎず読みやすくします。ヒント：フォームフィールドは一番明るい色に設定して内容ブロックと明確に分けましょう。

media.ioで生成されたパウダーブルーパーチメントの画像例

12）コバルトカスタードポップ

HEX: #102A43 #1D4ED8 #93C5FD #F1DCA7 #FFF4DB

雰囲気: 大胆、明るい、モダン

おすすめ用途: テックスタートアッププロモポスター

大胆で陽気、カスタードのような優しさを持つコバルトのパンチ力。エレクトリックブルーは重要なコールアウト、バッジ、ボタンに使用し、クリーミーイエローでエネルギーを強くしすぎないよう調整。ジオメトリックなシェイプや自信あるサンセリフ体とも好相性。ヒント：大きな背景はクリームにしてコバルトの鮮やかさが強調されるように。

media.ioで生成されたコバルトカスタードポップの画像例

13）ストーミーブルーオート

HEX: #1F2937 #3B82A0 #A7C7E7 #E6D5B8 #FAF3E7

雰囲気: 落ち着き、ムーディー、安心感

おすすめ用途: コーヒーブランドパッケージ

落ち着きと安心感、暖かいカフェ窓の外の嵐雲のよう。濃いチャコールブルーでパッケージに重みを持たせ、オートとクリームの色調で親しみやすさと手触り感をプラス。クラフトな質感やスタンプ、シンプルなイラストとも好相性。ヒント：成分表は一番明るいクリームに配置し、小さな文字もマット紙で読みやすく。

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

14）アークティッククリームラグーン

HEX: #0F172A #1E6091 #BFE9FF #F4E3C1 #FFFAF2

雰囲気: クール、清潔、スパのよう

おすすめ用途: スキンケア製品広告

クールで清潔、クリーミーストーンに寄り添う北極ラグーンのよう。インキーブルーは商品名や主張に使い、ペールラグーンでグラデーションや柔らかいオーバーレイをサポート。クリームが穏やかな温かみを添え、ウェルネスやスキンケア表現にマッチ。ヒント：グロッシーなハイライトは控えめに使い、全体の落ち着きと高級感を保ちましょう。

media.ioで生成されたアークティッククリームラグーンの画像例

15）インディゴエクリュスタジオ

HEX: #111827 #3730A3 #9DB2FF #E7D8C5 #F9F3EC

雰囲気: クリエイティブ、洗練、ややドラマチック

おすすめ用途: ポートフォリオサイトデザイン

クリエイティブで洗練、エクリュのスケッチペーパーにインディゴインクが映えるような雰囲気。インディゴでナビとプロジェクトタイトルを、エクリュとオフホワイトで余白を作り、ギャラリーのような空気感に。大きな画像やミニマルなUIと好相性。ヒント：ホバー状態はペリウィンクルの色合いで、控えめで明確なインタラクションを演出しましょう。

media.ioで生成されたインディゴエクリュスタジオの画像例

16）ベビーブルーショートブレッド

HEX: #2B4C7E #86BBD8 #DFF3FF #F0D9B5 #FFF5E6

雰囲気: 甘く、軽やか、ノスタルジック

おすすめ用途: ベビーシャワー招待状

甘くて軽い、ショートブレッドやパウダーシュガーのような懐かしい柔らかさ。ベビーブルーは装飾的な枠線やアイコンに使い、コピーは温かいクリームに配置して親しみやすく読みやすく。シンプルなフローラル落書きや丸みのある書体とも好相性。ヒント：一番濃いブルーは名前や日付に使い、招待状の印刷をくっきりと。

media.ioで生成されたベビーブルーショートブレッドの画像例

17）スチールブルーアーモンド

HEX: #0F2A3F #4A6FA5 #B6D0E2 #E8DCC8 #FCF7F1

雰囲気: バランス、成熟、静かなエレガンス

おすすめ用途: 不動産パンフレット

バランスが取れ静かなエレガンス、スチールブルーキャビネットとアーモンドペイント壁の組み合わせのよう。セクション見出しや地図のハイライトにスチールトーン、リスティングにはアーモンドとオフホワイトで目に優しく。ニュートラルな写真や細い線のアイコンとも好相性。ヒント：主要な数値は濃いブルーに、小さい文字には淡色を避けましょう。

media.ioで生成されたスチールブルーアーモンドの画像例

18）セルリアンバタークリーム

HEX: #0B3D91 #2A7FB8 #BDE7FF #F2D6A2 #FFF2DF

雰囲気: 明るい、陽気、夏らしい

おすすめ用途: ヨーグルトパッケージデザイン

明るく陽気、バタークリームデザートにかかるセルリアンの空のよう。セルリアンとアクアがフレッシュさを、バタークリームが食欲と柔らかさを添えます。フルーツイラストや太字の栄養成分バッジとも好相性。ヒント：クリームをラベルのベースに使用し、商品情報を見やすく。

media.ioで生成されたセルリアンバタークリームの画像例

19）ミッドナイトブルーマジパン

HEX: #0A0F2C #1B2A6B #6EA8FE #E6CBA8 #FFF1E2

雰囲気: ラグジュアリー、ドラマティック、ロマンティック

おすすめ用途: ファインジュエリー製品広告

ラグジュアリーでドラマチック、ミッドナイトベルベットと焼きマジパンが隣り合うようなデザイン。一番濃いブルーをハイコントラストな見出しに、温かいクリームで商品説明や価格帯を枠取り。エレガントなセリフ体やミニマルなラインとも好相性。ヒント：アクセントブルーは小さなグローやハイライトに使い、全体の高級感を損なわないように。

media.ioで生成されたミッドナイトブルーマジパンの画像例

20）シーグラスクリーム

HEX: #10375C #1E81B0 #B4E1FA #F1E0C5 #FFFBF4

雰囲気: 軽やか、コースタル、癒し

おすすめ用途: ウェルネスアプリオンボーディングスクリーン

軽やかでリフレッシュ、クリーム色の浜辺に散らばるシーグラスのよう。明るいオーシャンブルーは進捗アイコンやキーアクションに使い、画面の多くをオフホワイトにして穏やかな第一印象を。ソフトなグラデーションやラウンドカードとも自然になじみます。ヒント：小さなラベルやサブボタンにはディープブルーを使い、アクセシビリティを確保しましょう。

media.ioで生成されたシーグラスクリームの画像例

21）ロイヤルブルークロテッドクリーム

HEX: #081A3D #1F5AA6 #8BB8FF #EAD2A8 #FFF6E5

雰囲気: 自信、クラシック、プレミアム

おすすめ用途: プレミアムウェビナーランディングページ

自信と高級感、クロテッドクリームの紙にロイヤルブルーのインクで書かれたような印象。このブルークリームの配色は明確な階層を持たせられます：ヒーロー見出しやナビゲーションには濃色を、長いページにはクリームブロックで親しみやすく。控えめなグラデーションや統一感あるアクセントアイコンと組み合わせて。ヒント：フォームはクリームにディープブルーの枠線で配置し、クリアで信頼感のある印象に。

media.ioで生成されたロイヤルブルークロテッドクリームの画像例

22）クラウディブルークレープ

HEX: #203A43 #4F8A8B #CDE8F6 #F3D9B1 #FFF7EC

雰囲気: 優しい、クラフト感、安心感

おすすめ用途: カフェフライヤーデザイン

優しくクラフト感のある、朝の曇り空と温かいクレープがテーブルに並ぶ風景。背景にはクリームを使い、見出しやシンプルなイラストアクセントにくすんだブルーを使いましょう。手描き文字や小さなメニューブロックとも好相性。ヒント：一番濃い色はイベントの詳細に使い、テクスチャーのある紙でも印刷鮮やかに。

media.ioで生成されたクラウディブルークレープの画像例

ブルークリームと相性のよい色は？

ブルーとクリームはサンド、トープ、キャメル、明るい木調など温かいニュートラル色と自然に調和します。これらを背景やボーダー、素材に加えれば配色がまとまり、奥行きが生まれます。

コントラストを高めたいときは、控えめなダークニュートラル（チャコール、ディープスレート、エスプレッソなど）を加えると伝わりやすさが向上します。特に本文や小さなUIラベルは淡いブルーだと視認性が下がるため要注意です。

より遊び心のある演出にしたいときは、コーラル、テラコッタ、くすんだマスタードやセージなどを少量アクセントに。アイコンやバッジ、ハイライトなどに控えめに使うことで全体の軽やかさを保てます。

ブルークリーム配色パレットを実際のデザインで使う方法

レイアウトを明るく高級感を出したいなら、クリームを主なベース面（60〜80%）に設定し、最も濃いブルーをナビゲーション、見出し、主要ボタンなど重要な階層要素に割り当てましょう。

中間色や明るいブルーはセクションの背景、カード、区切り線、データビジュアライゼーションなど構成要素に用います。これにより重いシャドウや強い黒線を使わず奥行きを演出できます。

印刷の場合は、クリーム色を使用する用紙や仕上げでテストしてください。暖かみのあるクリーム色は照明条件によって色味が変わることがあるため、重要なテキストは濃い青で配置し、鮮明な読みやすさを確保しましょう。

AIでブルークリームパレットのビジュアルを作成する

ランディングページ、パッケージラベル、ソーシャル広告のプロトタイピングでは、素早くパレットベースのモックアップを作成することで、本制作前にコントラストや雰囲気を検証できます。

Media.ioのテキストから画像作成ツールを使えば、（上記のような）プロンプトを貼り付け、レイアウトスタイルやアスペクト比を指定しながら、さまざまな青とクリームのバランスを素早く試すことができます。

次： ホワイトグリーンブルーカラーパレット