コーンフラワーカラーの最新配色20選｜HEXコード付きパレット

コーンフラワーブルー（#6495ED）は、モダンでクラシックな色です。親しみやすく、クリアで、画面や印刷物で即座に読みやすいカラーです。

下記は、UI、ブランド、招待状、ポスター、イラストで役立つ22種類のコーンフラワーカラーパレットアイデア（HEXコード、ムードメモ、実用例）です。

なぜコーンフラワーパレットはうまく機能するのか

コーンフラワーは「安全」なブルーゾーンに位置しています。ブランド感を与えるほど鮮やかでありながら、温かみもあり、親しみやすさを保ちます。このバランスのおかげで、現代的なUI、マーケティングページ、編集レイアウトの信頼できる主要色となります。

冷たいニュートラル（アイスホワイト、チャコール、スレート）と暖かいアクセント（ゴールド、テラコッタ、ココア）を両方合わせやすいです。この柔軟性により、落ち着いたミニマルな雰囲気から、活気のあるハイコントラストな雰囲気まで、統一感を保ちながら演出できます。

実際には、コーンフラワーは深いネイビーやほぼ黒と組み合わせてテキストに使うと、アクセシビリティでも優れた効果を発揮します。ボタンやリンク、強調ポイントに使えば、レイアウトを邪魔せず注目を集められます。

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

1）コースタル・コーンフラワー

HEX： #6495ED #EAF3FF #1F2A44 #F2C14E #FFFFFF

ムード： そよ風、楽観的、コースタル

おすすめ用途： 旅行ランディングページ・UI

風通しがよく日差しのある印象。塩の香りや白波、クリアな地平線を感じさせます。コーンフラワーブルーをUIのメインカラーに使い、ナビゲーションやテキストには深いネイビーを配置。ゴールデンイエローはアクション用途に控えめに配し、日差しのような存在感に。背景はオフホワイト中心にしてコントラストとアクセシビリティを確保しましょう。

media.ioで生成したコースタル・コーンフラワーの画像例

Media.io

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

無料で今すぐ試す

2）ミスティ・スタジオブルー

HEX： #6A96F0 #D9E6FF #8A8FA3 #2E3140 #F7F7FA

ムード： 穏やか、モダン、控えめ

おすすめ用途： クリエイティブエージェンシーブランドキット

穏やかで少し霧がかった印象。静かなスタジオの朝の光を思わせます。コーンフラワーパレットでプロフェッショナルな雰囲気を保つには、グレーライラックの中間色をセカンダリサーフェスに、明るいブルーをブランドのキーに。チャコールで見出しはシャープに、柔らかなホワイトでクールになりすぎない印象に。ブルーは一定の形やルールで使えば認知を早めます。

media.ioで生成したミスティ・スタジオブルーの画像例

3）ヴィンテージ・ポーセリン

HEX： #5F8FE6 #F6F1E8 #C9B8A6 #2C3E57 #D77A61

ムード： 伝統、暖かみ、上品

おすすめ用途： アルチザンカフェメニュー

暖かく懐かしい雰囲気。絵付けされた陶磁器やリネンのテーブルクロス、ほのかなスパイスのイメージ。柔らかなクリームやタンをベースにブルーを見出しや装飾に。くすみコーラルは特別メニューや価格表示の強調用に最適。本文は深いスレートで印刷風のクラシックな印象に。

media.ioで生成したヴィンテージ・ポーセリンの画像例

4）スプリングメドウ・ウォッシュ

HEX： #6699FF #CFF2E3 #7BC96F #FFF3C4 #2B3A67

ムード： フレッシュ、ボタニカル、明るい

おすすめ用途： 水彩フローラルイラスト

新鮮で生き生きとした色合い。雨上がりの新芽や花びら、青空を連想させます。ブルーやミントで広い範囲を彩り、グリーンは茎や葉先に。淡いバターイエローで明るさを加え、クールトーンを引き立てます。深いインディゴは輪郭や陰影のみ控えめに使い、春っぽさを保ちます。

media.ioで生成したスプリングメドウ・ウォッシュの画像例

5）ノルディック・ミニマル

HEX： #5B88E5 #F5F7FB #C7CEDB #111827 #E5E7EB

ムード： 清潔、シャープ、ミニマル

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

清潔で静かな印象のパレット。冬の光がマット紙に映るような雰囲気です。アイスホワイトや淡いグレーはパネルに、ブルーはアクティブ状態やチャート、リンクに。ほぼ黒のテキストは信頼性のあるコントラストでUIを上品に。ブルーは主要アクション1つに限定し、ユーザーがすぐ認識できるようにしましょう。

media.ioで生成したノルディック・ミニマル例

6）サンセット・アクセント

HEX： #6395ED #FFB703 #FB8500 #023047 #E0FBFC

ムード： 大胆、エネルギッシュ、ハイコントラスト

おすすめ用途： スポーツイベントポスター

大胆で高エネルギー。スタジアムの夕空を思わせる配色。ブルーはメインフィールドに、オレンジは見出しやバッジ、日付などに控えめに。深いティールブルーでコントラストを保ち、アクセントが混乱しないように。淡いアクアを十分に使い、遠くからでも読みやすくしましょう。

media.ioで生成したサンセット・アクセント画像例

7）ラベンダー・コーンフラワー

HEX： #6D8DF5 #CDB4FF #FFC8DD #FFF1F8 #3A2E5C

ムード： ソフト、夢見心地、ロマンチック

おすすめ用途： ビューティーブランドSNS投稿

ソフトで夢のような印象。サテンリボンや夕方の雲を感じさせます。ブルーとラベンダーで主要部分を彩り、ピンクをアイコンや値札等の小さなハイライトに。深いプラムは文字や輪郭に適し、パステルカラーの可読性を保ちます。グラデーションは控えめに、追加で彩度の高い色は避けましょう。

media.ioで生成したラベンダー・コーンフラワー画像例

8）インク＆アイス

HEX： #5E8BEA #E6F0FF #0B1320 #7A869A #B8C0CC

ムード： スタイリッシュ、真面目、先進的

おすすめ用途： フィンテックモバイルオンボーディング画面

スタイリッシュで自信のある印象。ミッドナイトインクに氷の光を足した感じ。淡いアイスブルーは画面背景に、インク色のブラックは主要テキストや数字に。コーンフラワーはボタンや進捗マーカーに集中して使い、フォーカスを即座に引き寄せましょう。グレーのアクセントは区切りやラベルに一貫して使うとビジュアルの乱れを防げます。

media.ioで生成したインク＆アイス画像例

9）クレイ＆ブルー

HEX： #648FE8 #E9D8C8 #B56B4D #2D2A32 #F8F4EF

ムード： アース感、アーティスティック、落ち着き

おすすめ用途：ハンドメイドの陶器パッケージ

素朴で芸術的な組み合わせは、明るいスタジオの窓辺に置かれた濡れた粘土のような雰囲気です。ラベルや背景にはクリーミーなニュートラルカラーを使用し、ブルーは温かみのあるテラコッタに対する鮮やかなアクセントとして加えます。エスプレッソトーンはタイポグラフィや小さなパターンのディテールに理想的です。ポイント：マットな紙を使えば、色味が手作りの質感を保ちます。

media.ioで生成した粘土とブルーのイメージ例

10) シトラスポップ

HEX： #5F94F2 #F1FA8C #50FA7B #FF5555 #282A36

ムード：遊び心があり、パンチが効いていて、若々しい

おすすめ用途：音楽フェスティバルのフライヤー

遊び心ある鮮やかな色は、シンセポップと夏のフルーツのような刺激を持ちます。暗めのベースは文字や背景の形に、ブルーはタイトルのメインハイライトカラーに。ライムやイエローはサブのアクセント、レッドは日付やチケット情報など目立たせたい要素に。ポイント：各レイアウトで明るいアクセントは2色までに抑え、散らかりを防ぎましょう。

media.ioで生成したシトラスポップのイメージ例

11) ガーデンインビテーション

HEX： #6A9BFF #FDE2E4 #FAD2E1 #E2F0CB #2A2D43

ムード：ロマンティック、 airy、春らしい

おすすめ用途：結婚式招待セット

ロマンティックで軽やかなセットは、花びらが記念の本に押し花されたような印象です。エレガントなコーンフラワーカラーパレットには、ブラッシュトーンを紙色に、ブルーはモノグラム・枠・RSVPヘッダーへ。淡いグリーンは小さな植物モチーフや封筒ライナーに最適です。ポイント：文字は深いスレート色にすることで、繊細なパステルカラーが印刷でも読みやすくなります。

media.ioで生成したガーデンインビテーションのイメージ例

12) マリタイム・ディープ

HEX： #5C86D6 #0B3D91 #062A4D #9AD1D4 #F4F9FF

ムード：海、自信、企業的

おすすめ用途：年次報告レイアウト

海の自信に満ちたブルーは、深い水と涼しい海風を感じさせます。最も明るい色は余白やデータ表に使い、深いネイビーは見出しやグラフに。控えめなアクアは強いサブアクセントとして、強調、アイコン、インフォグラフィックに。ポイント：グラフはブルー2色＋アクアで統一し、レポート全体の一貫性を保ちましょう。

media.ioで生成したマリタイムディープのイメージ例

13) サンドストーン・カーム

HEX： #6B93E6 #F3E9D2 #D7C0AE #4A4E69 #FFFDF7

ムード：穏やか、暖かい、ウェルカム

おすすめ用途：ウェルネスブログテーマ

穏やかで親しみやすいパレットは、太陽に温められた石と澄んだ青空を連想させます。長文エリアにはクリーミーなニュートラル、ブルーはリンクやボタン、セクション区切りに使いましょう。くすんだモーブグレーはタイポグラフィを柔らかく保ちます。ポイント：行間を広めにとり、ブルーをタンアクセントと組み合わせると落ち着いたリズムになります。

media.ioで生成したサンドストーンカームのイメージ例

14) エレクトリック・トワイライト

HEX： #6A8CFF #00C2FF #7C3AED #0F172A #E2E8F0

ムード：鮮やか、未来的、ナイトライフ

おすすめ用途：テックカンファレンスヒーローバナー

鮮やかで未来的な色合いは、夜のガラスに反射する都市の光のようです。メインカラーにコーンフラワーブルーを使い、シアンとバイオレットでグラデーションやハイライトを重ねます。コーンフラワーのカラーコンビは暗い背景に映え、ほぼブラックが全体を清潔にプレミアムに保ちます。ポイント：タイポグラフィは軽やかでシンプルにして、グラデーション効果と争わないように。

media.ioで生成したエレクトリックトワイライトのイメージ例

15) ソフトデニム

HEX： #6288E2 #A3BFFA #EDF2F7 #2D3748 #F6AD55

ムード：フレンドリー、カジュアル、信頼感

おすすめ用途：教育アプリUI

親しみやすくカジュアルな色合いは、使い込んだデニムと温かな朝焼けを思わせます。ブルー2色はナビや進捗ステータスに、最も淡い色はカードや背景に。暖かいアンバーは達成やリマインダーにおすすめ。ポイント：最も暗いスレートは文字だけに使い、UIを軽快に保ちましょう。

media.ioで生成したソフトデニムのイメージ例

16) ボタニカル・ウォーターカラー

HEX： #6797F2 #B7E4C7 #95D5B2 #FFF0D6 #1B4332

ムード：ナチュラル、やさしい、手作り感

おすすめ用途：春の植物ポスターイラスト

自然でやさしいセットは、葉影と軽い紙、明るいブルーの花をイメージします。グリーンは葉部分のメイン、ブルーは花または空色の主役として。クリームは全体を暖かくまとめ、深い森色は茎や文字で構造を加えます。ポイント：ブルーとグリーンの間はウェットオンウェットのぼかしで柔らかく移行しましょう。

media.ioで生成したボタニカルウォーターカラーのイメージ例

17) エディトリアル・セレニティ

HEX： #5D8CE9 #FFFFFF #DCE3F1 #101828 #B5472D

ムード：洗練、雑誌的、バランス

おすすめ用途：雑誌特集スプレッド

洗練されバランスの取れた色調は、切れ味のあるページと自信あるブルー見出しのよう。コーンフラワーカラーでプレミアムな印象にするには、白と淡いグレー・ブルーをグリッドの基礎にし、濃いインクは文字担当。アース感のあるレッドブラウンは引用やセクションマーカーのアクセントに。ポイント：アクセントの使い方はスプレッド全体で統一し、視線を誘導しましょう。

media.ioで生成したエディトリアルセレニティのイメージ例

18) スカイライングラデーション

HEX： #5E90FF #22D3EE #A78BFA #0B1020 #F1F5F9

ムード：モダン、輝き、デジタル

おすすめ用途：アプリ スプラッシュスクリーン

モダンで輝く組み合わせは、ネオンの霞に消える都市のスカイラインを想起させます。ブルーをブランドカラーにし、シアンや淡いバイオレットでグラデーションを生成。ほぼブラックの背景なら、光が際立ちます。ポイント：ネガティブスペースを十分に使い、グラデーションがロゴを圧倒しないように。

media.ioで生成したスカイライングラデーションのイメージ例

19) ウォームココアコントラスト

HEX： #6490EE #7F5539 #EDE0D4 #2B2D42 #F4F1DE

ムード：居心地良く、上品、地に足

おすすめ用途：コーヒーサブスクリプションLP

居心地良く上品な色合いは、ココアの温もりとクールなブルーアクセントが調和します。クリーム色は背景のメイン、ブルーはボタンやリンクの爽やかなモダン差し色に。ブラウンは写真の小道具やアイコン・区切りなどUIの細かいディテールに。ポイント：文字は濃いスレート色を使い、ページがプレミアムに感じられるように。

media.ioで生成したウォームココアコントラストのイメージ例

20) モノクローム・コーンフラワー

HEX： #3F6FD9 #4F7FE2 #6495ED #8FB3FF #DCE8FF

ムード：調和、集中、穏やか

おすすめ用途：ミニマルポートフォリオサイト

調和と集中を感じるブルーだけの配色は、重なる空と静かな水のよう。ミッドトーンのコーンフラワーを主要ボタンやヘッダーに、明るい色は背景やホバー状態へ。最も深い色はナビやフッターの構造に。ポイント：余分な色を加えず、余白と文字階層で質感を出しましょう。

media.ioで生成したモノクロームコーンフラワーのイメージ例

21) 紙空ノート

HEX： #6A98F3 #F9FAFB #E5E7EB #374151 #F59E0B

ムード：実用的、明るい、整理された

おすすめ用途：ノートアプリUI

実用的で明るい色は、清潔な紙とクリアなブルーのペンをイメージ。淡いグレーは構造やカード、ブルーはアクティブなノートや主要アクションに。アンバーはタグやリマインダー、小さな通知ドットに最適。ポイント：アイコン塗りはニュートラルに、ブルーは選択状態だけにし疲れを防ぎましょう。

media.ioで生成した紙空ノートのイメージ例

22) カームミュージアムウォール

HEX： #5E8EE6 #F2F2F0 #CFC8C2 #2C2A2E #8C6A5D

ムード：静か、教養、ギャラリー的

おすすめ用途：展覧会ポスター

静かで教養ある組み合わせは、ギャラリーの壁や柔らかな光、一つ際立つ青い作品を想起。オフホワイトはメインフィールド、ブルーはタイトルや一つの幾何学要素へ。トープやクレイブラウンは日付や会場・枠のサポートカラーに適しています。ポイント：大きめの余白を持たせ、デザインの意図や美術館らしさを強調しましょう。

media.ioで生成したカームミュージアムウォールのイメージ例

コーンフラワーに合う色は？

コーンフラワーブルーは、クリーンなホワイトやアイスブルー、クールグレーと組み合わせると特に清潔感が出ます――モダンなインターフェイスや雑誌グリッドに最適です。チャコールやほぼブラックと合わせれば、強いコントラストと読みやすさが得られます。

温かみが欲しい優しいデザインでは、コーンフラワーをクリーム、タン、サンドストーン、ココア、テラコッタと組み合わせましょう。これらのアーシーなニュートラルはブルーを和らげて、テックっぽさよりもプレミアム感を出してくれます。

エネルギッシュにしたい場合は、ゴールデンイエローやアンバー、オレンジなど補色や近い補色のアクセントを追加。温かいカラーはCTAやバッジ、見出しなどキーポイントのみに限定して、配色のバランスを保ちましょう。

コーンフラワーカラーパレットを実際のデザインで活用する方法

UIでは、コーンフラワーをインタラクティブ要素（主要ボタン、リンク、トグル、進捗、チャートハイライト）に割り当てて。面にはニュートラル（オフホワイトやグレー）、文字には深いネイビー／インクを使いアクセシビリティを維持しましょう。

ブランドでは、コーンフラワーは繰り返し出る認識しやすいポイント――ロゴマークやヘッダー、区切り線、アイコンのストロークなど――で映えます。サポート色は控え目にし、ウェブサイトやSNSテンプレート、印刷物まで一貫した印象を作れます。

ポスターや招待状の場合、コーンフラワーを「主役」のインクとして扱い、アクセントとしてゴールド、コーラル、ラスト、またはブラッシュのいずれかを強調のために選びます。控えめなアクセント戦略は、デザインをエレガントにし、遠くからでも読みやすく保ちます。

AIでコーンフラワーパレットのビジュアルを作成する

すでにHEXコードがある場合、スタイル付きのビジュアル（ランディングページ、ポスター、ブランドキット、水彩イラストなど）を生成して、構成やタイポグラフィを洗練させることで、リアルなモックアップをより速く作成できます。

明確なテーマ（UI、ポスター、パッケージ）から始め、コーンフラワーを主な色として指定し、アクセントをどこに入れるか（CTAボタン、ヘッドラインブロック、小さなバッジ）を記載します。背景を「クリーン」または「プレーン」に保つことで、パレットが正確に見えるようになります。

Media.ioを使って、ムードボード、クライアントプレビュー、量産用インスピレーションのためのコーンフラワーパレットビジュアルを生成、反復、ダウンロードしましょう。

次： ダークパステルブルーカラーパレット