グレーブラウンはグレーの安定感とブラウンの心地よさを融合した暖かいニュートラルカラーです。モダンラスティックなインテリア、上質なブランディング、落ち着きと信頼感が必要なUIシステムの定番チョイスです。
以下に、HEXコード付きのグレーブラウンの配色アイデア20選以上と、アクセントの組み合わせやAIを使ったパレットビジュアル生成の実用的なヒントをご紹介します。
この記事について
グレーブラウンのパレットがよく機能する理由
グレーブラウンのトーン（しばしばトープ、マッシュルーム、モカに近い）は色のスペクトルの「安全な中間」に位置し、印刷、ウェブ、インテリアなどさまざまな用途に柔軟です。過度に黄色やオレンジにならず、温もりを加えます。
彩度を抑えたグレーブラウンの組み合わせは、タイポグラフィや写真、素材への注目を保ちます。そのため、上質なパッケージング、ミニマルブランドシステム、モダンダッシュボードによく使われます。
また、紙の繊維、木材、石、リネン、セラミックなどの質感とも美しく調和します。シンプルなパレットでも、仕上げやライティングが活かされることで豊かに感じられます。
20種類以上のグレーブラウン配色アイデア（HEXコード付き）
1）マッシュルームモカ
HEX： #E7DED6 #C8BBAF #A5968A #6E625B #2F2C2A
ムード： 落ち着き、心地よさ、安定感
おすすめ用途： 暖かいミニマルインテリアやライフスタイル写真
柔らかい窓辺のリネンブランケットのように落ち着きと心地よさがあり、重たく感じさせない暖かい色調です。インテリアのムードボード、カフェのビジュアル、テクスチャが重要な落ち着いたライフスタイル編集に最適。マットブラックの金具とクリーミーホワイトを組み合わせるとモダンな印象に。使用のコツ：一番暗い色は文字やトリムなどの小さなアクセントに使い、大きな壁には使わないこと。
media.io で生成されたマッシュルームモカの画像例
Media.ioは、ブラウザ上で動画・画像・音声の作成と編集ができるオンラインAIスタジオです。
2）小石とシダー
HEX： #F1ECE6 #D2C7BD #B0A299 #7C6D63 #3A332F
ムード： ナチュラル、安定感、モダンラスティック
おすすめ用途： アウトドアブランド、木工ロゴ、パッケージングシステム
川辺の小石とシダー樹皮のように自然で安定感があり、控えめながら自信を感じます。ヴィンテージ感が強くならず、温もりを与えたいブランドアイデンティティに最適。オフホワイトの紙の質感や控えめなグリーンアクセントを加えてフレッシュさを。使用のコツ：印刷テストが重要なので、未塗装紙では中間色をやや明るめに調整しましょう。
media.io で生成された小石とシダーの画像例
3）トープスタジオUI
HEX： #F7F4EF #D9D1C8 #B7ADA4 #867A71 #2B2725
ムード： 静か、集中、上質
おすすめ用途： ダッシュボードUI、設定画面、SaaSオンボーディング
片付いたスタジオデスクのように静かで集中した雰囲気で、装飾よりもコンテンツに注目が集まります。最も明るい色は面に、中間のトープはディバイダーに、黒に近い色はテキストに使えばアクセシブルなコントラストを確保できます。アクセントは埃っぽいブルーやセージなど一色だけ控えめに使うのがおすすめ。使用のコツ：一番暗い色は見出しやプライマリーボタン専用にして、本文全体には使わないこと。
media.io で生成されたトープスタジオUIの画像例
4）デザートフォグポスター
HEX： #EFE6DD #CDBFB3 #9E8E84 #6A5E57 #1E1B19
ムード： ムーディー、映画的、控えめ
おすすめ用途： イベントポスター、ギャラリープロモーション、ミニマルアートプリント
夕暮れの砂漠の霞のようにムーディーで映画的、冷たくなりすぎないアートなパレット。柔らかな背景と、はっきりしたダークテキストを使いたいタイポグラフィックポスターに最適。グレインテクスチャと単一の暖色のスポットライト形状を加えると動きが出ます。使用のコツ：背景はわずかに暖かめにして、黒がきつく見えないようにしましょう。
media.io で生成されたデザートフォグポスターの画像例
5）ココアオーツラテ
HEX： #F4EBDD #E0D1BF #BFA78F #8A6F5D #3B2E28
ムード： 甘さ、温かみ、職人感
おすすめ用途： コーヒーパッケージ、ベーカリーラベル、メニューブランディング
ココアラテの泡のように甘く親しみやすいトーンで、手作り感や食欲をそそる見た目です。複数SKUのパッケージ使いに最適。クラフト紙の質感やミニマルなラインアイコンと合わせて現代的な印象に。使用のコツ：ココアカラーはコールアウトやバッジに活用し、明るいオーツは軽やかさを保ちましょう。
media.io で生成されたココアオーツラテの画像例
6）ストーンウォッシュデニム
HEX： #E9E2DB #C7BEB7 #9B948E #6D6661 #2A2726
ムード： クール、カジュアル、エディトリアル
おすすめ用途： ファッションルックブックや商品カタログレイアウト
ストーンウォッシュ生地のようにクールでカジュアル、控えめなコントラストでさりげなくモダン。写真が主役でタイポグラフィは抑えめにしたいエディトリアルペーシやルックブックに最適。リンクやセクション見出し用にフェードインディゴのアクセントを1色使うのもおすすめ。使用のコツ：白地を多めに残してミッドグレーがページを重くしないようにしましょう。
media.io で生成されたストーンウォッシュデニムの画像例
7）ウォールナッツセージガーデン
HEX： #F2EEE6 #D0C6BA #9A8B7D #6C6258 #6F7A63
ムード： 土っぽさ、癒し、ボタニカル
おすすめ用途： ウェルネスブランド、ナチュラルスキンケア、ボタニカルイラスト
ハーブの下の庭の土のようにアーシーで癒し効果があり、静かなグリーンが温もりとバランスをとっています。ウェルネスブランドやキャンドルラベル、落ち着いたSNSテンプレートに最適。柔らかなクリーム色の背景やさりげないリーフモチーフを加えることで自然らしさが引き立ちます。使用のコツ：セージカラーは唯一の彩度として使い、他は上品なニュートラルでまとめましょう。
media.io で生成されたウォールナッツセージガーデンの画像例
8）スモークドクレイキッチン
HEX： #F6EFE7 #D6C8BC #A88F81 #7A6357 #3A2E29
ムード： 家庭的、暖かさ、手触り感
おすすめ用途： キッチンリフォームコンセプトやホームデコカタログ
スモークドクレイ製クックウェアのように家庭的で暖かく、空間に暮らしやすさを感じさせるトーン。キャビネットやタイル、木目が主役のカタログ写真におすすめです。ブラッシュドブラスやクリーミーストーンを加えるとベージュ一色になり過ぎず、立体感が生まれます。使用のコツ：最も暗い色は取手など小さいパーツに繰り返し使い、空間を統一しましょう。
media.io で生成されたスモークドクレイキッチンの画像例
9）アッシュブラウンミニマルロゴ
HEX： #F8F6F2 #DAD4CD #B0A9A2 #7B736D #1F1D1C
ムード： クリーン、洗練、控えめ
おすすめ用途： プロフェッショナルサービスのブランディングとミニマルロゴ
レタープレスのように清潔で洗練された雰囲気。対比は控えめでありながらプロフェッショナルです。コンサルタントや建築士、静かな権威を求めるスタジオ向け。シャープな幾何学系サンセリフと温かな白背景を組み合わせて、全体をクリーンに保ちましょう。使用のコツ：ロゴは主にダークにし、明るいカラーは文房具やウェブ部分で使ってください。
media.ioで生成されたアッシュブラウンのミニマルロゴの画像例
10）リバーバンクニュートラル
HEX： #EEE9E3 #CFC6BE #A79E96 #756D66 #3B3633
ムード： バランスが良く、安定感があり、頼れる
おすすめ用途： 建築業、不動産、地域ビジネス向けウェブサイト
川沿いの小道のようにバランスと信頼感があり、馴染み深く落ち着きます。読みにくさや実用的なトーンが必要なサービス系ウェブサイトに最適です。リンクには控えめな青、区切りには暖かいクリームを合わせましょう。使用のコツ：本文は最も明るい背景で保ち、長いページでもコントラストを維持してください。
media.ioで生成されたリバーバンクニュートラルの画像例
11）コーヒーハウスメニューボード
HEX： #F3EDE5 #D9CDBF #B09A84 #7A5F4C #2D221B
ムード： フレンドリー、クラフト感、親しみやすい
おすすめ用途： メニューデザイン、カフェ看板、プロモーションフライヤー
エスプレッソの香りに包まれたカフェのように、暖色のブラウンがハンドクラフト感を強調します。読みやすさが重要なメニューボードや季節のフライヤー、ロイヤルティカードのデザインにおすすめ。シンプルなアイコンとクリーム色のベースを合わせて価格や見出しを明確に。使用のコツ：最も暗いトーンは見出しや重要な価格のみに限定し、視認性を高めましょう。
media.ioで生成されたコーヒーハウスメニューボードの画像例
12）ウォームコンクリートワークスペース
HEX： #F5F2EE #D7D0C8 #AFA79F #7B746D #2C2927
ムード： 生産的、モダン、落ち着き
おすすめ用途：ワークスペースのインテリアや生産性ブランドビジュアル
朝日を浴びるコンクリートのように生産的で落ち着きがあり、モダンながら冷たくなりすぎません。コワーキング空間やデスクセット、生産性コンテンツ向けにニュートラルな基盤としてぴったりです。淡い木材やブラックメタルと、単色の控えめなティールアクセントを合わせてクリーンな印象を。使用のコツ：中間グレーは影や深み用に使い、無駄な色追加は避けましょう。
media.ioで生成されたウォームコンクリートワークスペースの画像例
13）ラスティックキャビンイブニング
HEX： #EDE4DB #C6B7A8 #9C8574 #6B5549 #221A16
ムード： 居心地良く、ラスティック、親密感
おすすめ用途：旅行広告、ロッジウェブサイト、ホスピタリティブランディング
夜のキャビンランプのように居心地良く親密で、ダークブラウンが深みと暖かさを出します。ロッジサイトや旅行プロモ、快適さを前面に出すホスピタリティブランドにおすすめ。ソフトな写真、控えめなグラデーション、クリーンなセリフ書体と併用し、ラスティックなストーリーを強調。使用のコツ：背景は明るめ、深い色はフッターやナビゲーションのアンカーに。
media.ioで生成されたラスティックキャビンイブニングの画像例
14）セピアフィルムグレイン
HEX： #F2E7DA #D3C2AE #B08E6F #7B5A45 #2B1E17
ムード： ノスタルジック、シネマティック、暖かみ
おすすめ用途： フォトプリセット、ヴィンテージポスター、ストーリーブックページ
セピアフィルムグレインのようにノスタルジックでシネマティック。これらのトーンはストーリー性と温かみを演出します。長文のストーリーページやフォトプリセット、レトロポスターに最適。クリームの余白や控えめなノイズテクスチャと組み合わせると、コスチュームっぽくなりません。使用のコツ：中間セピアを低い透明度でオーバーレイし、写真にまとまりを。
media.ioで生成されたセピアフィルムグレインの画像例
15）クレイポッタリーマーケット
HEX： #F7EFE6 #E2D1C2 #C2A189 #8A6A55 #3A2A22
ムード： ハンドメイド、土の質感、職人技
おすすめ用途： 陶器パッケージ、クラフトフェア、商品広告
日差しを浴びたクレイのようにハンドメイド感、土の暖かみ、素材の触感を感じさせます。陶器ブランドやクラフトフェア、テクスチャが価値となる商品写真にぴったり。シンプルなサンセリフ書体と余白を多く取ってプレミアム感を。使用のコツ：暖かな中間色をブランドカラーに、深いブラウンはスタンプや封印用に。
media.ioで生成されたクレイポッタリーマーケットの画像例
16）フォギーパイントレイル（霧の松林の小道）
HEX： #ECE7E1 #C8C1BA #9B948D #6C6560 #4E5A4D
ムード： 新鮮、アウトドア、安定感
おすすめ用途： ハイキングブランド、アウトドアニュースレター、ネイチャーコンテンツ
霧の中の松林のトレイルのように新鮮かつ安定感があり、控えめなグリーンでニュートラルなトーンが単調になりません。アウトドア系ニュースレターやギアランディングページ、自然が主役のソーシャルテンプレートに最適。クリーンなホワイトと、印象的な写真スタイルを組み合わせて空気感を。使用のコツ：松グリーンはインタラクティブ要素に、ニュートラルはレイアウトに。
media.ioで生成されたフォギーパイントレイルの画像例
17）ビスケット＆チャコールダッシュボード
HEX： #F6F1EA #D8CFC4 #B3A89D #5A5450 #1B1A1A
ムード： シャープ、モダン、高コントラスト
おすすめ用途： データ重視UI、フィンテックアプリ、管理パネル
温かな紙の上のチャコールのようにシャープでモダン。コントラストが高く読みやすい印象です。チャートやテーブル、密度の高いナビが必要なデータ系UIに最適。一つの色だけをアクセントに選ぶことでインターフェイスが落ち着きます。使用のコツ：チャコールをテキストやアイコンに、パネルはビスケットの範囲で保ち、眩しさを抑えましょう。
media.ioで生成されたビスケット＆チャコールダッシュボード画像例
18）アンティークペーパーインビテーション
HEX： #F8F1E5 #E2D3C2 #C1A78C #8A6F58 #2C231D
ムード： ロマンティック、ヴィンテージ、エレガント
おすすめ用途： ウェディング招待状、文房具、正式なお知らせ
アンティークな文具のようにロマンティックでヴィンテージ感があり、暖かいニュートラルが時代を超えて柔らかい印象です。紙の質感が引き立つウェディング招待やイベント文具にぴったり。クラシックなセリフ書体、繊細なボーダー、控えめな装飾でエレガントに。使用のコツ：背景は最も明るい色、最も暗いトーンは名前や主要なディテールにのみ使用。
media.ioで生成されたアンティークペーパーインビテーション画像例
19）モカローズアクセント
HEX： #F5EEE8 #D8C9C2 #A88C83 #6E5A54 #B77B7F
ムード： ソフト、モダン、さりげない遊び心
おすすめ用途： ビューティーブランディング、ブティックソーシャル、クリエイターキット
モカにローズの渦が混じったような柔らかくモダンな印象。アクセントが個性を加えつつ、ニュートラルベースを崩しません。ビューティーブランドやメディアキット、温かみと親しみやすさが必要なテンプレートにおすすめ。クリーンなサンセリフ書体と余白で洗練さを。使用のコツ：ローズはタグやボタン、価格マーカーなどハイライト用途のみにし、特別感を保ちましょう。
media.ioで生成されたモカローズアクセント画像例
20）ブロンズミストEコマース
HEX： #F4F2EE #D3CCC4 #AFA59C #7A7068 #5E4A3F
ムード： 洗練、信頼感、高級感
おすすめ用途： EC UI、商品リスト、チェックアウトフロー
霧の中のブロンズのように洗練され、信頼感と高級感があります。EC UIのベースとして、商品写真の色再現やCTAの明瞭さが求められる場面に最適。主要アクションにははっきりしたアクセントを、セカンダリーボタンは控えめに。使用のコツ：ホバーや無効状態のテストを早めに。微妙なニュートラルは明確なコントラストが無いとぼやけてしまうことがあります。
media.ioで生成されたブロンズミストEコマース画像例
21）シンダー＆サンドストーン
HEX： #EFE8DF #D1C6BA #A59386 #6A5B52 #242120
ムード： 建築的、堅実、確信
おすすめ用途： 建築ポートフォリオ、建設系プレゼンテーション
シンダーとサンドストーンの組み合わせのように構造的で自信を感じさせるトーン。ポートフォリオや提案書、明快さと抑制が求められるプレゼンテンプレートに最適。細いルール線やグリッド、コンクリートや木材など材料の写真と組み合わせを。使用のコツ：最も暗いトーンはセクション区切りやタイトルに使い、遠くから見てもスライドがくっきり。
media.ioで生成されたシンダー＆サンドストーン画像例
22）ハーベストダスクペアリング
HEX： #F3E9DF #D6C1B0 #B0886E #7B5A46 #3B2A21
ムード： 暖かみ、季節感、親しみやすさ
おすすめ用途： 秋のキャンペーン、フードフォト、季節のランディングページ
秋の黄昏のような暖かさと季節感、オレンジ色に偏らず親しみやすいパレットです。グレーブラウンの組み合わせは食品コンテンツや秋のプロモーション、居心地の良いメールヘッダーなどにぴったり。麻や木、柔らかな影など自然素材と組み合わせて雰囲気を統一。使用のコツ：最も深い色はホワイト書体と組み合わせてヒーローバナーやリボンに。
media.ioで生成されたハーベストダスクペアリング画像例
グレーブラウンと相性が良い色は？
グレーブラウンは、温かいホワイトやクリーム、オートミール色と自然に組み合わさり、ソフトでまとまりのあるニュートラルレンジを作ります。レイアウトが居心地よく、軽やかに感じられる最も簡単な方法です。
コントラストを加えたい場合は、チャコールや黒に近い色をタイポグラフィや細い区切り線に使うと、読みやすさを保ちつつ純粋な黒の強さを避けられます。インテリアではマットブラックの金具が特に効果的です。
アクセント色を一つだけ加えたいときは、控えめなグリーン（セージやパイン）、くすみブルー、控えめなローズ/パステルピンクなどを選ぶと、個性を加えつつベースの安定感を維持できます。
グレーブラウンのカラーパレットを実際のデザインで使う方法
色見本ではなく用途から始めましょう：明るいベース（背景）、中間色（カードやセクション）、より暗いニュートラル（ボーダー）、黒に近い色（テキスト）を選び、CTAやハイライトのためのアクセントカラーを一つ加えてください。
ブランディングでは、グレーブラウンのトーンは素材を活かすときに映えます―未加工の紙、エンボス加工、クラフト質感、ナチュラルな写真。色を加えず、テクスチャや光で立体感を出しましょう。
UIの場合、アクセシビリティは早めにテストしましょう：本文は最も明るい色調に配置し、最も暗いトーンは見出し・アイコン・主要ナビゲーション用に使うことで、インターフェイスが重くならないようにします。
AIでグレーブラウンパレットのビジュアルを作成
ムードボード、ブランドキット、UIコンセプトを作成する場合、いくつか一貫した画像を生成することで、雰囲気を素早く検証できます。AIを使えば、「リネンミニマル」「モダンラスティック」「プレミアムダッシュボード」などのスタイルを数分で試すことができます。
パレットのキーワード（マッシュルーム、トープ、モカ、サンドストーン）と明確なシーン説明を使い、照明（ソフトな昼間の光vs.映画のような夕暮れ）を変更して用途に合わせて繰り返し調整しましょう。
ビジュアルが理想通りになったら、同じプロンプト構造を複数の出力に再利用することで、広告・ランディングページ・SNSテンプレートのスタイルを一定に保ちましょう。
グレーブラウンカラーパレット よくある質問
-
グレーブラウンとは何ですか（トープと同じですか）？
グレーブラウンは茶色にグレーの色味を加えた広い暖かみのあるニュートラル系です。トープはグレーブラウンの一部（やや冷たい印象が多い）ですが、グレーブラウンは色味によってモカ、マッシュルーム、クレイ寄りになることもあります。 -
グレーブラウンパレットが「泥っぽく」見えないようにするには？
色の明るさ（バリュー）の差を広げ（明るいベース＋暗いアンカーを使う）、余計な色を足さずに質感を加え、アクセントは１色だけ（セージ、ダスティブルー、くすみローズなど）にします。明確なコントラストなしで中間色同士を横並びにするのは避けましょう。 -
グレーブラウンに最適なアクセントカラーは？
控えめなグリーン（セージやパイン）が自然な組み合わせですが、ダスティブルーは現代的で落ち着いたコントラストを加えます。柔らかく遊び心ある印象にしたい場合は、控えめなパステルピンクやローズがアクセントとして効果的です。 -
グレーブラウンはウェブサイトやアプリUIに向いていますか？
はい。グレーブラウンは落ち着いた高級感あるUIの土台に最適です。背景は最も明るい色、テキストはチャコールやブラック寄りでアクセシビリティを確保し、主要アクションには鮮やかなアクセントを加えることでCTAが埋もれません。 -
インテリアにおすすめのグレーブラウンは？
「マッシュルーム」「オート」「スモークドクレイ」などは壁やテキスタイル、キャビネットに適しており、昼光や照明下で暖かく感じられます。最も濃いブラウンはトリムや金具、フレームなど小さなアクセントに使い、大きな面積には避けましょう。 -
グレーブラウンパレットは印刷に向いていますか？
可能ですが、特に中間色は未加工用紙では暗くなりやすいので、必ず試し刷りをし、少し明るめの調整を検討し、リッチなブラックは控えめに使ってデザインの鮮明さを保ちましょう。 -
自分のグレーブラウンパレットに合う画像を生成する方法は？
照明（ソフトな昼光、暖かい夕方）、素材（リネン、オーク、石、クラフト紙）、構図（ミニマル、クリーン背景）を指定した一貫したプロンプトテンプレートを使いましょう。同じスタイルキーワードを維持しながらバリエーションを生成すれば、一貫した結果が得られます。
