ダークタンは、デザインに瞬時に落ち着き・高級感・温かみをもたらす、温かみのあるニュートラルカラーです。時代遅れに見えず、アースカラーで、シャープな明るいニュートラルや、深みのあるアクセントとも簡単に組み合わせられます。
以下は、ブランディング、インテリア、UI、パッケージング、SNSグラフィックなどに使えるHEXコード付きの厳選ダークタンカラーパレットアイデア20選+、Media.ioでビジュアル生成できるAIプロンプトです。
なぜダークタンのパレットがよく機能するのか
ダークタンはブラウンとベージュの間に位置する絶妙なカラーです。温かみがあり親しみやすい印象ですが、十分にニュートラルなのでタイポグラフィや写真、プロダクトヴィジュアルを引き立てます。このバランスが、現代ブランドやインターフェースの信頼できる基盤色となっています。
また、クリーム色やオフホワイトと組み合わせることで「ソフトなコントラスト」を生み出し、読みにくくならず、きつい印象にもなりません。エスプレッソやブラック系を加えると構造にメリハリが生まれ、ウェブや紙面で活かせる洗練された階層を作れます。
さらに、ダークタンは、穏やかなグリーンやブルーグリーン、くすみグレーとも相性が良く、過度にセピア調になりすぎません。ポイントを押さえれば、ラスティックにもエディトリアルにもラグジュアリーにもミニマルにも演出可能です。
20以上のダークタンカラーパレットアイデア(HEXコード付き)
1)デザートロッジ

HEX: #8B6A4A #C9B08E #F1E6D4 #4B3A2A #7E8A6A
雰囲気: あたたかい、落ち着き、ラスティック
おすすめ用途: コテージレンタルのブランディングやランディングページ
日差しで焼けた木材やレザーチェア、埃っぽいトレイルの空気のように温かく、落ち着いた配色。ダークタンが誘うようなベースを作り、クリームで抜け感を、ディープエスプレッソで見出しにコントラストを付けられます。セージグリーンはボタンやバッジ、アイコンの穏やかなアクセントに。ポイント:エスプレッソは使いすぎず、重くならないように。
media.ioで生成したデザートロッジイメージ例
Media.ioは、ブラウザで動画・画像・音声の作成や編集ができるオンラインAIスタジオです。
2)ココアリネン

HEX: #7A5A3E #D6C3A5 #F7F0E6 #A9815A #2F2620
雰囲気: 柔らかい、居心地の良い、エディトリアル
おすすめ用途: ライフスタイルブログのタイポグラフィや見出し
麻のカーテンや、温かい飲み物へのココアパウダーのように柔らかく居心地の良い配色。ダークタンの組み合わせはセリフ体の見出しや長文テキストの背景に美しく映え、ほぼ黒のカラーで本文がくっきりと読めます。キャラメルカラーは引用やディバイダー、さりげないハイライトにも。ポイント:リネンやクリームをメインにすることで、エディトリアルな抜け感を維持。
media.ioで生成したココアリネンイメージ例
3)ブロンズキャニオン

HEX: #946B3B #C79A62 #E9D1B0 #5B3A1F #3F5C52
雰囲気: 冒険的、太陽に照らされた、無骨
おすすめ用途: アウトドアギアのポスターデザイン
夕日に染まる渓谷の岩壁や履き込まれた登山靴のような冒険的で温かい配色。ブロンズとキャラメルでしっかりした温もりを、ディープブラウンで見出しに力強いコントラストを。控えめなグリーンティールが、モダン感を演出してセピア調になりすぎません。ポイント:ポスターの背景は淡いサンドカラーに設定し、見出しを引き立てましょう。
media.ioで生成したブロンズキャニオンイメージ例
4)アンティークサドル

HEX: #6E4E33 #B88A5C #E7D6C3 #3B2A1D #8C7A66
雰囲気: 伝統的、クラシック、マスキュリン
おすすめ用途: レザーグッズのパッケージ・ラベル
アンティークサドルや手入れの行き届いた作業台を思わせる、伝統的でクラシカルな配色。ダークタンとサドル系ブラウンはクラフト素材で高級感があり、ディープアンバーはロゴや刻印に最適。くすんだトープはサブテキストやアイコンを柔らかく繋げます。ポイント:ロゴは一番濃いブラウンでエンボス加工にすると、余分な色を使わず高級感UP。
media.ioで生成したアンティークサドルイメージ例
5)デューンミニマル

HEX: #9B7A58 #D9C7AE #FAF4EA #6B5644 #B9A38A
雰囲気: クリーン、モダン、穏やか
おすすめ用途: 金融アプリのミニマルUIキット
なめらかな砂丘や石のソフトな影のように、クリーンで落ち着いた配色。タンはカードやパネルに最適で、ほぼ白色でUIを明るくモダンに。ダークブラウンはナビや数字強調、ミッドトープは枠線や無効表示に活用できます。ポイント:ダッシュボードなど詰まった画面では余白を多めにとって、重たい印象を回避。
media.ioで生成したデューンミニマルイメージ例
6)モカクレイ

HEX: #7D5E45 #B59678 #EADBCB #4A3526 #A7B0A5
雰囲気: アース感、職人、癒し
おすすめ用途: 陶芸ショップのインスタ投稿
ろくろ回しの生粘土やマットな釉薬マグが日差しで乾く、そんな土の温もりや手仕事感。温かいブラウンがハンドメイド感を演出し、淡いベージュで商品名や価格を目立たせます。クールなグレーグリーンも使えば単調すぎません。ポイント:ロゴは一番濃いモカで統一し、全投稿のバランスを保ちましょう。
media.ioで生成したモカクレイイメージ例
7)ウォールナッツクリーム

HEX: #70513A #CDB79B #FFF7EE #3A2A20 #D9A96B
雰囲気: 親しみやすい、高級感、明るい
おすすめ用途: カフェのメニューデザイン
ウォールナットウッドのカウンターやフォームミルクのように、親しみやすく高級感のある配色。クリームやオフホワイトで読みやすく、ダークブラウンで見出しにメリハリを。ハニーゴールドのアクセントは季節のおすすめやスペシャルをさりげなく引き立てます。ポイント:ハニー系は小さなアイコンや価格強調に限定し、大きな部分には使いすぎないように。
media.ioで生成したウォールナッツクリームイメージ例
8)セピアスタジオ

HEX: #83624A #BFA58A #EDE0D3 #2A201A #6D7A7A
雰囲気: プロフェッショナル、バランス、穏やか
おすすめ用途: 写真家のポートフォリオサイト
セピア色のコンタクトシートや静かなスタジオの壁のように、プロフェッショナルでバランスの取れた配色。温かいニュートラルが写真の邪魔をせず、チャコールブラウンがナビを読みやすくします。控えめなブルーグリーンはリンクやホバーに使えばさりげないモダン感も。ポイント:背景は一番明るいベージュにして、写真を主役に。
media.ioで生成したセピアスタジオイメージ例
9)キャラメルスモーク

HEX: #8A6440 #D1A06A #F3E2CE #3C2A1C #6A6F73
雰囲気: ムーディー、モダン、ドラマチック
おすすめ用途: メンズフレグランス製品広告
ムーディーでモダン、まるで柔らかなスモークの下でキャラメリゼされたアンバーのよう。これらのダークタンの配色は、ほぼブラックのベースと合わせることでラグジュアリーな雰囲気を醸し出し、太字のタイポグラフィに最適です。クールなスモークグレーが広告を温かくなりすぎないよう抑え、メタリックな要素をシャープに見せます。コツ: ライトベージュのグラデーションで商品をスポットライトすると、ボトルのシルエットが際立ちます。
media.ioで生成したキャラメルスモークの画像例
10) トフィー・テラコッタ

HEX: #8D5E3C #C07A4B #E8CBB4 #4F2E1F #B7B1A8
雰囲気: 日差しを浴びた、ボヘミアン、活気
おすすめ用途: サマーイベント用フライヤーデザイン
日差しを浴びたボヘミアンスタイル、夕暮れ時のパティオのテラコッタ鉢を思わせます。トフィーとテラコッタの色合いがエネルギーをもたらし、淡いサンドカラーは日付や場所などの文字も読みやすくします。ディープココアブラウンをメイン見出しに、やわらかなストーングレーをサブ情報に使用。コツ:暖色ブロックで形を大きく配し、テキストエリアはすっきり明るくまとめましょう。
media.ioで生成したトフィーテラコッタの画像例
11) サンドストーン・スパ

HEX: #8F6E54 #CBBBAA #F8F1E8 #5A4334 #9DB0A5
雰囲気: 穏やか、クリーン、癒し
おすすめ用途: スキンケアのWebサイトと商品ページ
穏やかで癒しのある、暖かな砂岩や静かなスパのローブのような配色。明るいニュートラルは清潔感あるスキンケアの背景となり、濃いタンはヘッダーや商品カードに構造を与えます。やさしいグリーングレーは植物的な印象を加えつつ、ミントカラーに寄りすぎません。コツ:グリーングレーはトグルやバッジなど小さなUI要素のみに使いましょう。
media.ioで生成したサンドストーンスパの画像例
12) ハーベスト・ウィート

HEX: #806043 #BFA074 #EEDDBF #3F2D20 #7E6B4F
雰囲気: 健康的、秋らしい、ラスティック
おすすめ用途: ファーム・トゥ・テーブルのレストランブランディング
健康的で秋らしい、小麦の束や麻袋、秋の終わりの食卓を思わせます。濃いブラウンはロゴやサインを引き締め、小麦とクリームのトーンは印刷物を親しみやすくします。オリーブブラウンは消印やアイコン、メニューディバイダーに抑えめに使いましょう。コツ:未塗装の紙を選ぶと、これらの色調がさらに温かみを増します。
media.ioで生成したハーベストウィートの画像例
13) シダー・ウィスパー

HEX: #7C5B42 #B89A80 #EDE2D7 #3A2B21 #8A9A86
雰囲気: 静か、ナチュラル、マインドフル
おすすめ用途: ヨガスタジオのポスター&サイン
静かでマインドフル、杉の板やゆっくりとした朝の光のような雰囲気。暖かいタンがウェルネスメッセージを支え、ディープブラウンが遠くからも読みやすく仕上げます。やわかなグリーンはナチュラルなニュアンスを加え、ミニマルなラインアートとよく合います。コツ:ポスターはほぼ明るく保ち、濃色文字を中央に配置することで落ち着いた階層性に。
media.ioで生成したシダーウィスパーの画像例
14) オートラテ

HEX: #8A6A50 #CDB79E #F6EEE5 #5B4637 #D0A36F
雰囲気: フレンドリー、モダン、安心感
おすすめ用途: アプリ・オンボーディング画面
フレンドリーで安心感のある、滑らかなクレマが乗ったオートミルクラテのよう。ソフトベージュの背景でオンボーディングテキストが親しみやすくなり、ダークブラウンがボタンやタイトルをはっきりさせます。ハニーアクセントが進捗インジケーターやハイライトに温かみをプラス。コツ:ハニーは1画面につきキーポイント1つだけに絞り、全体の流れを落ち着かせましょう。
media.ioで生成したオートラテの画像例
15) ブラス&バーク

HEX: #6F5036 #A67C52 #E6D2BE #2E221A #B79B4A
雰囲気: ビンテージ、大胆、自信
おすすめ用途: クラフトビールのラベル&缶デザイン
ビンテージ感があり自信に満ちた、ダークバークの質感に真鍮の金具のよう。ディープブラウンが文字やバッジのシェイプを際立たせ、タンやベージュがラベルをパッと見て読みやすくします。ブラスゴールドは受賞歴や限定版のアクセントに最適。コツ:ゴールドは小さな要素のみに使い、マスタード色に見えないように。
media.ioで生成したブラス&バークの画像例
16) ヴィンテージ・マップ

HEX: #8C6B4F #BFA98C #EADBC8 #4A3426 #6E6154
雰囲気: ノスタルジック、学術的、クラシック
おすすめ用途: 歴史小説のブックカバーデザイン
ノスタルジックで学術的、折り畳まれた地図やインクで縁取られた古い紙のよう。パーチメント風トーンはタイポグラフィに最適なキャンバスとなり、ダークブラウンはタイトルや著者名をしっかり際立てます。グレーブラウンは小さな装飾や区切り線、章のマークに活用できます。コツ:繊細なグレインや紙質テクスチャを加えると、より本物らしい印刷の雰囲気に。
media.ioで生成したヴィンテージマップの画像例
17) オータム・スエード

HEX: #7B563A #B07B52 #E5CDB8 #3B271B #A36A44
雰囲気: 温かみ、スタイリッシュ、季節感
おすすめ用途: ファッションルックブックレイアウト
温かくスタイリッシュ、スエードブーツや10月下旬の光のよう。タンからキャラメルのグラデーションは、商品画像やタイポグラフィを引き立てる統一感ある背景を作ります。深いエスプレッソが見出しを印象付け、テラコッタブラウンが価格やコレクション名にアクセントを添えます。コツ:パレットは主にニュートラルでまとめ、テラコッタを繰り返し使ってリズム感を演出しましょう。
media.ioで生成したオータムスエードの画像例
18) トレイルミックス・ニュートラル

HEX: #82614A #A88A6F #D7C5B1 #2F231B #6A7B6B
雰囲気: 実用的、アウトドア、バランス感
おすすめ用途: キャンピング持ち物チェックリストのインフォグラフィック
実用的でアウトドア向き、トレイルミックスの袋や使い込まれたキャンバスパックのよう。ミッドトーンのタンは親しみやすいインフォグラフィックに、ダークブラウンはラベルやアイコンで強いコントラストを確保します。くすんだグリーンはカテゴリやコールアウトをサポートし、メインテキストの邪魔をしません。コツ:明るいベージュは背景に、最も濃い色は見出し専用に。
media.ioで生成したトレイルミックスニュートラルの画像例
19) クレイ&ユーカリ

HEX: #8E6A4E #C4AB92 #F2E7DB #4B3527 #7E9A8D
雰囲気: フレッシュ、アーシー、エアリー
おすすめ用途: ボタニカル石鹸のパッケージ
フレッシュでアーシー、粘土鉢とユーカリの葉が並ぶような雰囲気。暖かなニュートラルがパッケージに優しさと手作り感を与え、クールなグリーンが清潔な植物のアクセントとなります。ディープブラウンはラベルの文字に使うことで、ライトな紙にも視認性を保ちます。コツ:グリーンはシンプルなラインイラストと合わせ、仕上がりをモダンに保ちましょう。
media.ioで生成したクレイ&ユーカリの画像例
20) ミュージアム・セピア

HEX: #7A5C44 #B89E86 #E9DDD2 #271D17 #9D8E80
雰囲気: 洗練、静か、文化的
おすすめ用途: 美術館展覧会の招待状
洗練され文化的、静かなギャラリーに並ぶセピア写真のよう。淡い紙色は招待状に最適で、エスプレッソブラックがイベントの詳細をシャープにまとめます。中間のタンカラーはボーダーやタイポグラフィの装飾に温かみを加え、古さを感じさせません。コツ:装飾は最小限に、ホワイトスペースでラグジュアリー感を演出しましょう。
media.ioで生成したミュージアムセピアの画像例
21) ゴールデン・レザー

HEX: #855E3B #B98552 #EFD7BF #3B2618 #D0B06B
雰囲気: プレミアム、温かみ、自信
おすすめ用途: ラグジュアリーブランドのVIシステム
プレミアムで自信あふれる、スポットライトの当たるゴールデンレザーのような質感。タンとキャラメルを基調にした上質なステーショナリー、ディープブラウンはロゴに威厳を与えます。抑えたゴールドが各アイテムをまとめ、シールや箔押し、ハイライトに活用できます。コツ:デジタルでは微妙なグラデーションで箔感を表現し、ゴールドの使用は全体の10%以内に抑えましょう。
media.ioで生成したゴールデンレザーの画像例
22) ナイトマーケット・タン

HEX: #7F5A3A #A97B4F #E3CDB8 #1F1712 #5A6B66
雰囲気: 都会的、温かみ、少しエッジィ
おすすめ用途: レストランのSNS広告カルーセル
都会的で温かみがあり、夜市の街灯が木のテーブルに映るような雰囲気。ほぼブラックの色合いが太字オファーにドラマチックなコントラストを生み、タンやベージュが料理写真フレームを美味しそうに見せます。くすんだグリーングレーはアイコンやCTA要素をサポートし、彩度が高くなりすぎません。コツ:最も濃いトーンはスライドごとのストリップとして一貫使用し、識別性を高めましょう。
media.ioで生成したナイトマーケットタンの画像例
23) シナモン・アーカイブ

HEX: #8A6446 #B28A66 #EAD7C8 #3A281E #7A6B60
雰囲気: ノスタルジック、温かみ、整理整頓
おすすめ用途: Notion風ダッシュボードテンプレート
懐かしく、整理された印象。シナモンフォルダーやきちんとラベルされたアーカイブのよう。ダークタンのカラーパレットは、低まぶしさの背景と高コントラストなテキストで長時間のセッションをサポートします。タグやセクションヘッダーにはミッドタンを使い、グレーブラウンは区切りや繊細なUI枠線に使いましょう。ポイント:フォントのウェイトは2つに絞ると、暖かいニュートラルが散らかった印象になりません。
media.ioで生成したシナモンアーカイブの画像例
ダークタンに合う色は?
ダークタンは、クリームやオフホワイト、ウォームベージュなどの明るいニュートラルと最もよく合います。全体の印象を軽やかに保ちつつ、心地よい暖かさも残せます。これはエディトリアルレイアウト、商品ページ、インテリアの定番コンビです。
モダンなコントラストを加えたい時は、エスプレッソブラウンやチャコール、ほぼブラックを少量使いましょう(ナビゲーション、ヘッダー、主要ラベルやアウトラインなど)。読みやすさを向上させつつ、パレットが冷たい印象になりません。
色を加えたいなら、落ち着いたグリーン(セージやユーカリ)、スレートティール、スモークグレーが特に相性抜群です。オレンジやセピア寄りになりすぎず、現代的でまとめやすい配色になります。
実際のデザインでダークタンカラーパレットを使うコツ
まず明確な役割分担を。最も明るいトーンは背景、ミッドタンはカードやセクションなどの面、最も濃いブラウンはテキストや構造に使いましょう。コントラストが一定になり、コンテンツが詰まっても「濁った」画面になりません。
ブランディングやパッケージでは、ダークタンはミニマルタイポグラフィと充分な余白と組み合わせることで高級感を演出できます。ゴールドやハニーのアクセントを使う場合は小さく抑え、色の主役ではなくハイライトとして感じさせましょう。
SNSやマーケティブ向けのクリエイティブでは、レイアウトごとに一つのダーク要素(ヘッドラインバーやフッターストリップなど)を固定し、タンやクリームが全体を担います。複数投稿でもまとまりが感じられます。
AIでダークタンパレットのビジュアルを作成する
HEXコードが既にあるけど合うビジュアルがほしい時は、AIでブランドに合ったモックアップ、UI画面、フライヤーやパッケージ案を素早く生成できます。上記プロンプトはパレットが主役になるよう設計されていて、クリーンで使える構成も生み出せます。
Media.ioでは、プロンプトを貼り付け、アスペクト比を設定し、タン系、明るいニュートラル、アクセント(セージやスレートなど)を選択して出力を導けます。これだけで一貫したデザインセットを作るのに十分です。
方向性が気に入ったら、一度に一つの要素(背景トーン、アクセントカラー、レイアウトタイプ)だけ交換して、統一感あるシリーズを仕上げましょう。
ダークタンカラーパレット よくある質問
-
ダークタンとは(簡単に)?
ダークタンはタンとライトブラウンの間にある、暖かくブラウン寄りのニュートラルです。土っぽくて居心地の良さを感じさせつつ、現代的パレットの「ニュートラルベース」として機能します。 -
ダークタンはウェブサイトの背景色に適している?
はい。メイン背景にクリームやオフホワイトを使い、ダークタンはセクションやカード、ヘッダーに残すのがおすすめ。読みやすさのためにはエスプレッソやほぼブラックのテキストと合わせましょう。 -
ダークタンに最も合うアクセントカラーは?
落ち着いたグリーン(セージ・ユーカリ)、スレートティール、スモークグレー、ハニーゴールド、濃いエスプレッソが定番アクセントです。タンの暖かいトーンとケンカせず、コントラストを加えます。 -
タンパレットが「濁った」印象にならないコツは?
明度コントラストを増やしましょう。非常に明るいニュートラル(クリーム)と明確に濃いトーン(エスプレッソ・チャコール)をセット。ミッドトーンは少量の面や枠線に使い、画面全体には使いません。 -
ラグジュアリーブランド向けダークタンパレットのおすすめは?
深いブラウン+コントロールされたゴールドアクセントを含むパレット(例:「ゴールデンレザー」)を試してみてください。ゴールドはシールや箔風ハイライト、小さなUIインジケーターなど、ごく控えめに使いましょう。 -
ダークタンはモダンなUIデザインでも使える?
もちろんです。「デューンミニマル」や「シナモンアーカイブ」などのパレットはUI向けに作られています。背景には明るいニュートラル、タイポグラフィには濃いブラウン、コンポーネントや区切りにはミッドタンを。 -
一致するパレット画像を即座に生成するには?
Media.ioのテキストから画像生成機能を使い、主要HEXカラーとクリーンレイアウト(UIモックアップ、ポスター、パッケージ)をプロンプトで指定しましょう。プロンプト内にパレットを記載すれば、モデルがトーンを守ってくれます。

