ゴールドに合う色は、ブラックやネイビーなどの深い色、アイボリーやベージュなどの暖色系ニュートラル、エメラルドやティールなどの宝石色です。深い色はコントラストを、暖色系ニュートラルは柔らかさを、宝石色は華やかさを加えます。
このページでは、ゴールド配色パレット20選をHEXコード付きで紹介します。ウェディング、ブランド、Webデザイン、パッケージなど、用途に合う組み合わせを見つけてください。
ゴールドの配色がデザインに使いやすい理由
ゴールドは色であり、同時にシグナルでもあります。デジタルのフラットなHEX表現(箔ではなくても)でも、価値や祝福、職人技を感じさせるため、わずかなアクセントでもレイアウト全体に高級感をもたらします。
また、ゴールドは幅広いニュートラルカラーとの相性が抜群です。クリーム色、チャコール、深いブラウン、クールなスレートと組み合わせることで、ゴールドが「黄色」にならず意図した色に見せられ、テキストの可読性も保てます。
最後に、ゴールドはスタイルを問わず柔軟に使えます。ブラックと合わせればドラマチックに、ピンクと合わせればロマンチックに、ティールやスレートとならモダンでUIやブランドシステムにも最適です。
ゴールド配色パレット20選|HEXコード付き
1)金色のアイボリー

HEX: #D4AF37 #F5F0E6 #3B2F2F #B08D57 #FFFFFF
雰囲気: 洗練、時代を超えた、祝福的
おすすめ用途: ウェディング用ステーショナリー、高級ロゴ、プレミアムパッケージ
洗練され祝福感のあるこの組み合わせは、アイボリー紙にキャンドルの光が反射するような柔らかなメタリックの輝きを感じさせます。クリーミーなホワイトと深いエスプレッソ色を基調にしてエレガントさを保ったゴールドパレット。ミニマルなブラックのタイポグラフィ、エンボス加工、繊細な大理石のディテールと合わせると上品な印象に。使い方のコツ:最も明るいゴールドは枠線や小さなアクセントに使用し、レイアウトが重くならないようにしましょう。
media.ioで生成した金色アイボリーの画像例
Media.ioは、ブラウザ上で動画、画像、音声の作成と編集ができるオンラインAIスタジオです。
2)アンティークブラス

HEX: #B08D57 #C9B37E #2F3E46 #E0D2B2 #6B4F3A
雰囲気:伝統的、落ち着き、手仕事感
おすすめ用途: クラフトスピリッツラベル、伝統ブランド、ブティックインテリア
伝統的で落ち着いたトーンは、アンティークの金具や木目、古い図書館の棚を思わせます。控えめな金属色は濃いブラウンと調和し、触感やストーリー性のあるブランディングに最適。オフホワイトの紙やスレートカラーでモダンなアップデートも可能。使い方のコツ:最も暗い色をタイプ(文字)に使い、ブラスカラーはスタンプや印章、小さなアイコン用に。
media.ioで生成したアンティークブラス画像例
3)日差しを浴びるマリーゴールド

HEX: #F2C14E #F7D67B #2D2A26 #FFF3D6 #D96C06
雰囲気:明るく、楽観的、エネルギッシュ
おすすめ用途:季節キャンペーン、フードブランド、ソーシャルグラフィックス
明るく楽観的な色合いは、午後の太陽が柑橘やサフランに降り注ぐような雰囲気。暖かいオレンジのアクセントはアクションや宣伝の見出しに効果的。チャコールテキストと広々としたクリームスペースで可読性も良好。使い方のコツ:鮮やかなオレンジはデザインごとに一つの主要要素に絞り、マリーゴールドを主役にしましょう。
media.ioで生成した日差しを浴びるマリーゴールドの画像例
4)シャンパンの輝き

HEX: #E8D7A8 #F7F1E3 #8A7F66 #C8B273 #2F2A24
雰囲気:柔らかく、軽やか、上品
おすすめ用途:ビューティーブランド、ミニマルなウェブサイト、イベントサイネージ
柔らかく上品な雰囲気で、シャンパンの泡や温かいシルクを思わせるパレット。穏やかなニュートラルカラーで落ち着いたレイアウトが作りやすく、プレミアム感も失われません。マットブラックアクセントや細いラインアイコンでモダンかつエディトリアルな仕上げに。使い方のコツ:深いブラウンは本文テキストに、淡い色は背景の大きなセクションに使ってコントラストを保ちましょう。
media.ioで生成したシャンパンの輝きの画像例
5)真夜中のゴールド

HEX: #C9A227 #0B0F14 #1F2933 #E6CF7A #4B3B2B
雰囲気:ドラマチック、洗練、ハイコントラスト
おすすめ用途:テックブランド、高級広告、シネマティックポスター
ドラマチックで洗練された印象は、真夜中の空に都市の光が輝くイメージ。鮮やかなメタリックがほぼブラックの上で際立つため、大胆な見出しや高級感あるヒーローセクションに最適。微細なグラデーションやグレインテクスチャと組み合わせると奥行きを演出。使い方のコツ:淡いゴールドはアイコンやディバイダー、数字ハイライトに少量使いましょう。
media.ioで生成した真夜中のゴールド画像例
6)王室のブロケード

HEX: #D1A954 #3F1D5A #1B1B1D #F3E2B9 #7A4E2D
雰囲気:豪華、大胆、王室風
おすすめ用途:高級ファッション、プレミアム招待状、ブランドキャンペーン
豪華で大胆、深いバイオレットはベルベットのカーテンと輝く金属糸を思わせます。ゴールドとパープルの組み合わせは、パープルを主役にしゴールドをジュエリーのようなアクセントにすると効果的。クリーミーなパーチメントカラーと合わせるとやわらかな移行や濃い影もリッチに。使い方のコツ:ゴールドは枠線やモノグラム、小さなオーナメントなど仕上げ用に。
media.ioで生成した王室のブロケード画像例
7)砂漠の砂丘ゴールド

HEX: #CAA24A #E7D3A8 #A67C52 #4A3F35 #F4EFE3
雰囲気:素朴、日焼け、穏やか
おすすめ用途:旅行ブランド、ナチュラルスキンケア、ライフスタイルブログ
素朴で落ち着きがある色合いは、日焼けした砂丘や織物、暖かいストーンを思わせます。サンディな中間色は背景のベースにしやすく、濃いブラウンはナビゲーションや見出しに構造を与えます。ナチュラルな写真やクレイテクスチャ、シンプルなサンセリフ体と組み合せるとオーガニックな印象。使い方のコツ:最も明るい色は余白に使い、ゴールドブラウンはボタンやハイライトの役割を持たせましょう。
media.ioで生成した砂漠の砂丘ゴールド画像例
8)ミニマルゴールドとホワイト

HEX: #D4AF37 #FFFFFF #F2F2F2 #1A1A1A #C7C7C7
雰囲気:クリーン、モダン、控えめ
おすすめ用途:UIシステム、ECサイト、プロダクトランディングページ
クリーンな控えめな印象は、ギャラリーの白い壁にメタリックなディテールが一点映えるイメージ。中立的なグレーカラーはプロフェッショナルな印象、暖かいアクセントは控えめだが確かなプレミアム感。大胆なブラックタイポグラフィや十分な余白でシャープなモダン仕上げに。使い方のコツ:ゴールドは主ボタンや重要バッジ、アクティブ状態だけに使い階層を保ちましょう。
media.ioで生成したミニマルゴールドとホワイト画像例
9)オリーブとゴールドアクセント

HEX: #D4AF37 #6B7B3A #3D4A2F #F1E7C8 #2B2B2B
雰囲気:ボタニカル、バランス、素朴な高級感
おすすめ用途:エコブランディング、ボタニカルラベル、ウェルネスパッケージ
ボタニカルでバランスの取れたトーンは、オリーブの葉と暖かく照らされたキッチン壁を思わせます。落ち着いたグリーンは自然な信頼感を、メタリックなアクセントは洗練された印象を補います。テクスチャ入り用紙やラインアートイラスト、柔らかいクリーム背景と合わせるとオーガニックな雰囲気。使い方のコツ:ゴールドはシールや箔押しなど小さなディテールで自然感を損なわないように。
media.ioを使用して生成されたオリーブとゴールドアクセントの画像例
10) ブラッシュゴールド・ロマンス

HEX: #D4AF37 #F6C1C7 #FBE9E7 #5B2C2F #B07A84
雰囲気:ロマンティック、やさしい、遊び心がある
おすすめ用途:ビューティー新商品、ブライダルイベント、SNSテンプレート
ロマンティックでやさしいこの配色は、バラの花びら、サテンリボン、暖かいキャンドルの輝きを思わせます。ブラッシュトーンはメタリックアクセントを和らげ、親しみやすくパーソナルなブランドに最適です。深いワイン色のテキストと合わせるとコントラストが生まれ、ダスティモーヴを加えると奥行きが増します。利用のコツ:メインの背景はブラッシュ、ゴールドは細いラインやアイコン、ハイライトに使いましょう。
media.ioを使用して生成されたブラッシュゴールドロマンスの画像例
11) ティール&ゴールド・モダン

HEX: #D4AF37 #0F7C7C #083C3C #E9E2CF #1A1F24
雰囲気:自信、現代的、シャープ
おすすめ用途:SaaSダッシュボード、フィンテックブランディング、ピッチデック
自信に満ちた現代的な雰囲気で、ティールは深い水のよう、メタリックのハイライトがクリーンです。ダークベースはデータUIに強いコントラストを与え、暖かいニュートラルで冷たさを防ぎます。細いグラフ、丸いカード、さりげないシャドウと合わせると洗練された製品に。利用のコツ:ティールを主役に、ゴールドは成功や優先バッジのみに使いましょう。
media.ioを使用して生成されたティール&ゴールド・モダンの画像例
12) コースタルゴールド&ブルー

HEX: #D4AF37 #1D4E89 #E3F2FD #2A2A2A #9BBBD4
雰囲気:爽やか、風通し良い、前向き
おすすめ用途:旅行キャンペーン、ホスピタリティ、イベントブランディング
爽やかで風を感じる配色は、海辺のブルーと朝日のような明るさを感じさせます。空色がレイアウトをオープンに保ち、深いブルーが見出しやロゴを支えます。クリーンな写真、ホワイトスペース、シンプルな幾何学模様と合わせて。利用のコツ:ゴールドは料金や日付、予約ボタンなどハイライトに使い、視線を誘導。
media.ioを使用して生成されたコースタルゴールド&ブルーの画像例
13) コーヒーゴールドの温かみ

HEX: #CAA24A #6F4E37 #2F241D #F3E6D0 #BFA27A
雰囲気:居心地が良い、リッチ、ウェルカミング
おすすめ用途:カフェブランディング、食品パッケージ、メニューデザイン
居心地よくリッチな配色は、焙煎豆、キャラメルクレマ、暖かいカフェの灯りを思わせます。クリーミーなベージュでブラウン系が重くなりすぎず、メニューやパッケージによく合います。クラフト紙風の質感、手描きアイコン、クリーンなセリフと合わせてプレミアムな印象に。利用のコツ:最も濃いブラウンをテキストに、ゴールドブラウンはスタンプやアクセントに使いましょう。
media.ioを使用して生成されたコーヒーゴールドの温かみ画像例
14) スレートゴールド・コーポレート

HEX: #D4AF37 #2F3E46 #CAD2C5 #52796F #0B1320
雰囲気:プロフェッショナル、堅実、モダン
おすすめ用途:コーポレートブランディング、年次報告書、B2Bウェブサイト
プロフェッショナルで堅実なトーンは、ブラッシュドメタルやスレートストーン、クリーンな文具を思わせます。ゴールドのカラースキームは、クールなスレートが土台、暖色アクセントで品質を演出します。整然としたグリッド、ゆとりある余白、落ち着いた写真と組み合わせて信頼感を。利用のコツ:ゴールドはセクション区切りや重要指標などに限定し、読みやすく静かな印象に。
media.ioを使用して生成されたスレートゴールド・コーポレート画像例
15) ラベンダーゴールド・ドリーム

HEX: #D4AF37 #CDB4DB #F3E8FF #4A3B5A #FFF7E6
雰囲気:夢のよう、柔らかい、クリエイティブ
おすすめ用途:クリエイティブスタジオ、ブティックスキンケア、ライフスタイルコンテンツ
夢見心地で柔らかな配色は、薄いラベンダーとやさしいゴールドのきらめき。淡いバイオレットは背景に使いやすく、深いプラムで可読性と上質さを演出。繊細なイラスト、丸みのある形、ライトなグラデーションと合わせて現代的ロマンスに。利用のコツ:クリーム色をメインキャンバスに、ラベンダーはパネルやカードに活用。
media.ioを使用して生成されたラベンダーゴールド・ドリームの画像例
16) エメラルドゴールド・ラグジュアリー

HEX: #D4AF37 #0B6E4F #083B2F #E8E0C8 #1A1A1A
雰囲気:ラグジュアリー、大胆、シネマティック
おすすめ用途:ジュエリーブランド、高級レストラン、ギフトパッケージ
ラグジュアリーで映画のようなエメラルドトーンは、深い宝石のカット面がライトに照らされた印象です。クリーミーなニュートラルがダークグリーンを親しみやすくし、メタリックアクセントが一瞬でプレミアムな印象を与えます。ブラックタイポグラフィー、細いパターン、ハイコントラストの製品写真と合わせて。利用のコツ:エメラルドを大きな面に使い、ゴールドはロゴやシール、オーナメントのトリムに。
media.ioを使用して生成されたエメラルドゴールド・ラグジュアリーの画像例
17) ラストゴールド・オータム

HEX: #CAA24A #B7410E #F2D2A9 #3A2B24 #8B5A2B
雰囲気:秋らしい、素朴、力強い
おすすめ用途:秋プロモーション、ハンドメイド商品、季節パッケージ
秋らしく力強い配色は、落ち葉、銅の鍋、スパイス市場の温かみをイメージさせます。ラスト(錆色)が全体を活気づけ、アースカラーのブラウンとよく合います。テクスチャ背景、セリフ体見出し、シンプルなラインイラストと組み合わせてハンドクラフト感を。利用のコツ:淡いピーチを余白に使い、ラストが強くなり過ぎないようにしましょう。
media.ioを使用して生成されたラストゴールド・オータムの画像例
18) ネオンゴールド・ナイトライフ

HEX: #FFD24A #111827 #FF2E88 #00D1FF #F3F4F6
雰囲気:エレクトリック、遊び心、高エネルギー
おすすめ用途:イベントポスター、クラブフライヤー、ユースブランドキャンペーン
エレクトリックで高エネルギーな配色は、ネオンサインが濡れたアスファルトに反射するような雰囲気。ホットピンクとシアンで瞬時に動きを生み、明るいゴールドがハイライトに。ダーク背景、太字のコンデンスタイプ、シンプルなシェイプで映えます。利用のコツ:テキストはほぼオフホワイト、ネオン色は強調やグラフィックアクセントに限定。
media.ioを使用して生成されたネオンゴールド・ナイトライフ画像例
19) モノクロームゴールド・メタルズ

HEX: #E6C86E #CAA24A #B08D57 #8A6F3A #F7F1E3
雰囲気:調和、温もり、トーナル
おすすめ用途:パターンデザイン、パッケージシステム、ブランドスタイルガイド
調和的かつトーナルな配色は、淡いシャンパンからアンティークブロンズまでのブラッシュドメタルのグラデーションのようです。コントラストが穏やかなので、パターンやボーダー、背景テクスチャに最適。強い可読性が必要ならダークなニュートラルをタイポグラフィーに併用。利用のコツ:隣り合う2色をほとんどの要素に、最も明るいクリームは余白として使いましょう。
media.ioを使用して生成されたモノクロームゴールド・メタルズ画像例
20) インクゴールド・エディトリアル

HEX: #D4AF37 #0F172A #334155 #E2E8F0 #F8FAFC
雰囲気:エディトリアル、シャープ、プレミアム
おすすめ用途:雑誌レイアウト、ブログテーマ、ポートフォリオサイト
エディトリアルでシャープなこの配色は、新鮮なインクと明るい用紙、繊細なメタリックルールが特徴です。クールなスレート系がモダンで読みやすく、暖色のアクセントがプレミアム感を追加。強い階層構造のタイポグラフィー、余裕のあるマージン、モノクロ写真と合わせて上質な印象に。利用のコツ:ゴールドは細い区切り線、引用マーク、ナビゲーションの小さなハイライトに使い高級感を維持。
media.ioを使用して生成されたインクゴールド・エディトリアルの画像例
ゴールドに合う色は?印象・用途別に紹介
ゴールドに合わせる色は、作りたい印象から選ぶと決めやすくなります。下のHEXコードはページ内の既存パレットから選んだ使用例です。
| 作りたい印象 | 合わせる色 | HEXコード例 | おすすめの用途 |
|---|---|---|---|
| 高級感・コントラスト | ブラック、チャコール | #C9A227、#0B0F14、#1F2933 | 広告、ポスター、ブランドロゴ |
| 柔らかさ・上品さ | アイボリー、シャンパン | #E8D7A8、#F7F1E3、#2F2A24 | 招待状、美容、イベント告知 |
| 華やかさ・落ち着き | エメラルド、深いティール | #D4AF37、#0B6E4F、#083B2F | ギフト包装、ジュエリー、飲食店 |
| 自然な温かみ | オリーブ、クリーム | #D4AF37、#6B7B3A、#F1E7C8 | ボタニカル商品、ウェルネス、食品 |
| モダン・知的 | ネイビー、スレート | #D4AF37、#0F172A、#334155 | Webサイト、レポート、ポートフォリオ |
日本のイベントや和風デザインに使える配色
和風の祝い事:えんじ・生成り・落ち着いたゴールドを組み合わせ、招待状やギフト包装に。
周年記念・表彰:ネイビー・アイボリー・ゴールドで、落ち着きと華やかさを両立。
和菓子や季節のギフト:深いグリーン・生成り・アンティークゴールドで、素材感を生かした印象に。
画面上の色と印刷物の色は同じ見え方にならない場合があります。HEXコードはデジタルデザインでの配色検討にご利用ください。
ゴールドカラーパレットをデザインに使う方法
Webサイトやアプリでは、ゴールドをボタンの塗り、バッジ、区切り線、アイコンなどのアクセントに使うと、視線を集めたい場所を示しやすくなります。広い面積に使う場合は、背景や文字の色とのバランスも確認しましょう。
文字色として使うときは、背景色とのコントラスト比を確認してください。たとえばCSSの色名「gold」にあたる#FFD700は、白背景とのコントラスト比が約1.40:1です。通常サイズの本文テキストには十分なコントラストを確保できないため、白背景では装飾や小さなアクセントとして使い、文字には背景と十分なコントラストがある色を選びます。WCAGの通常テキストの基準を満たすには、原則として4.5:1以上が目安です。
印刷物では、紙の種類、インキ、加工方法によってゴールドの見え方が変わります。金属感を加える方法には箔押しや金属インキなどがあります。画面上のHEXコードだけで仕上がりの色や光沢が決まるわけではないため、必要に応じて印刷会社に仕上がりを確認してください。
AIでゴールド配色のデザインイメージを作成
ブランドのムードボードやパッケージ案を検討するときは、ゴールド配色をポスター、ラベル、Web画面に当てはめたイメージを作成できます。色見本だけでは判断しにくい、背景や文字との組み合わせを視覚的に確認するのに役立ちます。
上記のパレットから1つを選び、デザイン形式(招待状、Webヒーロー、ラベル)、背景素材(紙、布、ダークマット)、タイポグラフィームード(セリフ、モダンサンセリフ)を決めて説明してください。構成は「クリーンさ」を意識し、ゴールドのアクセントが自然に見えるようにしましょう。
生成画像はデザインの雰囲気や色の使い方を確認するためのイメージ例です。画像内の色が掲載したHEXコードと完全に一致するとは限らないため、正確な色値は上のカラーパレットを参照してください。背景色、ゴールドの面積、レイアウトなどを一度に一つずつ調整すると、方向性を比較しやすくなります。
ゴールドカラーパレットのよくある質問
-
ゴールドに合う色は何ですか?
高級感を出すならブラックやネイビー、柔らかく仕上げるならアイボリーやベージュ、華やかさを加えるならエメラルドや深いティールが合わせやすい色です。ゴールドはアクセントに使い、ベースカラーとのバランスを取りましょう。 -
ゴールドのカラーコードは何ですか?
ゴールド系カラーには複数のHEXコードがあります。#D4AF37はデザインで使われるゴールド系カラーの一例です。CSSの色名「gold」は#FFD700を指します。色の印象は周囲の色や表示環境によって変わるため、用途に合わせて選んでください。 -
ゴールドが画面上で黄色く見えるのはなぜですか?
単色のゴールドは、周囲の色や質感がないと黄色に近く見えることがあります。ブラック、ネイビー、深いブラウンなどを組み合わせ、明暗の差や素材感を加えると、ゴールドらしい印象を表現しやすくなります。 -
白い背景にゴールドの文字を使えますか?
色の組み合わせによっては文字が読みづらくなるため、実際の背景色とのコントラスト比を確認してください。#FFD700と白のコントラスト比は約1.40:1です。白背景ではゴールドを装飾やボタンのアクセントに使い、本文には十分なコントラストがある文字色を選びましょう。 -
和風デザインにはどんなゴールド配色が合いますか?
えんじ・生成り・落ち着いたゴールドは、祝い事やギフトのデザインに使いやすい組み合わせです。ネイビーや深いグリーンを合わせると、用途に応じて落ち着いた印象も加えられます。 -
デジタルデザインで金属のようなゴールドを表現できますか?
グラデーションやハイライトで金属感を演出できますが、単色のHEXコードだけで実物の光沢を再現することはできません。印刷で金属感を加える方法には箔押しや金属インキなどがあり、仕上がりは紙や印刷条件によって異なります。
次へ: グレーグリーン配色パレット

