Eclipseの人気カラースキームまとめ：ソフト・ボールド・ニュートラル

エクリプスのパレットは、インク、チャコール、ミッドナイトのようなダークニュートラルを中心に構成され、そこにラベンダー、ティール、ゴールド、ローズなどのコントロールされたアクセントカラーを加えて視線を誘導します。

下記は、ブランド、UI、SNSグラフィックに再現できるHEXコード、ムードノート、AIプロンプト例付きのすぐに使えるエクリプスカラースキーム20選です。

エクリプスカラースキームが優れている理由

エクリプスパレットは、ほぼブラック、チャコール、スレート、ディープネイビーなどのロウライト（低照度）ベースによって、モダンでプレミアム、集中した印象をすぐに作り出します。ベースが静かなため、タイポグラフィやレイアウトの階層が少ない色数でより明確になります。

このパレットは製品間でも応用が効きます。UIコンポーネントには同じダークニュートラルシステムを維持し、キャンペーンやブランドに合わせてアクセントカラーだけを変更できます。つまり、デザインシステムやコンテンツパイプラインにも実用的です。

最も重要なのは、エクリプスの組み合わせでコントラストのコントロールがしやすい点です。グレーのわずかな段階で奥行きをつくり、ハイライトカラー1色でCTAやラベル、重要な部分だけを強調しても画面がうるさくなりません。

20種類以上のエクリプスカラーパレットアイデア（HEXコード付き）

1) ミッドナイトオービット

HEX： #0b0f1a #1b2a41 #3a4f7a #9aa6b2 #f2f5f7

ムード： 宇宙的、集中、モダン

最適用途： SaaSアナリティクスダッシュボードUI

宇宙的で落ち着いたこのエクリプストーンは、夜空のコントロールルームのような印象です。ディープネイビーやインクをベースにし、階層にはスチールブルーやクールグレーを用いてください。データ重視のUIやフィンテック、管理パネルなどコントラストが重要な場面に最適です。ポイント：ほぼ白に近い色はカードや主要指標に使い、レイアウトの余白を保ちましょう。

media.ioで生成したミッドナイトオービットの画像例

Media.io

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

今すぐ無料で試す

2) アッシュンヘイロー

HEX： #1a1a1a #3b3f46 #6b7078 #c9c6bf #f4f1ea

ムード： 静か、洗練、エディトリアル

最適用途： ミニマルブランドアイデンティティシステム

静かで洗練されたこの配色は、柔らかな灰と磨かれた金属、暖かい紙の雰囲気です。最も濃いチャコールをロゴや見出しに使い、温かみのあるオフホワイトで余白を演出するのがベストです。高級感あるアイデンティティやタイポグラフィ主導のレイアウト、モノクロパッケージに最適。ポイント：他の色を増やす代わりに、微細なグレインやリサイクルペーパーフィニッシュで質感を追加しましょう。

media.ioで生成したアッシュンヘイローの画像例

3) ルナ―ラベンダー

HEX： #14121a #2b2436 #5a4e78 #b8a7d9 #f5f2fb

ムード： 夢幻的、ソフト、夜間

最適用途： ウェルネスアプリのオンボーディングスクリーン

夢のようで夜を思わせるパープルは、雲を通す月明かりのようです。ほぼ黒に近いバイオレットで画面をまとめ、ラベンダーでハイライトやフレンドリーなマイクロインタラクションを演出。ウェルネスや睡眠、日記アプリなど、落ち着きつつもパステルほど甘くしたくないシーンに最適。ポイント：淡いライラック色はソフトな背景パネルに使い、コントラストを優しく調整。

media.ioで生成したルナ―ラベンダーの画像例

4) ソーラーシャドウ

HEX： #0f1012 #2a2d34 #444a54 #d0a85c #f6f0e4

ムード： ドラマティック、高級感、シネマティック

最適用途： ラグジュアリーイベントポスターデザイン

ドラマティックかつ映画的なこのカラーパレットはダークグレイでスポットライトのようなゴールドアクセントを際立たせます。ゴールドは日付やアイコン、主役の1行のみアクセントとして使うのが最適。高級イベントポスター、ギャラリーオープン、音楽イベントなどインスタントに高級感を与えたい場面で。ポイント：背景はマットに、ゴールドは金箔風エレメントとして演出しましょう。

media.ioで生成したソーラーシャドウの画像例

5) グラファイトネビュラ

HEX： #101214 #24282e #3f4650 #7b8794 #e6e8eb

ムード： テクニカル、シャープ、控えめ

最適用途： 開発者向けドキュメントサイト

テクニカルかつクリーンなグラファイトトーンは、ブラッシュメタルやクリーンなコードブロックのイメージです。最も濃い色をナビやフッターに、ミッドグレーでセクションやディバイダーへ。ドキュメントサイト、ナレッジベース、プロダクトヘルプセンターなど読みやすさ重視に最適。ポイント：明るいステータスカラー（成功・エラー用）を一色だけ組み合わせましょう。

media.ioで生成したグラファイトネビュラの画像例

6) トワイライトカッパー

HEX： #121315 #2b2a2a #5a3e34 #b56a4a #f1e3d3

ムード： 暖かい、ムーディー、手作り感

最適用途： コーヒーバッグパッケージデザイン

暖かくクラフト感あるこのパレットは、焙煎コーヒー豆や銅色の光、深夜のカフェを連想させます。エスプレッソのブラックでブランドロゴを強調し、カッパーやタンカラーでフレーバーノートやバッジを彩りましょう。コーヒー豆パッケージ、クラフトフード、コージーなライフスタイル広告にピッタリ。ポイント：タンカラーのシンプルなラインイラストで、上質感を邪魔せずデザインを引き立たせましょう。

media.ioで生成したトワイライトカッパーの画像例

7) ストームグラス

HEX： #0e1116 #1f2a33 #3b5564 #7fa0ad #d9e3e8

ムード： クール、信頼感、洗練

最適用途： B2Bランディングページ・ヒーローセクション

クールで信頼感のあるブルーは、ガラスを打つ雨と静かな勢いを感じます。エクリプス配色として、ディープ構造色と軽やかなハイライトのバランスでページをモダンに保ちます。最も濃いトーンはヘッダーやCTAに、淡ブルーグレーは余白や微妙なグラデーション用に。ポイント：シャープなサンセリフ体とシンプルラインアイコンでクリーンな企業感を演出しましょう。

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

8) ベルベットダスク

HEX： #170f14 #2f1b2a #55304a #a36b8e #efe3ea

ムード： ロマンティック、アーティスティック、親密

最適用途： アルバムカバーアートワーク

ロマンチックで親密なベルベット系パープルは、舞台のカーテンや消えゆくネオンのよう。最も濃いプラムを背景に、ダスティローズでタイトルやハイライトを追加。アルバムカバー、詩集ジン、ナイトライフプロモーションなどに好相性。ポイント：タイポグラフィはミニマルに、ソフトなグラデーションをメインに活用しましょう。

media.ioで生成したベルベットダスクの画像例

9) エクリプスエスプレッソ

HEX： #0f0c0a #2a1f1a #5a453b #a27c64 #f0e6dc

ムード： コージー、安定感、ラスティック

最適用途： カフェメニューデザイン

コージーで落ち着きのあるこの配色は、エスプレッソクレマやウォールナットの木肌、暖かいキャンドルの明かりを連想させます。最も暗いブラウンブラックを見出しや区切り線に、タンカラーで価格やハイライトを彩りましょう。カフェメニューやベーカリー看板、フード写真に温かみを添えるのに最適。ポイント：セリフ体の見出し＋ゆったりした余白で上質感を強調。

media.ioで生成されたエクリプス・エスプレッソの画像例

10）スモーキー・サファイア

HEX： #0b1016 #142235 #2a4664 #5b7ea3 #d7e2ef

ムード： スマート、落ち着き、デジタル

最適用途： フィンテックモバイルアプリUI

スマートで落ち着いたこれらのブルーは、深みと安心感、洗練されたデジタルな雰囲気を示唆します。最も濃いネイビーはタブバーやプライマリーボタンに、淡いブルーはカードのメイン背景に使いましょう。フィンテックアプリや銀行ダッシュボード、サブスクリプションフローなど、明瞭さが信頼を築く場面に最適です。ヒント：中間のブルーで細い枠線を追加し、重い影を使わずにカードを分けましょう。

media.ioで生成されたスモーキー・サファイアの画像例

11）コンクリート・バイオレット

HEX： #151516 #2c2a33 #4b465c #8a7ea6 #e7e3f0

ムード： アーバン、ミニマル、クリエイティブ

最適用途： エディトリアルマガジンの見開き

アーバンでミニマル、エクリプスのカラーパレットはコンクリートの壁にバイオレットの夕暮れの輝きを感じさせます。深いほぼ黒は本文に使用し、控えめなバイオレットが引用やセクションラベルに個性を加えます。ファッション誌や建築レイアウト、ツイストを効かせたいカルチャーマガジンに最適です。ヒント：高コントラストの写真と組み合わせ、色付きブロックは小さな余白やキャプションに。

media.ioで生成されたコンクリート・バイオレットの画像例

12）ナイト・ガーデン

HEX： #0d1110 #1f2b24 #3f4f3f #7c9a6a #e3efe1

ムード： アーシー、落ち着き、ボタニカル

最適用途： 水彩植物イラスト

土の香りがする落ち着いたこのグリーンは、月明かりに照らされた葉や雨上がりの苔を思わせます。深い森のトーンを茎や影に使い、控えめなセージと淡いミントのウォッシュで柔らかさを加えましょう。植物画や春のパッケージ、癒し系グラフィックにぴったりです。ヒント：輪郭はラフに、ライトミントを余白として活用しましょう。

media.ioで生成されたナイト・ガーデンの画像例

13）スペース・ステーション

HEX： #0c0f12 #1b1f26 #343a46 #6f7a88 #f2f4f7

ムード： スタイリッシュ、未来的、整理整頓

最適用途： プレゼンテーションスライドテンプレート

スタイリッシュで整然としたエクリプスの色合いは、スペースステーションのインテリア、シャープなパネルや柔らかな照明を連想させます。最も濃い色を見出しやナビゲーションに、ほぼ白色をスライド背景やチャートに使いましょう。ピッチデックや技術レポート、プロダクトロードマップなど構造が重要な場面に最適です。ヒント：チャートカラーはグレーブルー2色に抑えてデータをすっきりと。

media.ioで生成されたスペース・ステーションの画像例

14）クラウデッド・プラム

HEX： #120f14 #2a202c #4b394f #7d5f7c #e9dde9

ムード： 柔らかさ、エレガント、内省的

最適用途： ウェディング招待状セット

柔らかく内省的なこれらのプラムカラーは、黄昏の雲やサテンリボンのような雰囲気です。濃いプラムを名前や見出しに使い、淡いモーブを紙のトーンに活用しましょう。このエクリプス配色はウェディング招待状やフォーマルなお知らせ、ロマンチックなステーショナリーに最適です。ヒント：中間のプラムカラーの細い線で上品な枠取りを。

media.ioで生成されたクラウデッド・プラムの画像例

15）チャコール・ミント

HEX： #0f1214 #1e2a2a #35524a #6fb8a6 #e7f6f1

ムード： フレッシュ、バランス、モダン

最適用途： スキンケア商品広告バナー

フレッシュでバランスの取れたこの組み合わせは、暗い石に触れる冷たい空気のよう。チャコールタイポグラフィーと深いティールの補助としてミントを主役にするのが効果的です。スキンケア広告や健康ブランド、クリーンなプロダクトページに最適。ヒント：背景はほぼ白にし、明確にしたいボタンやアイコンにミントを配置しましょう。

media.ioで生成されたチャコール・ミントの画像例

16）スレート・ローズ

HEX： #111216 #2b2c34 #585b6a #c08a98 #f4e9ec

ムード： モダン、ロマンティック、気品

最適用途： ソーシャルメディア引用テンプレート

モダンで気品のあるスレートニュートラルは、ローズカラーを甘すぎず意図的に演出します。ダークスレートはテキスト用、ブラッシュは強調用、淡いピンクを背景にして高い可読性を保ちます。引用テンプレートやクリエイターのカルーセル、ライフスタイル発表におすすめです。ヒント：フォントファミリーは1つにし、フォントウェイトの違いで装飾をつけましょう。

media.ioで生成されたスレート・ローズの画像例

17）オブシディアン・サンド

HEX： #0c0c0e #232326 #4a4a4f #b6a793 #f7f2ea

ムード： グラウンデッド、プレミアム、ナチュラル

最適用途： インテリアデザインムードボード

地に足のついた高級感、エクリプス配色はオブシディアン、風化したコンクリート、温かい砂を連想させます。ダークニュートラルはキーラベルやスウォッチに、サンディベージュは全体をやわらかく包み込みます。インテリアムードボードや建築コンセプト、控えめな高級志向の家具ブランドに最適です。ヒント：木目やマットブラックの金具と合わせて統一感を出しましょう。

media.ioで生成されたオブシディアン・サンドの画像例

18）ノーザン・ライツ・ディム

HEX： #0a1212 #12312c #1f5a52 #4aa68f #dff7f0

ムード： クール、エネルギッシュ、クリーン

最適用途： テックカンファレンスバッジデザイン

クールでエネルギッシュなティールカラーは、暗い水面に淡く揺れるオーロラを思わせます。ほぼ黒のティールをバッジのベースに、明るいシーフォームで名前やトラックをハイライトしましょう。テックイベント、研修資料、素早く視認できる近代的なサイネージに最適です。ヒント：アイコンはシンプルに、シーフォームは上位2つの情報優先度にだけ使いましょう。

media.ioで生成されたノーザン・ライツ・ディムの画像例

19）モノクローム・ドリフト

HEX： #0e0f10 #2a2c2e #55595e #a7adb3 #f6f7f8

ムード： ミニマル、タイムレス、自信

最適用途： ポートフォリオWebサイトレイアウト

ミニマルで普遍的なこのグレースケールは、ギャラリーの壁や洗練された印刷物のよう。最も濃い色をナビや見出しに、中間グレーをサブテキストに、ほぼ白をページ背景に使いましょう。ポートフォリオやエージェンシーサイト、実績紹介ページにぴったり。ヒント：ライトグレーのさりげないホバーステートで、操作感を静かに伝えましょう。

media.ioで生成されたモノクローム・ドリフトの画像例

20）ディープ・シー・エクリプス

HEX： #071015 #0e2430 #144355 #1f6f7a #cfe8e6

ムード： ミステリアス、クール、洗練

最適用途： 海岸のナイトツアーの旅ポスター

神秘的で洗練されたディープシートーンは、月明かりの波や遠い港の灯りを思い起こさせます。最も濃いブルーグリーンを背景に使い、ティールで強調した形や見出しを配置しましょう。このエクリプス配色は旅のポスターや海沿いの体験、ムード重視のグラフィックにぴったりです。ヒント：グラデーションは控えめに、細かい粒子を加えて大きな暗部にバンディングが生じないように。

media.ioで生成されたディープ・シー・エクリプスの画像例

エクリプスと相性の良い色は？

エクリプス（ダークニュートラル）パレットは、スレートブルー、サファイア、ティール、控えめなラベンダーといったクールなアクセントと相性抜群です。これらの色調はデザイン全体をクリーンで現代的に保ちながら、深い背景でも読みやすさを維持します。

より温かいコントラストが欲しい場合は、控えめなゴールド、カッパー、サンド、ブラッシュ、タンを加えましょう。ポイントは「節度ある使用」―注目させたいCTAや日付、バッジ、ヒーローアイテムなどだけに使います。

最も柔軟なオプションを求めるなら、ほぼ白、温かみのあるオフホワイト、淡いグレーを“呼吸できる空間”カラーとして活用しましょう。コントラストを上げて、カードや面のサポート、ダークUIの重さを軽減します。

実際のデザインでエクリプスカラースキームを使う方法

まず70/20/10の分割で：70%をダークニュートラルベース、20%をミッドトーンのセクション＆枠線、10%をアクセント（インタラクティブや重要な項目）で割り振りましょう。これで色の意図が明確になり、混ざり合いません。

UIでは、最も濃い色をナビやプライマリーボタンに使い、コンテンツは明るい面（カード、テーブル、パネル）に置きましょう。ポスターやSNSグラフィックなら、最も濃い色をステージ、アクセントをスポットライトの役割に。

ブランディングの場合は、シグネチャーアクセントを1色に絞り、テンプレート全体で一貫して使いましょう。単一のハイライトカラーを繰り返す方が、複数の明るい色をバラバラに使うよりも認知度アップに効果的です。

AIでエクリプスパレットのビジュアルを作成する

HEXコードがあってモックアップが早く必要なときは、AIプロンプトに「UI・ポスター・パッケージ」など主題と、“支配色”や“アクセント”としてエクリプスカラーを指定しましょう。

Media.ioでは、広告やサムネイル、オンボーディング画面向けにアスペクト比を変えたり、タイポグラフィーやレイアウト密度、テクスチャ（マット、グレイン、ホイル）を調整しながら、あなたのイメージに合ったものを素早く試せます。

気に入った見た目ができたら、同じプロンプト構造を他のキャンペーンにも使いましょう。アクセントカラーや主題だけ変えて“エクリプス”なデザインシステムを一貫できます。

次へ： サファリカラーパレット