ブラウンとグリーンのカラーパレットアイデア（20選＋HEX）

ブラウンとグリーンのカラーパレットは、温かみのある土っぽさと自然な新鮮さのバランスを保ち、信頼しやすく、見ていて心地よい印象を与えます。

森林をイメージしたブランディングから、居心地の良いインテリアやモダンなUIまで、これらの組み合わせは紙媒体やデジタルデザインにおいて幅広く使うことができます。

なぜブラウングリーンのパレットがよく機能するのか

ブラウンとグリーンは「現実世界」の色です。木、土、葉、ハーブ、石、織物など。自然とのつながりを感じさせるため、デザインに安心感・落ち着き・信頼感をもたらします。特にエコ、ウェルネス、食品、ライフスタイル系ブランドにおすすめです。

見た目としては、グリーンが構造（ナビゲーション、ヘッダー、主要UI）を担い、ブラウンが温かみや質感をプラスします。両者を組み合わせることでコントラストが生まれ、レイアウトの読みやすさや高級感が向上します。

どちらも落ち着いた色合いや深い色味があり、全体のテーマを変えずに、エアリー＆モダン（セージ＋リネン）から映画的＆ムーディー（パイン＋バーク）まで雰囲気を調整できます。

20以上のブラウングリーンカラーパレット（HEXコード付き）アイデア

1) フォレストウォルナット

HEX： #2F3E2E #556B2F #8A9A5B #7B4B2A #E7DDC8

雰囲気： 落ち着きとアウトドア感

おすすめ用途： サステナブルなブランディングとパッケージ

落ち着きがありアウトドア感もあるこのパレットは、日陰の松林、苔むした小道、温かなクルミの殻を連想させます。深いグリーンが信頼感を与え、ウォルナットブラウンが職人の技や伝統を感じさせます。リネン調の色味はラベルやヘッダー、成分リストの余白に使いましょう。無塗装の紙と金属のアクセント（真鍮・銅）を合わせれば高級感あるエコ仕上げになります。

media.ioで生成されたフォレストウォルナットの画像例

Media.io

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

無料で今すぐお試し

2) 苔色テラコッタ

HEX： #3C4A3E #6E7F49 #A3B18A #9B5A3C #F2E9DE

雰囲気： 暖かみと職人感覚

おすすめ用途： カフェメニューや接客業ブランディング

暖かみと職人感覚に満ちた色合いは、太陽の光が注ぐ温室や素焼きの鉢、摘みたてハーブを思わせます。テラコッタは食欲と親しみやすさを、苔やセージグリーンが落ち着きとオーガニック感を保ちます。クリーム色のニュートラルは、メニュー背景に使うことで暖色照明下でも読みやすく。テラコッタ見出し、ダークグリーン価格・重要なアクション、がポイントです。

media.ioで生成された苔色テラコッタの画像例

3) シダーメドウ

HEX： #2E5339 #4F6F52 #B8C7A3 #8B5E3B #FAF4E8

雰囲気： 穏やかで家庭的

おすすめ用途： 居心地のいいインテリア・雑貨

穏やかで家庭的なこの色合いは、シダー材のキャビネット、葉が生い茂る観葉植物、エアリーなリネンカーテンをイメージさせます。メドウグリーンは壁やファブリックによく合い、シダーブラウンが部屋に温もりをもたらします。クリーム色は天井や縁取りに使うことで重くなりすぎずに済みます。中間グリーンをラグとアートワークで2回使うと意図的な空間演出になります。

media.ioで生成されたシダーメドウの画像例

4) オリーブエスプレッソ

HEX： #283618 #606C38 #A1A86F #3B2F2F #EDE7D9

雰囲気： 大胆で洗練された印象

おすすめ用途： 高級コーヒーパッケージや広告

大胆で洗練された雰囲気があり、オリーブの葉とダークウッドに包まれたエスプレッソバーを思わせます。ほぼ黒のブラウンが高級感を演出し、オリーブやカーキが親しみやすさを残します。ライトベージュは成分パネルや抽出ノートに使うと視認性を保てます。最も暗い色はロゴや印章など小さな部分にのみ使い、レイアウトを暗くしすぎないのがコツです。

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

5) セージリネン

HEX： #4A5D4E #90A183 #C9D2B8 #8C6A4A #FFF7EA

雰囲気： 柔らかくエアリーな雰囲気

おすすめ用途： ウェルネス系のWebサイトやブログ

柔らかくエアリーな印象で、スパタオル、蒸したハーブ、静かな朝の光を連想させます。セージや淡いグリーンが心を落ち着かせるベースを作り、暖色ブラウンが冷たさを防ぎます。リネン調のほぼ白をメイン背景に使うことでクリーンでエディトリアルな印象に。ボタンは濃いセージ、ブラウンはアイコンや区切りなどのアクセントだけに使うのがポイントです。

media.ioで生成されたセージリネンの画像例

6) パインバークコントラスト

HEX： #1F2D1F #3E5C3B #7C8F6A #5A3E2B #D9D2C3

雰囲気： 力強さと自信

おすすめ用途： アウトドアギアブランドや商品ページ

力強さと自信を感じさせる色合いは、松の針葉とバルクの質感を表現します。ほぼ黒のグリーンは見出しやバッジに最適で、バークブラウンが暖かみを加えながら野暮ったくなりません。淡い石色のニュートラルは商品写真の余白に。アクセントは中間グリーンで統一すると行動喚起が自然でネオンっぽくなりません。

media.ioで生成されたパインバークコントラストの画像例

7) ファーンクレイスタジオ

HEX： #314D3C #6B8F71 #BFD8BD #A66A4C #F5EFE6

雰囲気： クリエイティブで手作り感

おすすめ用途： 陶芸スタジオのブランディングやSNS投稿

クリエイティブで手作り感のある雰囲気は、シダの影と焼きたての粘土がある陶芸スタジオを思わせます。クレイブラウンはスタンプやマーキングに最適、ファーングリーンが全体の印象を柔らかくします。淡いニュートラルは投稿用のテンプレートに使うことで、作品や写真が主役になります。ロゴは最も濃いグリーンと粘土色の2色使いで職人感を即演出できます。

media.ioで生成されたファーンクレイスタジオの画像例

8) アボカドココアポップ

HEX： #2D3A2E #7A8F2A #C6D77A #6B4A2D #FFF1D6

雰囲気： 明るくフレッシュ

おすすめ用途： ヘルシースナックのパッケージ

明るくフレッシュな印象は、カットしたアボカドとココアニブがキッチンカウンターに並んでいるイメージです。元気なグリーンが活力を、ココアブラウンが食べやすさと安心感をプラス。クリーム色の背景は栄養情報やアイコンを引き立てます。最も明るいグリーンは味のバッジなど主役要素だけに使うと意図的でうるさくならず、おすすめです。

media.ioで生成されたアボカドココアポップの画像例

9) ウッドランドミニマル

HEX： #223027 #5C735F #B7C4B0 #7C5C46 #F7F4ED

雰囲気： 静かでモダン

おすすめ用途： ミニマルなブランドアイデンティティやロゴ

静かでモダンなミックスは、落ち着いた森と柔らかい緑を備えた清潔なキャビンの美学を示唆しています。ダークエバーグリーンはロゴをアンカーし、暖かいブラウンはヴィンテージを感じることなく人間的なタッチを追加します。オフホワイトを主なネガティブスペースとして使用して、プレミアムで最小限の外観を実現します。ヒント：アイデンティティを鮮明に保つために、1つのアクセント(ブラウンまたはミッドグリーン)を選択し、残りのアクセントをサポートします。

media.ioを使用して生成された最小林地のイメージ例

10)ヴィンテージハーブショップ

HEX：#3A4B3F#748C69#D2C7A8#8A5A3A#FBF1DF

雰囲気：懐かしく歓迎される

おすすめ用途：薬局のラベルとギフトセット

懐かしくて歓迎的な、古い薬局の引き出し、乾燥したハーブ、紙のタグをもたらします。ほこりの多い緑は信頼できるように感じ、暖かい茶色はその手札付きの魅力を追加します。ペーパーベースカラーとしてタンとクリームを使用して、ヴィンテージの雰囲気を高めます。ヒント：最も濃い緑の微妙なラインイラストを追加して、まとまりのある古い世界の仕上がりを実現します。

media.ioを使用して生成されたヴィンテージハーブショップのイメージ例

11）雨道

HEX：#1E2A24#4C6A5A#93A89B#6A4E3B#DDE3DD

雰囲気：ムーディーで自然な

おすすめ用途：旅行ブログと屋外社説

ムーディーで自然で、濡れた葉、霧の多い常緑、雨の後の湿った土のように感じます。涼しい緑は雰囲気を作り出し、土のような茶色はパレットを人間的で接地的に保ちます。ミストグレーグリーンを記事のレイアウトや写真のキャプションの柔らかい背景として使用します。ヒント：リンクとCTAをミディアムグリーンにしておき、落ち着いたトーンを破らずに目立つようにします。

media.ioを使用して生成された雨のトレイルの画像例

12)砂漠のジュニパー

HEX：#2C3B33#6B7D5A#C7C6A2#9A6B3F#F3E8D7

雰囲気：日焼けして穏やかな

おすすめ用途：植物のプリントと自然のイラスト

日焼けした穏やかな、砂のトレイルと暖かい峡谷の光に対してジュニパーの低木を示唆しています。ミュートグリーンは乾燥してエレガントに感じますが、オークロブラウンは砂漠の暖かさをもたらします。ペーパーの背景に淡い砂のトーンを使用して、アートワークの風通しを保ちます。ヒント：厳しい黒い線を避け、自然な感触を保つために、最も濃い緑でイラストを輪郭にします。

media.ioを使用して生成された砂漠のジュニパーの画像例

13)抹茶革

HEX：#2B3A2B#7E9B5A#D5E2B6#6C4B36#F8F2E4

雰囲気：新鮮でプレミアムな

おすすめ用途：ファッションルックブックとブティックブランディング

フレッシュでプレミアムなこれらのトーンは、抹茶フォームとよく磨耗したレザーを組み合わせたように感じます。明るいグリーンはレイアウトを明るくし、レザーブラウンは贅沢で触覚的なノートを追加します。クリームをページベースとして使用して、ルックブックを清潔でハイエンドに保ちます。ヒント：エレガンスを維持するために、セクションタイトルなどの小さなタイポグラフィック瞬間に最も濃い緑を予約してください。

media.ioを使用して生成された抹茶革の画像例

14)ガーデンストーン

HEX：#2A3F33#5F7A63#AAB8A0#7A5A44#E8E2D6

雰囲気：バランスの取れた時代を超越した

おすすめ用途：造園ウェブサイトとパンフレット

バランスが取れた時代を超越した、トリミングされた生け垣、石舗装、豊かな土壌に似ています。緑はプロフェッショナルで信頼できるもので、暖かい茶色は親しみやすい暖かさを追加します。パンフレットの背景や長い形式のテキストブロックには、ライトストーンニュートラルを使用します。ヒント：ミュートグリーンに薄いルールまたはセクションディバイダーを追加して、レイアウトを硬く感じることなく構造化したままにします。

media.ioを使用して生成された庭石のイメージ例

15)秋の木立

HEX：#243428#5C7B4B#B7B57E#8C5A2B#F4E8D8

雰囲気：季節的で居心地の良い

おすすめ用途：秋のイベントポスターとプロモーション

季節的で居心地の良い、葉が回り、空気が冷める木立の午後遅くの光を呼び起こします。暖かい茶色はトーストされた樹皮のように読み、オリーブグリーンはオレンジすぎるのではなく、スキームを自然に保ちます。大きな背景領域に淡いクリームを使用して、ポスターを遠くで読みやすく保ちます。ヒント：最も暗いトーンで見出しを作り、温かい茶色で日付を強調表示して迅速にスキャンします。

media.ioを使用して生成された秋の木立の画像例

16)植物学的社説

HEX：#1F3328#557A5F#C2D3BE#7D5538#FFF6E9

雰囲気：優雅で落ち着いた

おすすめ用途：雑誌の広報と編集デザイン

エレガントで落ち着いた、クリーミーな紙の植物インクのスケッチのように読まれます。深い緑は洗練された見出しに最適で、茶色は引用符やキャプションに暖かさを加えます。プリントのようなベースには淡いクリームを使用し、微妙なセクションブロックとしてライトグリーンを使用します。ヒント：タイポグラフィがヒーローのままであるように、画像をわずかに飽和させたままにしてください。

media.ioを使用して生成された植物編集のイメージ例

17)居心地の良いキャビンナイト

HEX：#17231D#3F5A4A#7E8F83#5B3B2E#D7D0C6

雰囲気：親密で気分が悪い

おすすめ用途：本の表紙と映画のポスター

親密でムーディーな、夕暮れの小屋のように感じます。中に薪ストーブが光っています。深いグリーンブラックが映画的なトーンを設定し、ブラウンは暖かさとストーリーのヒントを追加します。タイトルには淡いグレーベージュを使用して、暗い背景で読みやすいままにします。ヒント：グレインまたは微妙なテクスチャのオーバーレイを導入して、デザインを乱雑にすることなく夜間の雰囲気を高めます。

media.ioを使用して生成された居心地の良いキャビンナイトのイメージ例

18)新鮮な市場看板

HEX：#24402F#4F7C4A#A8C686#7A4F2A#FFF3D9

雰囲気：生き生きと健康的な

おすすめ用途：ファーマーズマーケットの看板とラベル

活気があり、健康的で、積み重ねられた農産物の箱、緑豊かな野菜、木製の屋台を思い出します。明るい緑はエネルギッシュで新鮮に感じますが、暖かい茶色は市場で作られた信頼性を追加します。クリーミーなイエローを背景に使用して、屋外の光の下でサイネージが高いコントラストを維持します。ヒント：大胆でシンプルなタイプを保ち、原産地や価格などの二次情報にはライトグリーンを使用します。

media.ioを使用して生成された新鮮な市場サイネージの画像例

19)土のような子供たちの教室

HEX：#2E3D33#6A8A5E#CFE3C2#8B6A4E#FFF6E1

雰囲気：フレンドリーで接地のある

おすすめ用途：教室のポスターと学習用印刷可能

フレンドリーで接地があり、植物、クラフトペーパー、落ち着いたルーチンを備えた自然をテーマにした学習コーナーのように感じます。緑は素材を落ち着かせ、暖かい茶色は心地よいストーリーブックの感触を追加します。子供にとって高い読みやすさを維持するために、ワークシートにライトクリームを使用してください。ヒント：見出しにはミッドグリーンに固執し、視覚的な疲労を避けるためにキーワードにのみ暗いトーンを使用します。

media.ioを使用して生成された土のような子供たちの教室のイメージ例

20)モダンエコウイ

HEX：#20352A#4E7A5A#A9C7B5#6E4E3A#F6F1E8

雰囲気：清潔で信頼できる

おすすめ用途：持続可能性の角度を備えたフィンテックダッシュボード

清潔で信頼できる、自然なトーンで柔らかくなったモダンなダッシュボードのように、責任ある成長を示唆しています。深いグリーンはナビゲーションやチャートに適しており、暖かいブラウンは派手に感じない独特のアクセントを追加します。オフホワイトをメインキャンバスとして使用して、データを高密度に保ちますが読みやすくします。ヒント：アラート、ハイライト、または選択した状態に控えめに茶色を適用して、インターフェースが落ち着いてプロフェッショナルな状態を維持します。

media.ioを使用して生成された現代のeco uiのイメージ例

21)オークとユーカリ

HEX：#2B3A33#5E806B#B9D0C3#7B5A3C#EFE7DB

雰囲気：新鮮で自然な

おすすめ用途：結婚式の招待状と文房具

新鮮で自然な、オーク調の招待スイートにユーカリの小枝が詰め込まれたような感じがします。柔らかいグリーンはパステルになることなくロマンチックに読み、オークブラウンはクラシックで接地されたタッチを追加します。紙の色として温かいニュートラルを使用して、上昇した触覚的な外観を実現します。ヒント：テキストを最も暗いトーンで印刷し、モノグラムや境界線などの小さな栄えのためにミッドグリーンを保ちます。

media.ioを使用して生成されたオーク材とユーカリの画像例

ブラウンとグリーンに合う色は？

温かいニュートラル(クリーム、リネン、サンド、ストーン)は、茶色緑色のパレットを軽く感じ、UI、メニュー、ロングフォームレイアウトの読みやすさを向上させます。また、製品写真がより自然に見え、カラーキャストが少なく見えるのにも役立ちます。

アクセントの場合は、真鍮/銅、ミュートテラコッタ、または柔らかいマスタードを試して、オーガニックな雰囲気を壊さずにエネルギーを追加してください。より涼しくモダンな仕上がりが必要な場合は、純粋な黒の代わりに霧のようなグレーグリーンまたは深い木炭を追加してください。

より強いコントラストが必要な場合は、タイプや小さなバッジにブラックに近いパインまたはエスプレッソのトーンを使用し、より明るいグリーンを1つのヒーロー要素(CTA、ラベルストライプ、またはキーデータポイント)に限定します。

実際のデザインでブラウングリーンのカラーパレットを使う方法

ブランディングでは、主なシステム(ロゴマーク、ナビゲーション、パッケージングベース)を緑にリードさせ、シール、境界線、アイコン、またはセカンダリタイポグラフィの触覚アクセントとして茶色を使用します。これはアイデンティティを自然に保ちますが、あまりにも素朴ではありません。

インテリアでは、2つの表面(テキスタイルアートワークまたはキャビネット装飾)に1つのミッドグリーンを繰り返し、木茶色の要素で部屋を固定します。軽いクリームトリムまたは天井は、スキームが風通しの良い状態を維持するのに役立ちます。

印刷には、オフホワイト紙を選択し、高飽和グリーンを避けてください。少しミュートなトーンは、よりプレミアムで「細工された」ように見えます。金属が必要な場合は、真鍮は特にクルミとオリーブとよくペアリングします。

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

コンセプトを提案する場合、モックアップとパレットビジュアルは、特にパッケージ、メニュー、ポスター、UI画面の場合、利害関係者が気分をすぐに「見る」のに役立ちます。

Media.ioのテキストからイメージへの移行を使用すると、上記のようなプロンプトを使用してブランド内の例(ラベル、ダッシュボード、招待状、ポスター)を生成し、マテリアル、照明、レイアウトを交換することで迅速に反復できます。

これらの茶色の緑のパレットの1つから始めて、ユースケースを選択し、いくつかのバリエーションを生成して、最も自然に見えるコントラストと階層を見つけます。

次へ： 赤のカラーパレット