イエロー×ブラウンのカラー配色20選とHEXコード一覧

イエローブラウンのカラーパレットは、陽の光を浴びたゴールドとココア、木のようなニュートラルを調和させ、温かく信頼感があり、安定した雰囲気を演出します。

ラスティックなブランディングからモダンなUIや居心地の良いインテリアまで、これらのアーシートーンはバランスがとりやすく、読みやすさも保ち、クリーンなタイポグラフィや明るい背景と組み合わせると自然に招き入れる印象を与えます。

イエローブラウンのパレットが優れている理由

イエローブラウン系の色味は親しみやすさを感じさせます。それは小麦、ハチミツ、革、オーク、陶器、コーヒーといった、私たちがすでに信頼している自然素材の色を反映しているからです。そのため、デザインはデジタル空間でも“本物”で親しみやすく感じられます。

また、自然と階層（ヒエラルキー）を作れるのも魅力です。明るいゴールデンクリームは柔らかな背景として、ミドルキャラメルはUI要素や図形、ダークブラウンは見出しや本文のコントラストとして機能します。

最も重要なのは、イエローブラウンパレットは柔軟性が高いこと。加えるニュートラル、余白、アクセントカラーによって、ラスティックで手作り感のある、上質でエディトリアルな、またはクリーンでモダンな印象にもできます。

20種類以上のイエローブラウンカラーパレット（HEXコード付き）

1）ゴールデンハーベスト

HEX： #F2C14E #D9A441 #B97A2B #7A4B23 #2E1B0E

ムード： 陽だまり、落ち着き、ラスティック

おすすめ用途： ファーム・トゥ・テーブルレストランのブランディング

太陽に照らされた畑や、使い込まれた木の質感を思わせる、明るい麦のトーンと焙煎の効いた深いブラウンが特徴。温もりが本物であるべきレストランのロゴやメニュー、ポイントカードなどに最適です。オフホワイトの紙質やシンプルなスラブセリフ書体と合わせれば、アートな雰囲気を保ちつつ手作り感を損ねません。使い方のコツ：最も濃いブラウンを文字に使うことで、イエローがよりクリーンに読みやすくなります。

media.ioで生成したゴールデンハーベストの画像例

Media.io

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

今すぐ無料で試す

2）デザートハニー

HEX： #F6D37A #E8B85C #C98C3A #9B5E2E #4B2B1A

ムード： 暖かさ、軽やかさ、日差し感

おすすめ用途： ウェルネス製品パッケージ

柔らかな砂漠の光とハニーの輝きが、甘すぎない穏やかで前向きな気分を演出。特にローションや石鹸、ナチュラルサプリメント等のミニマルなパッケージにぴったりです。クリアな白ラベルと小さな黒アクセントを加えると、メリハリがついて高級感が増します。使い方のコツ：中間のキャラメル色は、メインアイコンに使うと淡い背景でも視認性を保てます。

media.ioで生成したデザートハニーの画像例

3）メープルラテ

HEX： #F4E2B8 #E6C07B #C68B59 #8A5A3B #3B2418

ムード： 居心地の良さ、クリーミー、親しみやすさ

おすすめ用途： カフェのメニューやサイネージ

心地よい湯気、メープルの甘さ、香ばしい仕上げが、ゆったりしたカフェの雰囲気を生み出します。このイエローブラウンパレットは、フード写真を邪魔せずメニューやチョークボード風サイン・スタンプカードに最適。チャコールの文字やセージグリーンのアクセントを加えると、モダンな印象も演出できます。使い方のコツ：ライトクリームを背景に使うと重くなりすぎず、セピア調を防げます。

media.ioで生成したメープルラテの画像例

4）サンベイクドクレイ

HEX： #F3C76A #D9A25A #B8743B #8A4D2E #4A2B1F

ムード： アーシー、手作り感、大胆さ

おすすめ用途： 陶器職人の製品広告

焼けた陶器や炉の暖かさが、手触り感と手作りらしさを演出。陶器、レザー製品、木工製品の広告に相性抜群です。マットな質感やシンプルなレイアウトで色合いを主役にしましょう。使い方のコツ：オークル色は縁やリムのアクセントに使い、全面背景には避けるのがポイント。

media.ioで生成したサンベイクドクレイの画像例

5）アンティークブラス

HEX： #E7D28B #C9B26C #A58A3A #6E5A2A #2F2A14

ムード： ヴィンテージ、上品、ムーディー

おすすめ用途： ブティックホテルの案内表示

経年した金属と控えめなランプライトが、クラシックで洗練された雰囲気に。ホテルのサイン、エレベータープレート、ディレクトリなど洗練が求められる場所に最適です。ディープグリーンやインクネイビーを合わせると、さらにリッチさと上質感が増します。使い方のコツ：一番濃い色はアイコンや矢印用に残すと、案内情報がクリアに。

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

6）ウィートフィールドニュートラル

HEX： #F7E9C6 #E8D5A6 #CBB17C #A07D52 #5C3F2A

ムード： ソフト、ナチュラル、落ち着き

おすすめ用途： ミニマルなライフスタイルブログのUI

やわらかな小麦色と控えめなタンが心を落ち着かせ、クリーンでオーガニックな空気感を持ちます。ライフスタイルブログやニュースレター、レシピアーカイブなど「読みやすさ」重視のレイアウトにおすすめ。クールグレーや十分なホワイトスペースと合わせれば黄ばみ感を防げます。使い方のコツ：中間タンはサブボタンに、ダークブラウンはリンクや見出しに使いましょう。

media.ioで生成したウィートフィールドニュートラルの画像例

7）アンバーキャビン

HEX： #F2B84B #D98C2B #B86A2A #7A4A2A #2B1A14

ムード： キャンプファイヤー、居心地の良さ、冒険心

おすすめ用途： アウトドアギアLP

焚き火のようなアンバーと使い込んだレザーのブラウンが、冒険の香りをプラスしつつもコージーなキャビン感を演出。アウトドアブランドに暖かみや力強さを持たせたい時にぴったり。スレートグレーのUI要素やクリアな白文字と組み合わせると、優れた階層性が表現できます。使い方のコツ：明るいアンバーはバッジや評価、コールアウトなどのアクセント使いにしてプレミアム感を。

media.ioで生成したアンバーキャビンの画像例

8）サフランサドル

HEX： #F5B941 #E19A2D #BF6B2C #8B4A2D #3A2417

ムード： 大胆、スポーティ、自信

おすすめ用途： イベントポスターのデザイン

鮮やかなサフランの躍動感とサドルブラウンの組み合わせによりスポーティで自信に満ちた印象に。地元のマーケットや音楽イベント、ポップアップ告知のポスター・フライヤーに最適です。クリーンなサンセリフ書体やたっぷりの余白で色の強さをおさえるのがコツ。使い方のコツ：一番明るいイエローは見出しや日付へ、本文には使いすぎないようにしましょう。

media.ioで生成したサフランサドルの画像例

9）ハニードウォルナット

HEX： #F6D78B #D9B06A #B7803F #7B532C #3A2415

ムード： 安心感、クラシック、高級感

おすすめ用途： 家具カタログのエディトリアル

ハニーの輝きとウォルナットの深みが、静かで上質なクラシック感をもたらします。家具のカタログやルックブック、ショールームのパンフレットなどのエディトリアルに最適。ウォームグレーの写真枠やミニマルな罫線と組み合わせればページが軽やかに。使い方のコツ：キャプションにはブラックではなく中間のブラウンを使うと優しく高級感ある仕上がりになります。

media.ioで生成されたハチミツクルミの画像例

10) キャニオンペーパー

HEX： #F3E4C7 #E1C7A3 #C29B6A #8B6A44 #3D2A1C

ムード：落ち着いた、アースカラー、時代を超えて

おすすめ用途：ウェディング招待状セット

落ち着いたキャニオンニュートラルは、手作りの紙や日差しで色褪せた砂岩のような雰囲気があります。ウェディング招待状やセーブ・ザ・デート、当日の自然で控えめなステーショナリーにぴったりです。ダスティローズやユーカリグリーンをアクセントに合わせてロマンチックさをプラス。使用のコツ：最も明るいクリームを印刷用地として使うと、繊細なスクリプトも読みやすくなります。

media.ioで生成されたキャニオンペーパーの画像例

11) マリーゴールドモカ

HEX： #F2A93B #D9862B #A85E2A #6E3C2A #2B1B18

ムード：スパイシー、エネルギッシュ、リッチ

おすすめ用途：コーヒーブランドのソーシャル広告

スパイシーなマリーゴールドとモカの深みがリッチでエネルギッシュな印象を与え、強いメッセージにぴったり。コーヒープロモーションや季節キャンペーン、温かみを見せたいソーシャル広告に活用。クリームのタイポグラフィブロックや深いティールをアクセントにすると、モダンなコントラストを演出できます。使用のコツ：背景を暗めにして、マリーゴールドをステッカーや値札、ハイライトとして活用しましょう。

media.ioで生成されたマリーゴールドモカの画像例

12) ラスティックリネン

HEX： #FAF0D9 #E9D8B5 #C9AA7E #9A6F4C #4A2E20

ムード：明るい、オーガニック、家庭的

おすすめ用途：キッチン・ダイニングインテリアのムードボード

明るいリネントーンと柔らかなブラウンは、風の通る暮らしのキッチンやナチュラルなテキスタイルを思わせます。インテリアムードボードやダイニング空間、朝食コーナー、温かみのあるモダンファームハウスルームによく合います。マットブラックの金具や淡いオーク材を合わせると現代的な印象に。使用のコツ：中間のタンをラグや木のアクセントに繰り返すと部屋の統一感が生まれます。

media.ioで生成されたラスティックリネンの画像例

13) バーニッシュドオーカー

HEX： #EFCB6A #D8A94A #B27A2C #7A4F22 #2E1C0E

ムード：伝統、暖かい、質感

おすすめ用途：博物館展示グラフィック

磨かれたオーカーと深いブラウンは、古地図やアーカイブ印刷物のような雰囲気があります。展示パネルやラベル、解説看板でヘリテージ感を演出したいときに最適です。オフホワイト背景や抑制されたラインアイコンと組み合わせると明快さを保てます。使用のコツ：最も暗い色を本文テキストに使うと、ギャラリー照明下でもコントラストが保てます。

media.ioで生成されたバーニッシュドオーカーの画像例

14) バタードトフィー

HEX： #F7D38B #E7B96A #C98A4A #9A5E33 #3B2316

ムード：甘い、フレンドリー、懐かしい

おすすめ用途：ベーカリー用パッケージ＆ラベル

バタードトフィーの温かみはフレンドリーで懐かしい印象を与え、新鮮なペストリーが紙袋に入っているような雰囲気です。これらのイエローブラウンはベーカリーラベルやクッキー缶、季節のギフトボックスにぴったり。クリーミーな背景とクランベリー赤のアクセントを取り入れると食欲をそそります。使用のコツ：最も濃いブラウンを細い線や原材料表示に使うと、テキストがテクスチャー紙でも鮮明に保てます。

media.ioで生成されたバタードトフィーの画像例

15) デューンスパイス

HEX： #F2D2A0 #D9B585 #B88C5E #8A613E #3F2A1D

ムード：穏やか、日差しを浴びた、モダン

おすすめ用途：スキンケアECサイトUI

日差しで温められた砂丘のニュートラルは、穏やかでモダンな雰囲気で、単調なベージュにならないほどのスパイスがあります。スキンケアショップやブティックECで信頼と柔らかさを重視したいときにぴったり。テキストにはクールなブラック、アクションには淡いブラッシュをアクセントに。使用のコツ：商品カードはホワイトかごく明るい色にして、画像が色付きに見えないようにしましょう。

media.ioで生成されたデューンスパイスの画像例

16) ヴィンテージレジャー

HEX： #F5E7C8 #D8C6A2 #B39B72 #7A6349 #3A2F25

ムード：アカデミック、アーカイブ、控えめ

おすすめ用途：ブックカバー＆背表紙デザイン

色褪せたパーチメントとインクブラウンは、古い帳簿や図書館の棚、静かな書斎を思わせます。ブックカバーや背表紙、シリーズブランドにアーカイブ感が必要な時に最適。深いフォレストアクセントやテクスチャーグレインを合わせると触感のある仕上げに。使用のコツ：最も暗いトーンをタイトルタイポグラフィに使い、その他は控えめなブロックとして背景に配置しましょう。

media.ioで生成されたヴィンテージレジャーの画像例

17) オータムカートン

HEX： #F1C65A #D9A54A #B87C3A #8A5832 #3A241A

ムード：遊び心、秋らしい、大胆

おすすめ用途：サブスクボックスデザイン

秋の明るさと頑丈なブラウンで遊び心のある季節ボックスが表現できます。サブスクリプションパッケージやインサートカード、箱開けグラフィックスで階層をしっかりつけたい時に。余白とコバルトなど単一の対比アクセントでモダンな印象。使用のコツ：中間ブラウンでアウトラインやダイラインを描き、箱構造をクリーンに見せましょう。

media.ioで生成されたオータムカートンの画像例

18) プレイリーピクニック

HEX： #F7E2A6 #E9C46A #C99A4A #A36B3C #4A2D1C

ムード：陽気、健やか、晴れやか

おすすめ用途：ファミリーフェスチラフライヤー

プレイリーの陽気な日差しとキャラメルブラウンは、健やかでウェルカムな雰囲気。ファミリーフェスティバルのフライヤーやコミュニティ市場のサイネージ、学校イベント素材にぴったり。親しみやすいラウンドサンズやシンプルなイラストアイコンを組み合わせるとアクセシブルな印象に。使用のコツ：本文テキストは暗めに、最も明るいイエローは日付や場所などのコールアウトに使いましょう。

media.ioで生成されたプレイリーピクニックの画像例

19) セピアサンライズ

HEX： #F4D7A6 #D9B07A #B8864A #7A5A3A #2E231B

ムード：柔らかい、ノスタルジック、シネマティック

おすすめ用途：フォトポートフォリオWebテーマ

セピアの温かみと日の出の柔らかさがノスタルジックで映画的な雰囲気を作り、ポートレートや旅行ストーリーを引き立てます。写真ポートフォリオテーマにぴったりで、UIを優しく仕上げたいときに最適です。クリーンなホワイトと抑えめなティールアクセントで現代的な印象。使用のコツ：背景には最も明るい色を、フィルターは控えめにして写真の本来の色を保ちましょう。

media.ioで生成されたセピアサンライズの画像例

20) ココアサンビーム

HEX： #F5C76A #D99A4A #B86A3A #6E3C2A #24150F

ムード：リッチ、ドラマティック、誘うような

おすすめ用途：チョコレート商品広告

ゴールドのサンビームがココアの深みに切り込むイメージはリッチでドラマティック。チョコレート広告や季節ギフトキャンペーン、高級菓子パッケージにも最適です。マットブラックやクリームを合わせてコントラストを高め、ハイライトを際立たせましょう。使用のコツ：ゴールドトーンを商品エッジにリムライトとして配置し、残りは深くベルベットのように仕上げましょう。

media.ioで生成されたココアサンビームの画像例

イエローブラウンと相性の良い色は？

イエローブラウンは、温かいホワイトやアイボリー、柔らかなストーングレーなどシャープなニュートラルカラーと組み合わせると、美しく軽やかなパレットになります。タイポグラフィには深いエスプレッソやブラックがコントラストを保ちつつ、調和します。

モダンなコントラストには、ティールやスレートブルー、インクネイビー、ユーカリグリーンなどクールなアクセントを試してください。これらの色はウォームカラーの対極に位置し、ゴールドトーンをいっそう明るく意図的に見せます。

よりソフトでライフスタイルに合う仕上げが欲しいなら、ダスティローズやブラッシュ、クレイテラコッタアクセントを追加してください。アースカラーの仲間でありながら、優しいハイライトカラーになります。

イエローブラウンカラーパレットを実際のデザインで使うには

まず役割を割り当てましょう：背景には最も明るいクリーム、面やカードには中間タン/キャラメル、最も暗いブラウンは見出しやアイコン、本文テキスト用に。そうすることで読みやすく、構造の整ったパレットになります。

「セピアフィルター」っぽい仕上げにならないよう、余白と最低１つのクールなバランス（ティールやブルーグレーなど）を導入してください。UIでは商品や画像エリアをニュートラルに保ち、写真が黄色みを帯びないようにしましょう。

印刷やパッケージではテクスチャーを活かしてください：未加工紙、さりげない粒感、マット仕上げ、ミニマルなラインワークでイエローブラウンをプレミアムで触感的に見せ、平坦さを避けられます。

AIでイエローブラウンのパレットビジュアルを作成

ブランドイメージのモックアップがすぐ必要ですか？好きなイエローブラウン範囲でポスターやパッケージ、UI、ムードボードを生成するには、対象を説明し希望するパレット要素をプロンプトに加えるだけ。

HEXコードを参照し、プロンプトには「暖かいニュートラル照明」「マット紙テクスチャ」「ミニマルなレイアウト」などを追加することで、最終画像のゴールド感やココア感を調整できます。

好きな仕上がりが見つかったら反復しましょう：同じプロンプト構造でアクセントカラー（ティール、ネイビー、ブラッシュなど）を1つだけ変えて、広告やLP、SNS投稿でコントラストを検証できます。

次へ： ブルー・グリーン・パープルのカラーパレット