ブラウンとターコイズのおすすめ配色20選｜カラーコードと活用ポイント

ブラウンとターコイズのカラーパレットは、大地のぬくもりと清涼感のある水のようなアクセントを融合します。そのため、同時に安心感と新鮮さを感じさせるため、ブランディングにもインテリアにも活用できるのです。

下記には、すぐに使えるブラウン＆ターコイズのパレットアイデア（HEXコード付き）と、ウェブレイアウトやパッケージ、部屋のスタイリングでの活用方法の実用的なヒントを紹介します。

なぜブラウン×ターコイズのパレットがこんなにマッチするのか

ブラウンは親しみやすさ、安定感、自然な「素材」（木、革、石）の感触を、ターコイズは透明感とエネルギー（水、ガラス、空）を与えます。ふたつが合わさることで、きつすぎたり流行りすぎることなく、調和のとれたコントラストが生まれます。

この組み合わせはヒエラルキーも強調します。ブラウンはタイポグラフィや基盤に最適、ターコイズはボタンや強調、注目させたい要素を自然と引きつける力があります。

どちらの色もエスプレッソから砂色、ディープティールからシーグラスまで多彩なトーンが存在するので、ミニマルなUIから重厚なインテリアまで幅広くブラウン×ターコイズの組み合わせはスケールできます。

20種以上のブラウン×ターコイズ配色アイデア（HEXコード付き）

1）デザートオアシス

HEX： #6B4F3A #A67C52 #D8C3A5 #2CA6A4 #0B4F4E

雰囲気： 日差しを浴びた、爽やか、落ち着き

おすすめ用途： リゾートブランディング、旅行パンフレット、ホスピタリティ系ウェブサイト

太陽で温まった砂と涼やかなプールサイドが思い浮かび、大地の快適さと水の清潔感をバランス良く感じさせます。見出しには濃いブラウン、ボタンや重要なアイコンにはダークなティールを使いましょう。クリーミーなベージュでレイアウトの重さを防ぎ、見やすさを保てます。余白をしっかりとり、各セクションごとに１点明るいターコイズを利かせると、洗練されたリゾートのリズムが生まれます。

media.io で生成したデザートオアシスの画像例

Media.io

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

今すぐ無料で試す

2）カッパーラグーン

HEX： #7A3E2B #B86B3E #F2E3D0 #3BB7B3 #0E6A68

雰囲気： 手作り感、居心地良さ、モダン

おすすめ用途： コーヒーのパッケージ、クラフト商品、商品広告

ローストの温もりに明るいラグーンの色味が調和し、銅製の調理器具とタイル貼りのバーのような雰囲気です。パッケージにはカッパーブラウンをメイン、ターコイズはシールやストライプ、ラベル縁として使います。柔らかいクリーム色で文字の可読性と高級感を。ヒエラルキーを分かりやすくするには、一番暗いティールを小さな文字やバーコードに限定し、意図的な印象にしましょう。

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

3）ウォールナットタイド

HEX： #4A2F24 #8B5E3C #CDB79E #1FA9A2 #0A6A66

雰囲気： シック、海岸風、洗練

おすすめ用途： リビングルームスタイリング、ブティックホテルのインテリア、ムードボード

深みのあるウォールナットトーンと涼しげな潮水ティールは、雨の浜辺に流れ着いた流木のよう。濃いブラウンで部屋の基調を作り、ティールはファブリックやアートで控えめに。タンやベージュを壁やソファの基本色にすると、コントラストが柔らかくなります。ヒント：ブラウンはマット、ティールは控えめな光沢で仕上げると、重たくならず奥行きが出ます。

media.io で生成したウォールナットタイドの画像例

4）クレイ＆シーグラス

HEX： #8A5A44 #C08B6A #EFE2D4 #6CC7C3 #1F7E7A

雰囲気： 穏やか、清潔感、スパのよう

おすすめ用途： ウェルネスアプリ、スパ系ウェブサイト、予約UI

柔らかなクレイとシーグラスティールの組み合わせは、優しく洗い流されたような穏やかなデジタル体験を提供します。最も淡いクリーム色をキャンバスに、ナビやラベルにはクレイで優しさを演出。ティールは進捗や確認メッセージ向けに使うと蛍光っぽさがなく◎。アイコンは細線で、ティールは1色だけをメインにするとゴチャつきません。

media.io で生成したクレイ＆シーグラスの画像例

5）キャニオンプールパーティ

HEX： #5C3A2E #D29A6A #F7E6D4 #00A9A5 #006B68

雰囲気： ポップ、陽気、エネルギッシュ

おすすめ用途： サマーイベントポスター、プールパーティ、フェスチラシ

明るいターコイズが、日差しで温まった渓谷のブラウンに映え、石の上に干されたタオルのような爽快さです。タイトルや日付はターコイズで目を引きましょう。クリーミーなピーチや明るいタンで勢いを和らげ、親しみやすいレイアウトに。ヒント：濃いティールのシンプルな幾何学枠を加えて、ポスターに抑揚を持たせます。

media.io で生成したキャニオンプールパーティの画像例

6）アンティークマップハーバー

HEX： #6A4B3A #B08A6B #E8D7C6 #3CAAA6 #134D4B

雰囲気： ヴィンテージ、知的、ワールドワイド

おすすめ用途： 編集デザイン、旅行雑誌、ストーリーテリングのレイアウト

風合いのある紙のブラウンに港の水のティールで、古地図に現代のインクで書き込みしたようなイメージ。ミッドトーンのタンでセクション見出しや引用を、最も濃いティールは本文アクセントや罫線に使います。淡いパーチメントで読みやすさとやわかさもプラス。ヒント：セリフ体のタイポグラフィと細いティールラインを組み合わせ、懐かしい雰囲気を持たせつつ構造的に。

media.io で生成したアンティークマップハーバーの画像例

7）ココアミントスタジオ

HEX： #4E3327 #9A6B4C #EAD8C7 #53C0B8 #0B6B66

雰囲気： クリエイティブ、モダン、自信

おすすめ用途： エージェンシーブランディング、ロゴシステム、ポートフォリオサイト

ベルベットのようなココアと新鮮なミントティールで、クラフト感とデジタルなシャープさを両立したスタジオの印象です。タイポグラフィはブラウンで統一、ターコイズはハイライトやリンク、マイクロインタラクションに使用。淡いニュートラルはケーススタディやグリッドの背景に最適。ヒント：ターコイズは最も重要なCTAだけに使うと、ブランドの高級感がキープできます。

media.io で生成したココアミントスタジオの画像例

8）リバーストーンキッチン

HEX： #6D4B3B #B38462 #F1E2D3 #2FB1AD #0D5B58

雰囲気： 家庭的、清潔感、高級感

おすすめ用途： キッチンリフォーム案、キャビネット選定、壁タイルのプラン

リバーストーンのブラウンにパリッとしたターコイズで、温かみのある木のキッチンと光沢タイルのアクセント壁を思わせます。中間のブラウンは収納や床材に、ティールはタイルやスツール、小型家電などで差し色に。クリーミーニュートラルがカウンターや壁を明るくタイムレスに演出。ヒント：ティールは2カ所以上（例：タイルとファブリック）で繰り返すと「デザインされた印象」を与えられます。

media.io で生成したリバーストーンキッチンの画像例

9）モカリーフ

HEX： #5A3A2B #A87454 #EEDCCB #1DB2AA #0A4F4C

雰囲気： シャープ、テクノロジー、暖かさ

おすすめ用途： ECサイトUI、決済フロー、商品ページ

ダークモカとリーフティールで、速さと信頼感を感じさせる自信の配色。背景は淡いニュートラル、見出しや本文主役は最も暗いブラウンで可読性を最大化。ターコイズは価格やトグル、サクセス系で使うと、どこがクリックできるかが明確。ヒント：同時に２色のティールを１つのコンポーネントには使わず、モジュールごとに１色選んでUIをシャープに保ちましょう。

media.io で生成されたモカリーフの画像例

10) ラスティック ティール ウェディング

HEX： #704A3A #C19A7A #FFF1E4 #4ABBB5 #1C6C68

雰囲気： ロマンティック、ラスティック、エアリー

おすすめ用途： 招待状、セーブザデート、式典サイン

ラスティックな木目調と柔らかなティールは、フレッシュなグリーンとリネンで飾られた納屋会場のような雰囲気。クリームカラーを用紙のベースに、名前やタイポグラフィはブラウンでまとめてクラシック感を演出。ティールはモノグラムや小さな花柄や枠線に使うと美しい。コツ：ティールはアクセントとして使用し、テキストの多くはブラウンでまとめると、落ち着きのある読みやすい招待状セットになります。

media.io で生成されたラスティックティールウェディングの画像例

11) シエナ サーフボード

HEX： #7B4B34 #D08A5A #F4E5D6 #19B4AE #0B5E5B

雰囲気： スポーティ、冒険的、サニー

おすすめ用途： スポーツウェア広告、アウトドアブランド、グッズ展開

ホットなシエナと鮮やかなターコイズが、サンライトを浴びるボードや海の飛沫のようなビーチアスレチックな雰囲気をもたらします。濃いティールはロゴ、明るいティールは「限定」や「新色」などのコールアウトに最適。明るいニュートラルで余白を設けると、商品が際立ちます。コツ：太めのサンセリフ体とカラーブロックを合わせて、現代的でパフォーマンス感のある印象に保ちましょう。

media.io で生成されたシエナサーフボードの画像例

12) フォレスト クリーク レジャー

HEX： #3F2A20 #845C45 #DCC7B6 #2CA8A2 #0F4B49

雰囲気： 信頼感、安定、洗練

おすすめ用途： ファイナンスダッシュボード、分析ツール、SaaS UI

深いバークブラウンとクリークティールは、安定感と静かな高級感をもたらします。このようなブラウン×ティール配色は、コントラストが必要でも強すぎない印象にしたいダッシュボードに最適。ダークブラウンをメインテキストやナビに使い、ティールはデータのハイライトや選択状態に。コツ：グラフは大半ニュートラルでまとめ、主要指標だけティールにするとインサイトがひと目でわかります。

media.io で生成されたフォレストクリークレジャーの画像例

13) テラコッタ アクアリウム

HEX： #6E3F2C #B86E4A #F3E1D3 #63C9C3 #1C7C78

雰囲気： 明るい、穏やか、ファミリーフレンドリー

おすすめ用途： キッズルームのデコ、知育アート、遊び心あるイラスト

親しみやすいテラコッタの暖かさとポップなターコイズは、日差しの入るプレイルームの水族館ポスターのよう。明るいピーチニュートラルをベースにすれば、ティールも鮮やか過ぎず上品に。濃いティールはアウトラインやタイトルにぴったりで、絵が遠くからでも見やすい。コツ：テラコッタを小さなサンゴや文字に繰り返し使い、全体に一体感。

media.io で生成されたテラコッタアクアリウムの画像例

14) エスプレッソ シーサイド

HEX： #3B241B #8E5E43 #E7D2C0 #2FB7B0 #0B5A57

雰囲気： ビストロ、エレガント、温かみ

おすすめ用途： レストランメニュー、カフェブランディング、卓上テントデザイン

エスプレッソブラウンとシーサイドティールのアクセントは、水辺の小さなカフェの心地よさ。濃いブラウンは商品名に、薄いブラウンは説明文に使い、明確な階層に。ティールはセクション区切りやアイコン、1点だけの目玉メニューに最適。コツ：ティールの使用はレイアウト全体の15％未満に抑えて、読みやすくクラシックに保ちましょう。

media.io で生成されたエスプレッソシーサイドの画像例

15) ドリフトウッドとジェイド

HEX： #725140 #B78B70 #F6E9DC #46BBB4 #176F6B

雰囲気： ナチュラル、プレミアム、癒し

おすすめ用途： スキンケアパッケージ、ウェルネス商品ライン、ラベルデザイン

ドリフトウッドブラウンとジェイドティールは、クリーンな成分とスパのような癒しのイメージ。クリーム色をボトルのベースに、ティールはブランドマークに使ってフレッシュで現代的に。暖色ブラウンは原料表記やサブテキストにぴったりで、オーガニック感。コツ：ブラウンの文字はエンボス、ティールはフラットで仕上げて、棚で触感的なアクセントを。

media.io で生成されたドリフトウッドとジェイドの画像例

16) ブロンズ トロピクス

HEX： #5F3B2C #AD7A57 #F2E2D4 #00B8B0 #0A6D69

雰囲気： 力強い、サニー、プロモーション向き

おすすめ用途： SNS広告、キャンペーンバナー、プロモグラフィック

ブロンズの暖かみとパンチの効いたターコイズは、トロピカルな日陰と鮮烈な水のきらめき。活気と信頼性が同時に必要なプロモーション向きの組み合わせです。明るいティールはメインCTAに、ダークティールはバッジや割引タグに最適。コツ：長文はライトニュートラル上にブラウンで、ティールは短くインパクトあるフレーズ専用に。

media.io で生成されたブロンズトロピクスの画像例

17) ペブル コーヴ

HEX： #6A4A3D #A77A63 #EEE1D6 #7ED1CB #1A7B76

雰囲気： ミニマル、親しみやすい、ライト

おすすめ用途： アプリのオンボーディング画面、プロダクトツアー、マイクロコピーUI

柔らかなペブルブラウンとエアリーなターコイズは、引き潮の静かな入り江のようなクリーンで親しみやすい印象。画面背景には薄いニュートラルをメインに使い、落ち着いたオンボーディングに。ティールは進捗ドットやプライマリーボタンに最適、ブラウンは見出しや補助テキストにぴったり。コツ：イラストはブラウンで単色・モノクロ、ターコイズは操作の合図専用に。

media.io で生成されたペブルコーヴの画像例

18) チェスナット グレーシャー

HEX： #4B2D22 #93664B #E6D4C7 #3ABBB4 #0B4E4B

雰囲気： タフ、シャープ、頼れる

おすすめ用途： アウトドアギアのブランディング、キャンプ用品ページ、ラベル

チェスナットブラウンと氷河ティールの組み合わせは、冷たい空気に耐える丈夫なバッグをイメージ。最も濃いブラウンをワードマークや商品名に使い、耐久性をアピール。ティールは機能説明のアイコンやジッパー引き手のアクセントに最適。コツ：キャンバスや再生紙などテクスチャ素材と合わせ、ティールはパフォーマンス機能の指標に繰り返し少量だけ使うと効果的。

media.io で生成されたチェスナットグレーシャーの画像例

19) マホガニー ラグーン ナイツ

HEX： #2E1A16 #6C3E2D #C9A98E #1DA7A0 #083C3A

雰囲気： ドラマティック、親密、ラグジュアリー

おすすめ用途： カクテルバー内装、ラウンジブランディング、ナイトライフポスター

ダークマホガニーと深いラグーンティールは、夜遅く磨き上げたウッドに淡く反射する照明のムード。ブラウン×ターコイズ配色では、暗めを基調にベージュは暖かなアクセント程度に留めるとベスト。ティールはネオン看板やバーメニュー、ベルベットシートに抑制して使い、控えめな華やかさ。コツ：ブラスやスモークガラスの仕上げを加えるとウォーム×クールのバランスが上品に。

media.io で生成されたマホガニーラグーンナイツの画像例

20) ココアとカリビアン

HEX： #6B4634 #B07C5E #F8EBDD #5CC8C2 #167A75

雰囲気： フレッシュ、ボタニカル、風通し良い

おすすめ用途： 水彩パターン、文房具、春のキャンペーンアートワーク

ココアの暖かみとカリビアンターコイズは、トロピカルな葉と砂地のコントラスト。明るいクリームを紙のトーンに、ティールのウォッシュを重ねて爽やかな印象を。ブラウンは茎やシャドウ、手描き文字に最適で、全体感がまとまります。コツ：ターコイズのエッジは柔らかく水っぽく、ブラウンの線はシャープに使い分けてコントラストを演出。

media.io で生成されたココアとカリビアンの画像例

ブラウン×ターコイズと相性の良い色は？

アイボリー、クリーム、ウォームホワイト、ソフトグレージュなどのクリーンなニュートラルは、ブラウン×ターコイズの組み合わせを呼吸しやすくし、ターコイズをノイジーではなく「狙った配色」に演出します。

メタリックや温かいアクセント（真鍮、ブロンズ、テラコッタ、キャラメル）も自然に相性◎。ブラウンのアーシー感を補強しつつ、ターコイズをシャープに保てます。

より深みやドラマ性を出したい場合は、チャコールやほぼブラックでコントラストを強調し、ティールは「リンク・アイコン・ハイライト」など信号色として1色だけ使うのがおすすめです。

実際のデザインでブラウン×ターコイズの配色を使う方法

ブランディングやUIでは、ブラウンは構造色（タイプ、ナビ、区切り線）として扱い、ターコイズはアクション色（CTA、アクティブ状態、主要指標）に。ユーザーが直感的に理解できる明確な階層が生まれます。

インテリアの場合は、ウッドトーン、タンのテキスタイル、ウォームカラーの壁で空間をアンカーし、ターコイズを最低2箇所以上（クッション＋アート、タイル＋ラグ等）リピートさせるとデザインされた印象に。

印刷物やパッケージ、SNSグラフィックでは、ターコイズは小さく高インパクトにまとめ、背景や大部分にはニュートラルを使うと読みやすさが上がります。

AIでブラウン×ターコイズの配色ビジュアルを作る

HEXコードがすでに決まっている場合は、レイアウト（ポスター、UI画面、パッケージ形状）とムード（ラスティック、プレミアム、遊び心）を組み合わせてプロンプトを記述すれば、即ブランド事例が量産できます。ターコイズをどこに配置するか（CTAボタン、枠線、ラベル帯等）明記することがバランス維持の鍵です。

短く明確なプロンプトで反復：まずは構成とタイポグラフィを固め、次に素材（紙の質感、マットウッド、光沢タイル等）を擦り合わせ、狙ったブラウン×ターコイズのコントラストに合わせて仕上げましょう。

Media.io のテキスト→画像ツールを使えば、ピッチ資料やムードボード、クライアント提案の事例が素早く作成できます。最初からキャンバスを作る必要はありません。

次へ： ワインレッドのカラーパレット