タンカラー配色アイデア20選｜おすすめカラーコード付き

タンは暖かみのあるニュートラルカラーで、デザインを瞬時に安定感、親しみやすさ、タイムレスな印象にしてくれます。現代的なUI、居心地の良いインテリア、プレミアムなブランディングにも幅広く使え、冷たさや無機質さを感じさせません。

以下にHEXコード付きの20種類のタンカラーパレットアイデアを紹介します。さらに、実用的な組み合わせのコツや、数秒でマッチするビジュアルを生成できるAIプロンプトも掲載しています。

タンパレットが優れている理由

タンはベージュとブラウンの中間に位置し、濃いアーストーンの重さがない暖かさをもたらします。そのため、ウェルカム感や落ち着き、“人間らしさ”を必要とするレイアウトの信頼できるベースカラーになります。

タンは自然に彩度が低いため、クール系もウォーム系もどちらのアクセントとも相性が良いです—ネイビー、ティール、セージ、テラコッタ、ブラッシュ、ほぼ黒まで。アクセントとコントラストカラーを変えるだけで、同じタンベースを空気感のあるミニマルにも、リッチでプレミアムにも表現できます。

タンは素材や照明の違いにも強く、インテリアや商品撮影で人気です。デジタルデザインでは背景や面として目に優しく、長いコンテンツでも読みやすくなります。

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

1）デザートリネン

HEX: #D2B48C #F3E8D6 #C6A175 #8B6B4A #FFFFFF

雰囲気： 穏やか、空気感、日差し

おすすめ用途： スカンジインテリア、ウェルネスブランディング、ランディングページ

穏やかで日差しを感じるこれらの色調は、暖かい砂漠の風に揺れるリネンカーテンのような印象です。クリーミーなオフホワイトは広々とした背景に使い、深いブラウンは見出しや家具アクセントのアンカーに。オークやラタン、マットセラミックなど天然素材にもよく合います。コツ：一番暗いブラウンと一番明るいクリームを主要なテキスト部分で組み合わせ、コントラストの可読性を保ちましょう。

media.ioによって生成されたデザートリネンの画像例

Media.io

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

今すぐ無料で試す

2）サンドストーンスタジオ

HEX: #C8A57A #EFE3D2 #B68C5A #2F3A3F #7DA1A8

雰囲気： 現代的、集中、ギャラリーのようなクリーン

おすすめ用途： ミニマルなウェブUI、ポートフォリオ、商品ページ

現代的でギャラリーのようなクリーン感、この組み合わせはサンドストーンの壁と冷たい影のコーナーを思わせます。タンカラーパレットとして、明るいニュートラルがレイアウトの大半を担い、スレートトーンがタイポグラフィを担当することで輝きます。くすんだティールは、リンクやトグル、バッジのアクセントにぴったり。コツ：ティールは各コンポーネントでインタラクティブステート一つに限定し、穏やかなUIを保ちましょう。

media.ioによって生成されたサンドストーンスタジオの画像例

3）ココアドリフト

HEX: #C2A07A #E7D5BF #9A6B43 #3B2A22 #C65A2E

雰囲気： 居心地良い、ロースト感、ブティック

おすすめ用途： コーヒー包装、クラフト商品、フード写真のオーバーレイ

居心地よくロースト感のあるこの色合いは、カカオニブやトーストシュガー、ほのかなエンバーを感じさせます。ダークエスプレッソをラベルのプレミアムベースに使い、読みやすさは暖かいタンとクリームで。バーントオレンジはフレーバー表示やシール、注目ポイントでアクセントに。コツ：クラフト紙の質感など微細なテクスチャを加えると、ブラウンがよりリッチに映えます。

media.ioによって生成されたココアドリフトの画像例

4）サンベイクドアドビ

HEX: #D8B58C #F7F0E6 #B88E65 #A56B4B #4A3A34

雰囲気： 土っぽい、ハンドクラフト、暖かい

おすすめ用途： 結婚式招待状、ハンドメイドブランド、ステーショナリー

土っぽくハンドクラフト感のあるこのセットは、アドビ壁やクレイポット、ゴールデンアワーの光を思わせます。紙のようなクリームは背景に、タンとクレイトーンをボーダーやモノグラム、セクション分割に重ねて使います。ディープブラウンは名前や日付の可読性を高め、違和感がありません。コツ：無加工紙やさりげない斑点のテクスチャを選ぶとオーガニックな雰囲気に合います。

media.ioによって生成されたサンベイクドアドビの画像例

5）オートミルクミニマル

HEX: #CCAA80 #F2E9DD #A78662 #6D5A4C #BFC6C9

雰囲気： 柔らかな、ミニマル、控えめ

おすすめ用途： 編集レイアウト、ブログ、穏やかなブランドシステム

柔らかく控えめなこれらの色調は、暖かいエスプレッソの上に載ったオートミルクフォームのよう。淡いニュートラルは長文の可読性に、トープやブラウンは見出しや引用部に。クールグレーは現代的な印象をルールやキャプション、UIクロームに加えます。コツ：本文は一番明るい色に、ディープブラウンは最も重要な階層だけに使いましょう。

media.ioによって生成されたオートミルクミニマルの画像例

6）キャメルとセージ

HEX: #C9A77A #EAE4D2 #8DAA8B #4D6B57 #2E3B34

雰囲気： フレッシュ、ナチュラル、安定感

おすすめ用途： ボタニカルブランディング、アポセカリーラベル、エコ商品

フレッシュで安定感のあるこの組み合わせは、キャメルウールと砕いたセージリーフを想起させます。淡いニュートラルでレイアウトを軽やかに保ち、グリーンがアイコンやシール、成分表示のストーリーを演出。ブラック寄りのグリーンはピュアブラックより柔らかいコントラストで文字に最適。コツ：包装ではセージトーンをマット印刷するとナチュラルな印象を強化できます。

media.ioによって生成されたキャメルとセージの画像例

7）タンとネイビーのクラシック

HEX: #C5A07A #F2E6D8 #1E2A3A #B06A3B #D9C6B0

雰囲気： クラシック、自信、テーラード

おすすめ用途： メンズウェアブランディング、ヘリテージロゴ、プレミアムEC

クラシックでテーラード、このカラーはネイビーブレザーやタンスエード、カッパータイバーを思わせます。ネイビーがタイポやナビゲーションの重みを担い、明るいニュートラルがページの抜け感を出すことでタン配色が活きます。ウォームカッパーブラウンはCTAや価格表示、ステッチディテールにピンポイントで。コツ：セリフ見出しと十分な余白を組み合わせ、コントラストを意図的に感じさせましょう。

media.ioによって生成されたタンとネイビーのクラシック画像例

8）テラコッタグロウ

HEX: #D0B08A #F6E2C8 #C6654A #8D4A3B #2D2A28

雰囲気： 暖かい、活気、夕焼け

おすすめ用途： ボヘミアンインテリア、イベントブランディング、SNS投稿

暖かく活気のあるこの組み合わせは、夕方の太陽に照らされたテラコッタタイルのよう。淡いピーチタンは背景に、テラコッタをボタンやアイコン、特集ブロックのアクセントに。ディープブラウンブラックは文字やコントラストの強調に活躍します。コツ：インテリアの場合は、テラコッタをテキスタイルやクレイアクセサリーで繰り返し、色が塗られた感覚ではなく“馴染む”印象にしましょう。

media.ioによって生成されたテラコッタグロウの画像例

9）セピアメドウ

HEX: #CDAE86 #E5D8C6 #A07C5A #6E8A6B #3C4B3F

雰囲気： ノスタルジック、アウトドア感、穏やか

おすすめ用途： アウトドアブランド、ジャーナル、自然写真フレーム

ノスタルジックでアウトドア感のあるこれらの色は、ジャーナルページに押し花した乾いた草を思わせます。セージグリーンはアイコンやセクション見出しの優しいセカンダリーカラーに、ブラウンは安定感を支えます。ミッドタンはカードやコンテナに使うと硬い印象にならず構造をプラス。コツ：写真フレームには一番明るいニュートラルでボーダーを囲み、画像が主役になるようにしましょう。

media.ioで生成されたセピア草原の画像例

10) ハニーコッパー

HEX: #C7A37A #F1E2D0 #B87333 #E0B14B #2B2A2E

雰囲気： 光沢、暖かい、高級感

おすすめ用途： スキンケア広告、ジュエリーブランディング、プレミアム商品ページ

光沢感とぬくもりがあり、これらの色合いはハチミツや銅箔、エレガントな夜の輝きを連想させます。ラグジュアリー感を保ちながらクリーミーニュートラルとほぼ黒を組み合わせてシャープな文字、銅や金でハイライトをつけましょう。ボタンや枠、バッジにアクセントとして金属感のある色を使い、背景全体にはしないのがポイント。コツ：ハニーとコッパーの間にソフトなグラデーションを加えると、レイアウトを圧迫せずにリアルな光の反射を再現できます。

media.ioで生成されたハニーコッパー画像例

11) ビーチボードパステル

HEX: #D1B28A #FFF5EA #BFA58A #6E7F8A #F2A7B5

雰囲気： 遊び心、さわやか、海岸風

おすすめ用途： アプリのオンボーディング、ライフスタイルクリエイター、軽めのEC

遊び心と爽やかさがあり、流木や海風、夕焼けのような色合いです。画面を明るくするために温かいクリームを使い、スレートブルーをナビゲーションやラベルに。淡いピンクは通知ドットやタグ、イラストなどミニアクセントに最適。コツ：パステル要素は大きめでグラデーションでは彩度を抑えるとお菓子のような印象を防げます。

media.ioで生成されたビーチボードパステル画像例

12) ラスティックレザー

HEX: #B9956D #E8D3BD #7A4E2D #3C2B22 #A14E3A

雰囲気： 無骨、暖かい、工房風

おすすめ用途： レザーグッズ、クラフトパッケージング、メーカーのロゴ

無骨で温かみのあるセットは、すり切れた革や鞍の縫い目、よく使われた作業台を思わせます。ロゴやスタンプには最も濃いブラウンを、ラベルや吊り下げタグにはより明るいタンを重ねて使いましょう。アクセントのブリックカラーはシールや限定品、小さなグラフィックモチーフに。コツ：型押しテクスチャや微細なグレインパターンと組み合わせて手作り感を強調しましょう。

media.ioで生成されたラスティックレザー画像例

13) クレイ＆チャコール

HEX: #CBB18C #F4E9DB #2F3136 #5A6B73 #D19B5A

雰囲気： 都会的、バランス、現代的

おすすめ用途： ダッシュボード、SaaSマーケティング、データビジュアル

都会的でバランスの取れた色合いは、粘土の壁とチャコールコンクリートのコントラスト。淡いニュートラルがクリーンな面を作り、チャコールで文字やグラフにシャープさ。ブルーグレーはセカンダリUIに、暖かいアンバーは主要指標のハイライトに使いましょう。コツ：アンバーは一つの主要データシリーズに限定し、視認性を保ちます。

media.ioで生成されたクレイ＆チャコール画像例

14) ウォームマーブル

HEX: #D3B792 #FAF5EE #B9B1A7 #7C6F63 #2C2A28

雰囲気： エレガント、静か、建築的

おすすめ用途： インテリアムードボード、高級サービス、ポートフォリオ

エレガントで静かなミックスは、暖かい大理石の模様や柔らかな石の影を再現します。アイボリーを主キャンバスに、グレーで構造やグリッド、繊細な仕切りを。深いほぼ黒は洗練されたタイポグラフィやモノグラムに最適。コツ：微細なラインパターンやエンボスなど触感のある要素を一つ加え、ニュートラルが平坦に見えないように。

media.ioで生成されたウォームマーブル画像例

15) ゴールデンウィート

HEX: #D2B189 #F7ECDD #B67C4B #6A4A3C #2B2B2F

雰囲気： 晴れやか、素朴、親しみやすい

おすすめ用途： フードブランド、カフェ、レシピブログ

晴れやかで自然な色合いは、小麦畑やトーストしたクラストのような感じ。タン系パレットは温かみをアピールしたいフード系に最適です。濃いブラウンは見出しに、明るいニュートラルはメニューやカード、背景に。コツ：小さくコントラストの高い値札やCTAボタンをほぼ黒で作るとコンバージョンが明確になります。

media.ioで生成されたゴールデンウィート画像例

16) エスプレッソクリーム

HEX: #C6A27C #EFE2D3 #5B3A2E #1F1B1A #C9D2D3

雰囲気： 居心地よく、高級感、ムーディー

おすすめ用途： カフェ、ブティックホテル、写真プリセット

居心地よくムーディーなセットは、エスプレッソと蒸気クリームのキャンドル灯るカフェを思わせます。見出しやサインにはほぼ黒、クリーミーな面と温かいタンカードで雰囲気を柔らかく。クールなグレーはサブテキストやUI枠に最適です。コツ：インテリアでは、金属もこのパレットに合わせてヘアライン黒やアンティークブロンズにすると統一感。

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

17) ヴィンテージペーパー

HEX: #D0B690 #F9F2E8 #BCA98F #8A7C6C #5D5A57

雰囲気： ノスタルジック、文学的、ソフト

おすすめ用途： 本の表紙、履歴書、文房具、ブログ

ノスタルジックで文学的な色合いは、古い紙や柔らかい鉛筆線、セピアの余白をイメージさせます。最も明るい色を読みやすい背景に、中間のグレーブラウンは快適な本文に。より濃いグレーはタイトルや罫線、控えめなアイコンに使いやすいです。コツ：クラシックなセリフ体とやや大きい行間を組み合わせると読書感が強まります。

media.ioで生成されたヴィンテージペーパー画像例

18) デューンブロッサム

HEX: #CDB089 #F3E7D6 #E6A3A7 #8A9B7A #4F4B45

雰囲気： ロマンティック、優しい、春らしい

おすすめ用途： フラワーイラスト、ベビーシャワー、ブティックギフト

ロマンティックで優しい色合いは、砂丘に咲く野花のよう。淡いピンクが暖かさを加えつつニュートラルを邪魔せず、落ち着いたグリーンが自然な雰囲気に。濃いグレーブラウンで文字を打つと繊細な色合いが際立ちます。コツ：印刷ではピンクは大きな形、グリーンは細い線で茎や枠にすると軽やかな印象に。

media.ioで生成されたデューンブロッサム画像例

19) ウォルナットオーキッド

HEX: #C2A178 #EDE0D1 #5A3B4E #2D2A2F #C87E5B

雰囲気： 芸術的、ドラマチック、洗練された

おすすめ用途： ファッションルックブック、クリエイティブスタジオ、アルバムアート

芸術的で洗練されたミックスは、ウォルナットの木目と深いオーキッドシャドウのよう。ネガティブスペースには明るいニュートラル、見出しや強い文字にはプラムとほぼ黒。温かみのあるコーラルブラウンはボタンやキャプション、小さな幾何学アクセントに◎。コツ：写真はやや彩度控えめでプラムのアクセントを際立たせましょう。

media.ioで生成されたウォルナットオーキッド画像例

20) ペブル＆ティール

HEX: #C9AE86 #F2E7D8 #2F6B6D #1E2B2C #E0B45A

雰囲気： フレッシュ、アウトドア、モダン

おすすめ用途： トラベルサイト、アウトドアギアUI、モダンブランド

フレッシュでモダンな色合いは、滑らかな小石と涼しいティールの水辺の雰囲気。温かいニュートラルを基盤にし、ティールでインタラクティブ要素やナビゲーションを構成。ゴールドのアクセントは評価やハイライト、小バッジに良い。コツ：UI設計ならティールは主要アクション用、濃いグリーンブラックは文字でコントラスト維持。

media.ioで生成されたペブル＆ティール画像例

タンに合うカラーは？

タンはネイビーやチャコール、ほぼ黒のような深くて冷たい色と美しく調和します―この組み合わせはクラシックかつハイコントラストでありながら、厳しい印象になりません。より自然でアウトドア向けの雰囲気を求めるなら、セージやオリーブ、落ち着いたティールを加えると穏やかなボタニカル感が生まれます。

温かさや活力を出したい場合はテラコッタ、銅、錆色、ハニーゴールドのアクセントがおすすめ。これらはタンと似た色味なのでハイライトがまとまり、バラバラになりません。

もっと柔らかな印象にしたい場合は、淡いピンクや暖かいアイボリーが簡単。タンの土っぽさを明るくして、パッケージやSNSグラフィック、オンボーディング画面も優しいライフスタイル風に仕上がります。

タンカラーパレットをデザインに活用する方法

まず役割を決めます：明るいタンやクリームを背景、ミッドタンはカードや面に。最も濃い色（エスプレッソ／チャコール／ネイビー）は文字や主要UI構造に使い、読みやすさを確保。

アクセントは厳選。タンは一つのアクセントカラー（ティール、セージ、テラコッタ、ゴールド）が「個性」を担ってボタンやアイコン、ハイライトに繰り返し使われるのが最良です。

ブランドやインテリアでは質感が色味以上に大切。タンパレットはリネン、クラフト紙、オーク、ヘアラインメタル、微細なグレインオーバーレイなど素材とも組み合わせれば、ニュートラルがリッチに感じられて平坦になりません。

AIでタンパレットビジュアルを作成

HEXコードがあるなら、パレットの雰囲気（陽光・ムーディー・ミニマル・ラスティック・ラグジュアリー）を参考に、部屋やパッケージ、UI画面、招待状のモックアップも生成できます。

上記のサンプルプロンプトをテンプレートにどうぞ：主題（例：「スキンケアボトル」を「キャンドルラベル」に）を入れ替え、照明や構成の指示はそのまま維持すると一貫した結果が得られます。ブランドムードボードやキャンペーンクリエイティブ作りに最速です。

Media.ioなら、ブラウザでタン系画像を即座に作成・反復できるので、本番デザイン前に様々な方向性をテストするのに最適です。

次へ： マゼンタカラーパレット