メタリックカラー20選：配色例・HEXコード・AIプロンプト

メタリックカラーは一瞬で洗練された印象を与えます ― クロームの縁取り、ブラッシュドニッケルのニュートラル、控えめながらも高級感のある温かみのあるゴールドなどがその代表です。

以下は、HEXコード付きのメタリックカラーパレットアイデアと、UI・ブランディング・印刷物で読みやすさと輝きを両立する実践的なヒントです。

メタリックパレットがこれほど効果的な理由

メタリックパレットは「意図的なデザイン」を感じさせます。コントラストと抑制のバランスが取れているからです：ディープチャコールやネイビーで構造を作り、シルバーや温かみのあるゴールドで品質を演出します。

さらに、メディアを問わず活躍します。UIではメタリック調ニュートラルがレイアウトをクリーンかつ読みやすく保ち、印刷やパッケージングでは温かみのあるブラスやカッパーが質感やクラフト感を示唆します。

最も重要なのは、メタリックの配色はアクセントの価値を高めることです。ゴールド・ブロンズ・コバルトなど一箇所だけでも、CTA・価格・主役となる要素に自然に視線を誘導し、無駄な装飾を増やさずにすみます。

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

1）クロームダスク

HEX： #0F172A #2B2F36 #8E96A3 #D7DCE3 #C7A86B

ムード： 洗練された、夜の雰囲気、高級感

最適用途： SaaSランディングページUI

クロームの光沢を帯びた夕暮れ色は、都市の光がガラスに反射するような印象。深いネイビーとグラファイトをUIのベースカラーにし、やわらかなシルバーを面や仕切りに使います。温かみのあるゴールドアクセントは、主要なCTAや重要な指標向けに。コツ：グラデーションは控えめにし、テキストのコントラストを保ちましょう。

media.ioで生成したクロームダスクの画像例

Media.io

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

今すぐ無料で試す

2）ブラッシュドニッケルニュートラル

HEX： #1F2937 #4B5563 #9CA3AF #E5E7EB #B45309

ムード： ミニマル、インダストリアル、落ち着いた

最適用途： ダッシュボードUI・データカード

ブラッシュドニッケルのニュートラルは、機械で磨かれた金属が柔らかいスタジオの光に照らされたイメージ。ダッシュボードはチャコールのヘッダー、ミドルグレーのチャート、淡いグレーカードで構成します。アンバーは警告やハイライトに効果的ですが、主張しすぎません。コツ：最も濃い色は文字用に使い、テーブルの可読性を確保しましょう。

media.ioで生成したブラッシュドニッケルニュートラルの画像例

3）シャンパン・グロウ

HEX： #2D1E1A #6B4E3D #C9A56A #F2E6D8 #F7F2EA

ムード： 柔らかい、祝祭的、エレガント

最適用途： 結婚式招待状一式

シャンパンの暖色トーンは、キャンドルの灯り、サテン、グラスの音色を思わせます。濃厚なココアにクリーム系のニュートラルをタイプで合わせ、ゴールドは縁取り・モノグラム・箔風アクセントとして使います。テクスチャのある紙やトレーシングペーパー、ミニマルなレイアウトにマッチします。コツ：ゴールドは線を細く使い、上品に仕上げましょう。

media.ioで生成したシャンパン・グロウの画像例

4）ローズゴールド・アフェア

HEX： #3B1F2B #7A3E4D #C27A7A #E7C2B8 #F5EFEA

ムード： ロマンティック、光沢感、モダン

最適用途： ビューティーブランドのパッケージ・ラベル

ロマンチックなローズ色は、磨かれた金属が肌や血色の温もりを帯びたよう。高級感を維持したい時はパレットを深いプラムで引き締め、淡いクリーム色で余白を持たせます。ローズやブラッシュはマットパッケージにグロス加工を一部施すと効果的。コツ：中間のローズは小さな文字用途に使うと、明るい背景でも可読性良好です。

media.ioで生成したローズゴールド・アフェアの画像例

5）アンティークブラス研究

HEX： #1B1A17 #3A2F21 #7A5C2E #C2A56A #EEE2C6

ムード： 伝統的、学究的、温かみ

最適用途： 書籍カバーデザイン・文房具

アンティークブラスとインクのような影は古い図書館やレザーの背表紙、ランプの光を思い出させます。タイトルにほぼ黒を用い、温かなブラウンを重ねて奥行きと装飾を演出。ブラスは小さな線画、縁取り、型押し風ディテールに最適。コツ：ややテクスチャ感ある背景を使うと一番明るいクリーム色にアーカイブ調の雰囲気が出ます。

media.ioで生成したアンティークブラス研究の画像例

6）カッパーエンバー

HEX： #1F0F0A #5A1F12 #B24A2E #D98F63 #F3E4D8

ムード： 炎のよう、職人風、大胆

最適用途： レストランロゴ・メニューのアクセント

煙るエンバーレッドと銅の輝きは、炎や打ち出しの調理器具を思わせます。カラーパレットとしては、ダークエスプレッソで全体の構成を固め、カッパートーンはタイトルやアイコンで活躍。非コート紙や木目、白黒フード写真とも好相性。コツ：一番明るいカッパーはシェフのおすすめや区切りなど注目ポイント用に取っておきましょう。

media.ioで生成したカッパーエンバーの画像例

7）スチール＆スレート

HEX： #0B1220 #263040 #5B6777 #B8C2CE #E7EDF4

ムード： クール、構造的、自信

最適用途： エンタープライズソフトウェアUI

クールなスチール＆スレート色は正確さ・制御・磨き上げたハードウェアを連想させます。最も濃い色をナビゲーション、スレートをパネル、淡いブルーグレーをコンテンツ背景に。シャープなラインアイコンや凝縮書体と好相性。コツ：このパレット外の明るい色は、重要アクションにだけワンポイントで使いましょう。

media.ioで生成したスチール＆スレートの画像例

8）プラチナフロスト

HEX： #0F172A #334155 #94A3B8 #E2E8F0 #F8FAFC

ムード： シャープ、軽快、モダン

最適用途： ミニマルな商品ランディングページ

プラチナフロストは冬の光がなめらかな金属を照らす印象。クリーンで空気感がありながら、冷たくなりすぎません。ほぼ白と淡いシルバーを背景に多用し、ネイビーで文字と構造を演出。この組み合わせはテック・スキンケア・現代家具にも合います。コツ：影は薄めに抑え、階層はスペースでつけましょう。

media.ioで生成したプラチナフロストの画像例

9）ガンメタル・オーキッド

HEX： #111827 #374151 #6B7280 #A78BFA #EDE9FE

ムード： ムーディ、未来感、遊び心

最適用途：音楽イベントポスター

ガンメタルとオーキッドは、濡れた舗道に映るネオンのように感じられ、ムーディで脈打つ雰囲気を持っています。ダークグレーを背景ブロックに使い、ラベンダーでヘッドラインや強調色を表現しましょう。幾何学パターンやハイコントラストの書体とよく合います。ヒント：ラベンダーは各セクションに1〜2要素程度に抑えて、鮮度を保ちましょう。

media.ioで生成されたガンメタルオーキッドのイメージ例

10) ピューター＆パール

HEX： #2A2E35 #5C6673 #AAB3BE #E8E3DC #FAF7F2

ムード：ソフト、洗練、エディトリアル

最適用途：マガジンレイアウト＆ルックブック

ピューターとパールはオーダーメイドの布地、柔らかな日差し、控えめな高級感を思わせます。グレーはグリッドやキャプション、罫線に最適で、パール系のニュートラルはページを軽やかに演出します。白黒のポートレートやミニマルな商品写真との相性も抜群です。ヒント：小さな文字はピューターにし、ほぼ黒はセクションヘッダー専用に使いましょう。

media.ioで生成されたピューター＆パールのイメージ例

11) チタニウムティール

HEX： #0B1320 #1F2A44 #0F766E #67E8F9 #E6FFFB

ムード：フレッシュ、ハイテク、エネルギッシュ

最適用途：アプリのオンボーディング画面

チタニウムブルーにティールのスパークは、クリーンな回路や海辺の光を彷彿させます。深い色は構造に、ティールはトグルや進捗、リンクなどのインタラクティブ要素に使いましょう。アイスシアンはイラストやバッジのアクセントに最適。ヒント：ティール系グラデーションを使い、ビジュアルノイズを抑えましょう。

media.ioで生成されたチタニウムティールのイメージ例

12) ブロンズオリーブトレイル

HEX： #1A1A12 #3B3A25 #6B6A3A #B08D57 #EFE6D6

ムード：アーシー、アウトドア、安定感

最適用途：クラフトコーヒーバッグパッケージ

ブロンズとオリーブは、トレイルの埃、乾いた葉、そして金具に差す太陽を思い起こさせます。メインフィールド色にオリーブを、バッジやシール、小さな文字にはブロンズを使いましょう。クラフト紙の質感やシンプルな線画との組み合わせが自然です。ヒント：ライトクリームは栄養成分パネルや小さな文字部分に使い、可読性を保ちましょう。

media.ioで生成されたブロンズオリーブトレイルのイメージ例

13) マーキュリーミント

HEX： #0A0F14 #334155 #93C5FD #A7F3D0 #F1F5F9

ムード：クリーン、エアリー、実験的

最適用途：スタートアップブランドキット

マーキュリーのようなダークとミント、アイスのアクセントは、シャープでモダン、やや未来的な印象を与えます。ほぼ黒はロゴやワードマークに使い、ミントや淡いブルーはセカンダリーグラフィックに使用。ホワイトスペースや丸みのある形状との相性が良いです。ヒント：ミントをシグネチャーカラーに、ブルーはサポート用UIだけに使いましょう。

media.ioで生成されたマーキュリーミントのイメージ例

14) シルバーライラックヘイズ

HEX： #1F2430 #4B5563 #C4B5FD #E5E7EB #FBF7FF

ムード：ドリーミー、ソフト、コンテンポラリー

最適用途：スキンケアSNSテンプレート

シルバーニュートラルとライラックヘイズは、サテンやミスト、やわらかな輝きを感じさせます。商品写真には明るい背景を使い、ライラックでステッカーや見出し、装飾などを担当。ダークグレーがコピーテキストの可読性を保ちます。ヒント：パステル要素の区切りには細いシルバーグレーのアウトラインを加えましょう。

media.ioで生成されたシルバーライラックヘイズのイメージ例

15) ギルデッドサンドストーン

HEX： #2B2118 #6B4F3A #C2A179 #E7D3BA #FAF3EA

ムード：日差し、穏やか、高級感

最適用途：インテリアデザインポートフォリオ

ギルデッドサンドストーンは、温かい太陽があたる石やリネンのカーテン、磨かれたブラスのパーツを連想させます。ページ背景にはクリーミートーン、見出しやナビゲーションは濃いブラウンが最適。ゴールドベージュは区切り線やボタン、フォトフレームに活用。ヒント：彩度は低めにし、イメージのテクスチャで魅力を引き出しましょう。

media.ioで生成されたギルデッドサンドストーンのイメージ例

16) ミッドナイトブロンズ

HEX： #070A0F #1F2937 #6B7280 #B07A3C #F3E8DB

ムード：ドラマチック、ラグジュアリー、自信

最適用途：プレミアム腕時計商品広告

ミッドナイトの影とブロンズのハイライトは、磨かれたパーツにスポットライトが当たるような印象です。メタリックなカラーパレットとして、ほぼ黒のベース＋単一の暖かなブロンズアクセントが最高の高級感を引き出します。ミニマルな書体や余白をしっかり取り、現代的に仕上げましょう。ヒント：ブロンズは端や細部だけに使い、重たい印象にならないよう注意しましょう。

media.ioで生成されたミッドナイトブロンズのイメージ例

17) アーバンカッパーポップ

HEX： #111111 #2F2F2F #FF6A3D #C47C5A #F2EFEA

ムード：ストリート、ボールド、モダン

最適用途：テックカンファレンスフライヤー

アーバンなダークにカッパーポップを加えると、コンクリートや看板、発光する熱を思わせます。ブラックやグレーで基礎を作り、ビビッドなオレンジカッパーを日付やCTAのアテンションに使いましょう。力強いサンセリフやシャープなジオメトリとも好相性。ヒント：明るいアクセントは一貫した形状でリズムを作ります。

media.ioで生成されたアーバンカッパーポップのイメージ例

18) グラファイトブラッシュ

HEX： #0B0D12 #2B2F3A #8B8F9A #E8B4B8 #FAF6F3

ムード：ソフト、シック、コンテンポラリー

最適用途：ファッションEC UI

グラファイトとブラッシュは、レザーに触れるシルクのように、モダンでありながら親しみやすい印象です。ナビゲーションにはほぼ黒、枠線にはグラファイト、ウィッシュリストのハートやセールタグなどのマイクロアクセントにブラッシュを使いましょう。エディトリアルな写真や広めのマージンと組み合わせて。ヒント：クリーンで高級感を出すため、明るい背景でブラッシュを使いましょう。

media.ioで生成されたグラファイトブラッシュのイメージ例

19) オパールクロームウォッシュ

HEX： #0F172A #475569 #9CA3AF #CFFAFE #F8FAFC

ムード：ガラスのよう、輝き、ライト

最適用途：プレゼンテーションデックテーマ

オパールやクロームウォッシュは、ガラスを通る光のようで、クリーンでやや虹色がかった印象です。タイトルにはネイビー、本文にはスレート、セクション区切りやキーナンバーにオパールシアンを使いましょう。シンプルなチャートや細い仕切り線に最適。ヒント：背景はほぼホワイトを保ち、エアリーさを損なわないようにしましょう。

media.ioで生成されたオパールクロームウォッシュのイメージ例

20) ラッカードゴールドノワール

HEX： #050505 #1C1C1C #3A3A3A #D4AF37 #F5F1E6

ムード：ドラマチック、グラマラス、ハイコントラスト

最適用途：ラグジュアリーブランドロゴ＆モノグラム

漆黒と鮮やかなゴールドはガラの照明や磨かれたジュエリーのよう。ほぼ黒とチャコールはロゴベースに、ゴールドはプレミアムの象徴や細いアウトラインに最適です。ハイコントラストなセリフ体や余白の多用とも相性抜群。ヒント：ゴールドはマットと光沢仕上げ両方でテストし、印刷処理に合ったものを選びましょう。

media.ioで生成されたラッカードゴールドノワールのイメージ例

21) コバルトスティールシャイン

HEX： #0A1224 #1D4ED8 #60A5FA #A7B0BE #F1F5F9

ムード：ボールド、自信、スポーティ

最適用途：スポーツアプリUIハイライト

コバルトとスチールニュートラルは、スピード感、洗練、競争的な印象です。コバルトはキーアクションやアクティブ状態に、スチールグレーは他のインターフェイスを落ち着かせる役割。アイコンやスコアの数字とも好相性です。ヒント：飽和ブルーは階層1つぶんだけに絞り、圧迫感を防ぎましょう。

media.ioで生成されたコバルトスティールシャインのイメージ例

22) スモークドシルバーシトラス

HEX： #121212 #3F3F46 #A1A1AA #F59E0B #F5F5F4

ムード：モダン、パンチ、バランス

最適用途：ブランドSNS広告＆バナー

スモークドシルバーにシトラスアクセントは、モダンなストリートウェアや光沢のあるサインを想起させます。グレーを土台にし、オレンジをワンポイントに据えると印象的。セールバナーや注目キャッチ、太字の書体と好相性です。ヒント：余白には明るいオフホワイトを使い、アクセントを際立たせましょう。

media.ioで生成されたスモークドシルバーシトラスのイメージ例

メタリックに合う色は？

メタリック系ニュートラルは、ダークベース（ほぼ黒、ネイビー、チャコール）と明るい面（ソフトシルバー、パール、暖かいオフホワイト）との組み合わせが自然です。このコントラストにより、デザインはシャープで「ハードウェアのようなクリーンさ」を保ちます。

アクセントにはウォーム系（ゴールド、ブロンズ、カッパー）またはクール系（コバルト、ティール、ライラック）のハイライトどちらか1色を選び、ボタンやバッジ、重要な数値に一貫して使いましょう。

より広いカラールールが必要なら、非メタリックの「シグナルカラー」（コーラルやエメラルドなど）をアラートや成功時に加え、他は控えめにまとめましょう。

リアルなデザインでメタリックカラーパレットを使う方法

UI では、メタリックパレットを階層化の手段として：最も暗い色をナビやテキスト、ミドルグレーはパネルやボーダー、最も明るい色は背景やカードに。こうすることでフラットな印象を回避できます。

ブランディングやパッケージングでは、メタリックのシグナルは大きな色面よりも、ごく細い枠線・モノグラム・アイコン・箔のようなハイライトなどミクロなディテールに使うのが最適です。

印刷の場合は、必ずテストしましょう。暖かいゴールドやブロンズは未加工の用紙では色味が変わることがあり、クールなシルバーは背景がグレーすぎるとくすんで見えることもあります。

AIでメタリックパレットのビジュアルを作成

メタリックカラーの雰囲気を実際のレイアウトでプレビューしたい場合、制作ファイルに取り掛かる前にランディングページ、ポスター、パッケージ、ブランドボードなどの簡易モックアップを作成しましょう。

Media.ioを使えば、短いプロンプトからブランドビジュアルを作成でき、アクセントを1つだけ変更（ゴールドからカッパー、スレートからピューター、ティールからコバルトなど）することで同じ構造を保ったまま素早くイテレーションできます。

上記のパレットHEXコードを参考にして、素材（ブラッシュメタル、ラッカー、サテン紙など）を説明し、“メタリック”な雰囲気を出しつつ判読性を妥協しないようにしましょう。

次： コーラルオレンジカラーパレット