モダンなコバルトカラースキーム20選｜配色見本＆HEXコード

コバルトは、大胆でクリアなブルーであり、自信、品質、そして集中を瞬時に示す色です。デジタルUIで際立ち、印刷でも鮮やかさを保ち、暖かみのあるアクセントや落ち着いたニュートラルカラーとも美しく調和します。

以下は、HEXコード付きのデザイナー向けコバルトカラーパレットアイデア20選と、数秒でビジュアルを生成できる実用的なヒントやAIプロンプトです。

コバルトパレットが魅力的に機能する理由

コバルトは彩度の「スイートスポット」に位置しています：十分に力強くプレミアムで意図的な印象を与えつつ、スクリーンや印刷でも読みやすさを保てるクリーンさも備えています。ブランドシステムやUIテーマの定番のアンカーカラーとなる理由です。

コントラストとの相性も抜群です。コバルトは、ほぼ黒に近い色やクールグレーと組み合わせれば現代的でテック感ある印象に、金色や銅色、コーラル、アンバーなど暖色を加えれば、洗練さを損なわず温かみやエネルギーをプラスできます。

コバルトは自然に目を引くため、階層構造にも適しています。メインとして使えばブランドを定義でき、アクセントに使えばボタンやリンク、重要なデータなどを見る人の行動を促すことも可能です。

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

1）コースタル・コバルト

HEX： #0047AB #2F80ED #A7D8FF #F2F7FF #FFB703

雰囲気： 明るい、爽やか、楽観的

最適な用途： 旅行ブランドや夏のSNS投稿

太陽の光が差し込む水面と深いブルーの水平線のように明るく爽やかなトーンは、即座に気分を高めてくれます。ゴールドのアクセントはCTAに、明るいブルーは広い背景に使用しましょう。クリーンなサンセリフ体とたっぷりの余白で軽やかさを演出。アドバイス：最も濃いブルーはロゴや見出しに用いてレイアウトを際立たせましょう。

media.ioによるコースタル・コバルトの画像例

Media.io

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

今すぐ無料で試す

2）アーバン・ナイトフォール

HEX： #001B3A #003B8E #2D2A32 #8D99AE #EDF2F4

雰囲気： ムーディー、洗練、都会的

最適な用途： テック系ランディングページやアプリダッシュボード

ムーディーで都会的な雰囲気は、クールな看板やスチールの反射に照らされる深夜の街並みを思い起こさせます。ほぼ黒やネイビーはヘッダーやナビゲーションに、スレートやオフホワイトは可読性維持に。明るめのブルーはアクティブ状態や主なボタンに最適です。アドバイス：小さなUIテキストやアイコンもしっかりコントラストをチェックして、暗色でもアクセスしやすいデザインに。

media.ioによるアーバン・ナイトフォールの画像例

3）ポーセリン＆コバルト

HEX： #0047AB #0B1320 #F7F3EE #D9C7B8 #C1121F

雰囲気： クラシック、洗練、職人技

最適な用途： 雑貨や陶器のパッケージ

クラシックで洗練された雰囲気は、手描きの磁器に朱色のワンポイントが効いています。コバルトのパレットは、クリーム色の背景や暖かいベージュと合わせることで、ブルーの強さを和らげつつ高級ラベルに最適です。赤はシールや小さなタイポグラフィに少量だけ使用しましょう。アドバイス：ディープブルーがインクのような質感を出すよう、マット紙を使うのがおすすめです。

media.ioによるポーセリン＆コバルトの画像例

4）シトラス・スパーク

HEX： #0047AB #00A6FB #FFE66D #FF7A00 #F7FFF7

雰囲気： ポップ、エネルギッシュ、パンチの効いた

最適な用途： イベントポスターや若者向けマーケティング

ポップでエネルギッシュ、まるで青空とシトラスピールの弾けるような爽快感。コバルトや明るいシアンは大胆な形やグラデーションに、イエローやオレンジは小さくても力強いアクセントで使いましょう。クリーンな白やごく淡い背景に合わせるとベストです。アドバイス：タイポグラフィはシンプルかつ太めにして、強い色にも負けない存在感を。

media.ioによるシトラス・スパークの画像例

5）セージ・ブループリント

HEX： #0047AB #335C67 #9FC490 #E0EEC6 #F6F7EB

雰囲気： 穏やか、落ち着き、フレッシュ

最適な用途： ウェルネス系サイトやエコブランド

穏やかで落ち着いた印象は、ボタニカルな雰囲気にブループリントのきっちり感が加わったイメージ。ディープブルーでヘッダーや重要なアイコンに構造感を出し、セージや淡いグリーンが全体を柔らかにまとめます。信頼感と親しみやすさを両立したいブランドに最適。アドバイス：一番明るい色はパーツの余白やカードなどに使い、呼吸感あるページに。

media.ioによるセージ・ブループリントの画像例

6）ベルベット・プラム・スタジオ

HEX： #0047AB #4A235A #7D3C98 #F4D03F #FDF2E9

雰囲気： ドラマチック、ラグジュアリー、クリエイティブ

最適な用途： ビューティーキャンペーンやエディトリアル表紙

ドラマチックでラグジュアリー、まるで舞台のヴェルヴェットのような存在感。コバルトとプラムが主役で、クリーム色が肌や文字を邪魔せず馴染みます。ゴールドイエローはバッジや商品メリットのちょっとしたハイライトに最適。アドバイス：3色の強い色は同等の比率で使わず、主役1色＋アクセント1色に絞るのがポイントです。

media.ioによるベルベット・プラム・スタジオの画像例

7）コンクリート＆クローム

HEX： #0B1320 #0047AB #3D5A80 #98C1D9 #E0FBFC

雰囲気： インダストリアル、シャープ、モダン

最適な用途： プロダクトUIやSaaSブランディング

インダストリアルでシャープ、磨かれた金属とクールなコンクリートがイメージに浮かびます。ほぼ黒やディープブルーは自信ある階層づけに、明るいブルーはパネルやテーブル、繊細な仕切り用に。幾何学的アイコンや細いラインと合わせてテック感アップ。アドバイス：一番淡い色は背景用途にし、データビジュアライズもクリアかつ落ち着いた印象に。

media.ioによるコンクリート＆クロームの画像例

8）サンドストーン・ブルー

HEX： #0047AB #2A9D8F #E9C46A #F4A261 #FAF3E0

雰囲気： 太陽を受けた、リラックス、海岸風

最適な用途： レストランのメニューやライフスタイル・ブランディング

日差しを感じさせるリラックスしたパレットは、海の青にサンドストーンやテラコッタを組み合わせたようなイメージ。クリーム色をベースに、コバルトで見出し、ティールでサポート部分やアイコンを。イエローやオレンジの暖色は価格やボタン、セクションタグのハイライトに最適です。アドバイス：全体を地中海風にしたいならコバルトは部分使いすると効果的。

media.ioによるサンドストーン・ブルーの画像例

9）ネオン・アーケード・ブルー

HEX： #0047AB #3A86FF #8338EC #FF006E #0B0F1A

雰囲気： 大胆、未来的、ナイトライフ

最適な用途： 音楽プロモーションや配信者グラフィック

大胆かつフューチャリスティックなこのパレットは、アーケードのまばゆい光やクラブ照明、深い真夜中のベース色をイメージ。暗色が背景の基調を担い、コバルトやエレクトリックブルーは大胆な図形や文字に。マゼンタやバイオレットは小さなアイコン・バッジやグラデーションでアクセント使いを。アドバイス：余白をしっかりとり、ネオンの映える瞬間が意図的に際立つようにしましょう。

media.ioで生成されたネオンアーケードブルーの画像例

10) ウィンターインク

HEX： #002D62 #0047AB #6C757D #E9ECEF #FFFFFF

雰囲気： クリーン、プロフェッショナル、クール

最適な用途： 企業向けレポート・プレゼンテーション

クリーンでプロフェッショナル、まるで新雪の上に鋭いインクの線が描かれたような印象です。2色のブルーを見出しやグラフ、重要なポイントに使い、グレーやオフホワイトで静かで読みやすいページを作ります。この組み合わせは重さを感じさせず権威が必要な文書に最適です。ヒント: コバルトはデータのハイライトだけに使うとグラフが見やすくなります。

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

11) ボタニカルコバルト

HEX： #0047AB #1B4332 #2D6A4F #B7E4C7 #F1FAEE

雰囲気： フレッシュ、ナチュラル、自信

最適な用途： スキンケアパッケージ・エコラベル

フレッシュでナチュラル、深い青いガラスと青々とした葉、柔らかな朝の光を感じさせます。コバルトをアクセントに、グリーンを主役にするとエコ志向の商品に最適です。リサイクル紙やシンプルなボタニカル線画など触感のある素材と合わせて使いましょう。ヒント: 最も濃いトーンはインク量を少し減らして、非コート紙でにじみを防ぎましょう。

media.ioで生成されたボタニカルコバルトの画像例

12) カッパーワークショップ

HEX： #0047AB #B87333 #D4A373 #FEFAE0 #283618

雰囲気： 手作り感、暖かみ、伝統

最適な用途： ハンドクラフト商品広告・職人ブランド

手作り感と暖かみがあり、銅の道具や古い紙、そしてしっかりとしたブルースタンプを連想させます。クリーム色をベースに、コバルトでブランドマークや見出しにシャープなコントラストをつけましょう。カッパーやタンの色が美しい縁取り・バッジ・パッケージ装飾になります。ヒント: ダークグリーンは小さな文字やサブラベルに使い、ブルーと競合しないよう控えめに。

media.ioで生成されたカッパーワークショップの画像例

13) ローズクォーツブルー

HEX： #0047AB #F4ACB7 #FFCAD4 #FFF1E6 #5A189A

雰囲気： ソフト、ロマンチック、モダン

最適な用途： 結婚式招待状・ビューティーソーシャル

ソフトでロマンチック、ほんのり色づいた花びらが自信あるシャープなブルーと共演する雰囲気です。淡いクリームとピンクは背景に使い、コバルトで名前やモノグラム、重要なディテールを強調します。バイオレットは控えめな影や小さな装飾に最適です。ヒント: ロマンスにはエレガントなセリフ、補足情報にはクリーンなサンセリフがおすすめです。

media.ioで生成されたローズクォーツブルーの画像例

14) ミニマルコバルトモノ

HEX： #0B1320 #1C2541 #0047AB #5BC0BE #F5F5F5

雰囲気： ミニマル、シャープ、自信

最適な用途： ポートフォリオサイト・ケーススタディ

ミニマルでシャープ、ダークインク、クールなティールのハイライト、クリーンなギャラリーウォールのような印象です。ブラックや深いネイビーをタイポグラフィに使い、リンクやUIの重要箇所にコバルトを使いましょう。ティールはタグやアイコン、ホバーに控えめに使うことでモダンな印象に。ヒント: 決まったスペーシングルールでダークトーンをプレミアムに演出しましょう。

media.ioで生成されたミニマルコバルトモノの画像例

15) オーシャングラス

HEX： #0047AB #0077B6 #00B4D8 #90E0EF #CAF0F8

雰囲気： クール、爽やか、エアリー

最適な用途： SaaSオンボーディング・フィンテックUI

クールで爽やか、重なる水やガラスの反射光のようなイメージです。2つの深いブルーで構造やナビゲーションを支え、淡いアクアでカードやモーダル、空の状態を柔らかくします。特にオンボーディング画面でクリアで落ち着いた印象を与えます。ヒント: ミッドブルー間にさりげないグラデーションを入れて、色数を増やさず奥行きを。

media.ioで生成されたオーシャングラスの画像例

16) ハーベストコントラスト

HEX： #0047AB #6D4C41 #DDA15E #F6BD60 #FAF3DD

雰囲気： ほっこり、アーシー、親しみやすい

最適な用途： カフェブランディング・シーズンプロモーション

ほっこりアーシーで、まるで暖かなベーカリーの中に鮮やかな青い看板があるような印象です。クリームやキャラメルはフレンドリーな背景に、コバルトはロゴや見出しのモダンなアクセントに。ブラウンは仕切りやスタンプ、小さなテキスト要素で使って安定感を加えます。ヒント: ブルーはインパクトのある場面だけに抑え、冷たくならないように。

media.ioで生成されたハーベストコントラストの画像例

17) フィルムノワールアクセント

HEX： #111111 #0047AB #3A3A3A #BDBDBD #F5F5F5

雰囲気： 映画的、大胆、高コントラスト

最適な用途： ラグジュアリー広告・モノクロポスター

映画的で高コントラスト、ノワールポスター風の雰囲気にエレクトリックな青が差し込む印象です。コバルトの組み合わせはスポットライトのように一点だけ使うと効果的。グレーは構成、オフホワイトは読みやすさと洗練を保ちます。ヒント: ドロップシャドウは避け、硬いエッジでポスター風のシャープさを維持しましょう。

media.ioで生成されたフィルムノワールアクセントの画像例

18) ラベンダーブループリント

HEX： #0047AB #6C63FF #B8B8FF #F8F7FF #FFD6A5

雰囲気： ドリーミー、創造的、親しみやすい

最適な用途： クリエイティブエージェンシー・スタートアップピッチ資料

ドリーミーで創造的、スケッチブックのアイデアを柔らかいバイオレットインクで彩ったような雰囲気です。コバルトは構造に、ラベンダーは親しみやすいセクションや背景ブロックに使います。ピーチ色は統計データやバッジ、スライド番号のハイライトに最適。ヒント: 一枚ごとに大きなカラーブロックを使うと、プレゼン全体がまとまって見えます。

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

19) レトロアスレチック

HEX： #0047AB #E63946 #F1FAEE #A8DADC #1D3557

雰囲気： スポーティ、レトロ、活気

最適な用途： チームグッズ・SNS用グラフィック

スポーティで活気があり、ビンテージジャージーやサイドラインバナーを思い出させます。ダークネイビーとコバルトをベースに、レッドでコールアウトやナンバーを強調。ミントトーンはフレッシュさとバランスを保ちます。ヒント: 最も淡い色でテキストにアウトラインをつけると、鮮やかな背景でも視認性アップ。

media.ioで生成されたレトロアスレチックの画像例

20) デザートダスク

HEX： #0047AB #264653 #E76F51 #F4A261 #E9C46A

雰囲気： 冒険的、暖かみ、モダン

最適な用途： アウトドアブランド・キャンペーン広告

冒険的で暖かみがあり、深い青空が砂漠の夕焼け色に変化する様子を連想させます。コバルトとティールはブランドの軸、コーラルやオーカーは元気なハイライトに。クリーンなレイアウトで太い見出しやバッジ、装飾イラストに最適です。ヒント: コーラルは最も重要なアクションのみに使い、存在感を際立たせましょう。

media.ioで生成されたデザートダスクの画像例

コバルトと相性の良い色は？

ニュートラルカラーは最も合わせやすいです：オフホワイト、クールグレー、ほぼ黒はコバルトをよりシャープにモダンに感じさせます。これらの組み合わせは、UIやエディトリアル、ブランドシステムで階層構造を明確にしたい際に理想的です。

暖色系のアクセント（ゴールド、アンバー、カッパー、コーラル、オレンジ）はエネルギーをプラスし、コバルトをより人間的で親しみやすい印象にします。暖色は小さな強調（CTAやバッジ、値札など）に使い、コバルトが主役になるようにしましょう。

自然を感じさせるグリーン（セージ、パイン、ユーカリ）はコバルトの強さを和らげ、フレッシュさや信頼感を伝えるのに効果的です。特にウェルネス、エコパッケージ、ライフスタイルブランドにおすすめです。

コバルトカラーパレットの実際のデザインでの使い方

まず役割を割り当てましょう：1色のコバルトを主役（ブランドマーク、重要UI）、背景にはニュートラル、強調にはアクセントを選びます。これでコバルトが多すぎて騒がしい・重いデザインを防げます。

UIでは特に先にコントラストを確認しましょう――小さなテキストやアイコン、無効化ステートには特に重要です。コバルトは広い余白とクリアなタイポグラフィと組み合わせると「プレミアム」に見えます。

印刷では用紙の選択が重要です。ノンコート紙はブルーを淡く見せる一方、コート紙はツヤ感を出します。リッチなコバルトにするには校正刷りでインク量を調整し、滲みを防ぎましょう。

AIでコバルトパレットのビジュアルを作成する

HEXコードがすでにあれば、レイアウトを記述してカラーパレット名を明示することで、対応するモックアップやポスター、パッケージ、UIスクリーンが生成可能です。プロンプトが一貫していれば、キャンペーン全体のスタイル・ライティング・構図を揃えやすくなります。

1つの「主役コバルト」、背景色（クリーム、オフホワイト、もしくはほぼ黒）を指定し、アクセントにはひとつの暖色またはネオンを選びましょう。このシンプルな構造ならAI生成画像もブレずにクリーンでブランドらしい仕上がりになります。

次へ： ブラックとタンのカラーパレット