Blue & Cyan Color Palette Ideas: 20 Combinations with Hex Codes

ブルー＋シアンは、高い明度を持つ近代的でフレッシュ、テクノロジーに親しみやすい印象を与えるカラーファミリーです。ベースの濃さやアクセントのシアンの明るさによって、氷のように未来的でクールにも、落ち着いて臨床的にも、またはエレクトリックでナイトライフな印象にもなります。

下記は厳選された青・シアンのカラーバリエーションとHEXコード、さらにUI、ブランディング、ポスターなどのビジュアル生成に使えるAIプロンプトの例を紹介します。

なぜ青・シアンの色合わせがこれほど効果的なのか

ブルーは安定性と信頼性を、シアンはスピード、明瞭さ、革新性を伝えます。両方を組み合わせることで、「クリーンシグナル」のような見やすいビジュアルになり、とくにUIやデータ重視の画面で読みやすさが高まります。

ブルー・シアンの範囲は海から空、深みから明るさまで滑らかなグラデーションが作れるので、余分な色味を足さずに奥行きを演出できます。これはボタン、ヒーローバックグラウンド、オーバーレイ、ハイライトに便利です。

同色系でも濃紺からほのかなアイスカラーまで選べるため、構造にはダーク、中間色はパーツに、明るいシアンは強調したいアクションに――と、明確な階層が作れます。

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

1) 北極グロー

HEX： #0b1026 #0b5fff #00c2ff #a7f3ff #f5fbff

雰囲気： クリスプ、未来的、発光感

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

日差しを受けた氷のようにクリアで明るいブルー・シアンのトーンは、清潔感、スピード感、モダンさを印象付けます。濃いネイビーでグラフやナビゲーションをまとめ、明るいシアンでハイライトやアクティブ状態を目立たせましょう。白スペースと淡いグレーの仕切りでインターフェースを読みやすく保つのもポイント。Tip：最も明るいシアンは主要アクションだけに使い、階層をはっきりさせましょう。

media.ioで生成した北極グローの画像例

Media.io

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

今すぐ無料で試す

2) ラグーンスプリント

HEX： #003b73 #0077b6 #00b4d8 #90e0ef #caf0f8

雰囲気： スポーティー、リフレッシュ、明るい

おすすめ用途： フィットネスアプリのオンボーディング

元気ではじける印象のこの組み合わせは、朝の水泳やクリアな集中力を思わせます。中間のブルーをヘッダーや進捗バーに、明るいシアンをボタンやバッジに使いましょう。チャコールのテキストやシンプルなアイコンとも相性良好。Tip：#0077b6 と #00b4d8のグラデーションをさりげなく使い、動きを与えても視覚ノイズにならないように。

media.ioで生成したラグーンスプリントの画像例

3) ネオンハーバー

HEX： #001f3f #0050ff #00e5ff #2dffb9 #eaffff

雰囲気： エレクトリック、ナイトライフ、ハイコントラスト

おすすめ用途： ゲーミング配信オーバーレイ

濡れた路面に映るネオンのようにエレクトリックで夜らしい配色は、コントラストの強い明快さが特徴です。暗いベースでオーバーレイの情報を見やすく、明るいアクセントでアラートなどの即時効果を演出。太めのサンセリフ書体や幾何学フレームと組み合わせ、ネオンサイン感を強調しましょう。Tip：#00e5ffはコールアウトに、#2dffb9は勝利や寄付など小さな場面に。

media.ioで生成したネオンハーバーの画像例

4) グレイシャーミスト

HEX： #102a43 #1c7ed6 #22b8cf #c5f6fa #f1f5f9

雰囲気： 落ち着き、臨床的、安心感

おすすめ用途： 医療パンフレット

落ち着いて信頼感を得るブルー・シアンのトーンで、冷たい空気や清潔なガラスのイメージ。柔らかなシアンと淡いアイスカラーは、信頼・明快さが求められる医療レイアウトに最適です。ニュートラルグレーや余白をたっぷりとって情報過多を回避。Tip：本文テキストは濃いスレートで、#22b8cfはセクション見出しや図解に。

media.ioで生成したグレイシャーミストの画像例

5) プールサイド・ミニマル

HEX： #072ac8 #1e96fc #00d4ff #b9fbc0 #ffffff

雰囲気： 晴れやか、ミニマル、遊び心

おすすめ用途： プロダクトランディングページ

明るいタイルのようにミニマルで親しみやすいブルー・シアン。ロイヤルブルーで見出し、スカイシアンでボタン、ミントで小さなアクセント。ブラックや濃紺テキストとあわせればCVページもくっきり。Tip：イメージはシンプルにして、強調したいボタンの色を一つに絞るのがおすすめです。

media.ioで生成したプールサイド・ミニマルの画像例

6) テックアクア

HEX： #0a2540 #1463ff #00a3ff #00f5d4 #e9ecef

雰囲気： 自信、テクニカル、洗練

おすすめ用途： フィンテックブランドキット

洗練されてテクニカルな印象のブルー・シアンは、暗いターミナル上で発光するデータのイメージ。ネイビーは権威、シアンやアクアはスピード・革新性を表現。グリッドや細いラインアイコン、ニュートラルグレーで全体を引き締めましょう。Tip：アクアグリーンは小さなハイライトだけに使い、高級感を損なわないのがポイントです。

media.ioで生成したテックアクアの画像例

7) ディープカレント

HEX： #041c32 #064663 #00a6fb #00f5ff #c4f1ff

雰囲気： ムーディ、シネマティック、深海

おすすめ用途： ドキュメンタリーポスター

深海ダイブのようにムードがあり、沈み込まずにドラマティックな印象を持つ組み合わせ。タイトルや地図、暗い背景でのグロー感のあるハイライトに最適。凝縮フォントやサブトルなグレインでフィルム調仕上げにも。Tip：#00f5ffはタイトルや注目のデータ一箇所に絞ると、スポットライトのように目立たせられます。

media.ioで生成したディープカレントの画像例

8) コースタルブリーズ

HEX： #114b5f #028090 #00a6a6 #b5ffe1 #f3fffb

雰囲気： リラックス、スパライク、そよ風のよう

おすすめ用途： スパブランディング

穏やかで空気のようなブルー・シアンは、静かな海岸線や深呼吸するような癒やし感。ティール寄りのシアンで自然な落ち着きを演出し、ウェルネス系ブランドやパッケージにおすすめ。柔らかいクリーム色や優しい写真、細身のセリフ体見出しと合わせれば上品にまとまります。Tip：ロゴには#114b5fでアクセント、他は軽やかにまとめましょう。

media.ioで生成したコースタルブリーズの画像例

9) オーロラサーキット

HEX： #0b1320 #1b3bff #00bbf9 #00f5d4 #e0fbff

雰囲気： 大胆、エレクトリック、テック感あふれる

おすすめ用途： カンファレンスイベントポスター

大胆かつエレクトリックなこのブルーシアンのカラーパレットは、真夜中の空を横切るオーロラを思わせます。鮮やかなブルーは見出しカラーとして強い印象を与え、シアンやアクアは形やグラデーションに動きをもたらします。幾何学模様と厳格な配置を組み合わせることで、現代的なテック感が演出されます。コツ：背景は暗く保ち、#00bbf9が重要な日付やアクションを際立たせます。

media.ioで生成されたオーロラサーキットの画像例

10）アイスポップキャンディ

HEX： #004e92 #00a8e8 #72ddf7 #bde0fe #f7fbff

雰囲気：甘くて、明るく、親しみやすい

おすすめ用途：子供向け学習アプリUI

冷たいおやつのように甘くて軽いこのブルーは、親しみやすく感じられます。柔らかい色合いはコントラストを和らげ、教育画面や楽しいイラストにも最適です。丸みのあるタイポグラフィとシンプルなアイコンを組み合わせ、ニュートラルな白を加えることで全体が軽やかになります。コツ：最も暗いブルーはラベルのみに使い、インターフェースを明るく保ちましょう。

media.ioで生成されたアイスポップキャンディの画像例

11）レイニーメトロ

HEX： #0f172a #334155 #0ea5e9 #22d3ee #e2e8f0

雰囲気：都会的で、洗練され、控えめ

おすすめ用途：編集インフォグラフィック

雨上がりの都市のような洗練と都会感を持つこのセットは、真面目さと鮮明なハイライトをバランスよく配しています。スレートトーンは長文の読みやすさを支え、明るいシアンはデータポイントや強調を素早く見分けるのに役立ちます。細いライン、クリアな間隔、控えめなアイコンスタイルを組み合わせるのがおすすめです。コツ：#22d3eeを1つのデータシリーズに使い、チャートの凡例をすぐに読めるようにしましょう。

media.ioで生成されたレイニーメトロの画像例

12）スカイウェーブグラデーション

HEX： #001d3d #003566 #00b4d8 #48cae4 #ade8f4

雰囲気：開放的、前向き、空気感

おすすめ用途：旅行フライヤー

開放的で前向きなブルーシアンは、海の上に澄んだ空へと上昇する感覚を呼び起こします。構造にはダークブルーを、グラデーションや特徴的な枠には明るいシアンを使いましょう。明るい白や控えめな写真を組み合わせることでレイアウトが軽快になります。コツ：ヘッドラインの後ろに #003566 から #48cae4 への縦方向グラデーションをつけると、瞬時に奥行きを出せます。

media.ioで生成されたスカイウェーブグラデーションの画像例

13）リーフダイブ

HEX： #002855 #0353a4 #00a6fb #00d9ff #b9f2ff

雰囲気：冒険的、明るく、アクアティック

おすすめ用途：スキューバツアー広告

冒険的で明るいこの組み合わせは、リーフの水中で揺らめく日差しを連想させます。重なり合うブルーは見出しやフレームに深みを与え、鮮烈なシアンは価格タグやバッジを輝かせます。シャープで高コントラストな写真とミニマルなコピーを合わせ、インパクトある広告にしましょう。コツ：#00d9ffを予約強調に使い、視認性は高いまま派手になりすぎないように。

media.ioで生成されたリーフダイブの画像例

14）ウィンタープール

HEX： #0b132b #1c2541 #3a506b #5bc0be #d8f3ff

雰囲気：クール、静寂、洗練

おすすめ用途：ミニマリストインテリアムードボード

クールで静かなこれらの色は、静かな冬のプールやマットな石の表面を連想します。ブルーシアンのパレットは、明るいエネルギーではなく落ち着いた洗練さを求めるムードボードに最適です。淡い木材の質感やブロンズメタル、温かみのある白い照明を合わせて空間を心地よく保つことができます。コツ：#5bc0beは、陶器やテキスタイルなどの小さなアクセントだけに使いましょう。

media.ioで生成されたウィンタープールの画像例

15）クラウドグラス

HEX： #111827 #2563eb #06b6d4 #a5f3fc #f8fafc

雰囲気：クリーン、モダン、透明感

おすすめ用途：UIアイコンセット

クリーンかつガラスのような透明感、このセットは現代インターフェースを通る光のような印象を与えます。鮮やかなブルーは輪郭をくっきりと定義し、柔らかなシアンはアイコンの塗りを空気感と現代感に保ちます。一定のストローク幅と少しだけ角の丸みをつけ、統一感を出しましょう。コツ：16pxでテストし、アウトラインには #111827 を使うことで視認性を保ちます。

media.ioで生成されたクラウドグラスの画像例

16）エレクトリックタイダル

HEX： #03045e #0077b6 #00b4d8 #00f5ff #caf0f8

雰囲気：エネルギッシュ、大胆、動き感

おすすめ用途：音楽フェスティバルポスター

エネルギッシュで動きがあり、ブルーシアンは波に映るストロボライトのような印象です。深いブルーは劇的な舞台を作り、シアンのレンジはグラデーションやアウトライン、大きなタイポグラフィブロックに使えます。インパクトあるレイアウトと最小限の色に絞り、ポスターのインパクトを保ちましょう。コツ：#00f5ff をラインナップセクションに使うと遠くからでも速く読めます。

media.ioで生成されたエレクトリックタイダルの画像例

17）ブループリントアクア

HEX： #0a1f44 #00509d #00a6fb #00c2ff #f0f9ff

雰囲気：構造的、精密、プロフェッショナル

おすすめ用途：建築プレゼンテーション

構造的で精密なブルーシアンの組み合わせは、実現された設計図のような印象です。濃いブルーはグリッドラインやタイトルに最適、明るいシアンは強調や寸法、特徴の説明に使えます。細い線と十分な余白でスタジオのような清潔感を出しましょう。コツ：最も明るいアクセントはアノテーションの1層に限定し、図面が落ち着いた印象になるように

media.ioで生成されたブループリントアクアの画像例

18）アクアデニム

HEX： #0b3954 #087e8b #00b2ca #b7e4c7 #f4f9ff

雰囲気：カジュアル、コースタル、現代的

おすすめ用途：EC商品パッケージ

洗濯されたデニムのようにカジュアルで現代的なトーンは、海岸を感じさせモダンかつ親しみやすい印象です。ブルーシアンの組み合わせは、清潔感・鮮度・信頼感が商品グリッドで必要なパッケージに適しています。マットな質感やシンプルな線画、控えめなアクセントグリーンでエコ感を加えましょう。コツ：#0b3954は商品名に使いコントラストを、#00b2caはシールや機能アイテムに限定し目立たせます。

media.ioで生成されたアクアデニムの画像例

19）ミンテッドシアン

HEX： #012a4a #013a63 #00b4d8 #80ffdb #f1fffe

雰囲気：フレッシュ、ボタニカル、ライト

おすすめ用途：植物イラストセット

フレッシュでボタニカルなブルーとシアンのミックスは、ミントの葉が海風で冷やされたような印象です。濃いブルーは輪郭や影に、シアンとミントはハイライトに使用します。柔らかな紙の質感や繊細な水彩のぼかしを合わせてナチュラルかつ空気感のある仕上げに。コツ：ミントはハイライトのみに使い、イラストがバランスよくパステルになりすぎないようにします。

media.ioで生成されたミンテッドシアンの画像例

20）ミッドナイトラグーン

HEX： #03071e #001f54 #00509d #00a6fb #00f5ff

雰囲気：ドラマチック、映画的、洗練

おすすめ用途：映画タイトルカード

ドラマチックで洗練されていて、ブルーシアンの組み合わせは夜のラグーンに輝く光の表面を連想させます。ほぼ黒のベースは瞬時にコントラストを生み出し、明るいシアンはタイトルに鋭い焦点を与えます。ミニマルなタイポグラフィと控えめなグロー効果を使い、映画的で派手にはしません。コツ：#001f54 と #00509d の間に薄いグラデーションを加えると、文字の後ろに奥行きを出せます。

media.ioで生成されたミッドナイトラグーンの画像例

ブルー・シアンと相性の良い色は？

ニュートラルカラーは最も合わせやすく、白、オフホワイト、クールグレー、チャコールはブルーシアンパレットを読みやすくプロフェッショナルに保ちます。また、明るいシアンがレイアウトを圧倒しないようにする役割も果たします。

コントラストをつけたい場合は、暖色系の補色（コーラル、オレンジ、ソフトピーチ）を少量加えると良いでしょう。特にアラートや価格タグ、目立つCTAにおすすめ。メタリック（シルバー、クローム）も洗練されたテック感を引き立てます。

自然な雰囲気を出したい場合は、くすんだグリーン（セージ、ミント）とティール寄りのシアンを組み合わせましょう。彩度は抑え、パレットが統一感を保ち“虹色”にならないようにします。

実際のデザインでブルー・シアンの組み合わせを使う方法

まずダークな軸色（ネイビー/スレート）をヘッダーやナビ、ポスター背景に使い、明るいシアンをアクセントカラーとして割り当てます。これで階層が明確になり、「全部クリックできそう」なUIを避けられます。

明るいシアンやアイスタイントはパネル、カード、控えめな背景に使用、特にダッシュボードやオンボーディング画面に。グラデーションは近い色味（深いブルー→シアン）間で移動させるのが最適で、カラーホイールを飛び越えないように。

印刷物（フライヤー、パンフレット、パッケージ）では実際の照明と紙質で色の変化をテストしましょう。画面で鮮明なシアンも、印刷では期待以上に明るく出る場合があるため、最も鮮やかな色はハイライトのみに使うのがポイントです。

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

既にHEXコードがある場合、レイアウト（UI、ポスター、ブランドキット）を説明し、パレットカラーをプロンプトで明記することで、モックアップを素早く一貫して作成できます。これでAIが同じ「ブルーシアンのエネルギー」を全アセットに保てます。

よりクリーンな結果が欲しい場合は、スタイル（フラットベクター、編集、映画的）を指定し、背景をシンプルに、各色をどこに使うか（背景、主アクセント、小ハイライト）明示します。その後、コントラストや彩度など変数を1つずつ調整しながらプロンプトを繰り返しましょう。

次へ： フェアリーテイルカラーパレット