ライトブラウンは、居心地の良さと清潔感の間の「ちょうど良い」バランスに位置しています。ブランド、インテリア、モダンなUIに温かみ、柔らかさ、自然で上質な雰囲気をもたらします。
以下は20種類のライトブラウンのカラーパレット(HEXコード付き)と、実際のプロジェクトに自信を持って活用できる配色・使用のコツです。
本記事の内容
ライトブラウンのパレットが優れている理由
ライトブラウンは、人間味や安心感を感じさせます。自然とクラフト感、快適さ、そして本物らしさを示唆するため、コーヒー、ウェルネス、インテリア、ライフスタイル系ブランドで頻繁に使われています。
また「暖色系のニュートラル」として、寒色系のアクセント(ブルー、ティール、ミント)や暖色系(テラコッタ、カッパー、シトラス)とも好相性です。この柔軟性が、背景、サーフェス、ボーダー、タイポグラフィなどシステム全体の構築を簡単にします。
UIでは、ライトブラウンのトーンが無機質なグレーの激しさをやわらげつつ、可読性を保ちます。深みのあるチャコールやエスプレッソと組み合わせることで、ソフトかつ上質なコントラストが生まれます。
20種類以上のライトブラウンカラーパレット案(HEXコード付き)
1) ラテリネン

HEX: #C8A27A #F5EFE6 #E3D2BE #B7895F #4A3A2A
ムード: 暖かく、軽やかで、ウェルカムな印象
最適な用途: ミニマルなブランドアイデンティティやカフェパッケージ
暖かいラテカラーとやわらかなリネンのニュートラルが、穏やかな朝の習慣や清潔なカウンタートップの輝きを表現します。ロゴ、ラベル、読みやすさ重視のメニューなどに最適。ベースのタンは深いエスプレッソブラウンと組み合わせ、クリームは広めの余白用途に。コツ:最も濃い色は小さなアクセントに使い、パレット全体を明るく上質に保ちましょう。
media.ioで生成されたラテリネンの画像例
Media.ioは、ブラウザ上で動画・画像・オーディオの作成・編集ができるオンラインAIスタジオです。
2) サンドストーンサー

HEX: #C9A77F #EDE2D1 #9BB39A #6E7F63 #2F3B2F
ムード: 落ち着き、フレッシュ、ナチュラル
最適な用途: ウェルネス系サイトやエコ製品のブランディング
しっかりとしたサンドストーンと静かなセージが、晴れた散歩道や刈りたてのハーブのような印象。ライトブラウンの組み合わせは、重く見せず暖かさを表現したいサステナブルブランドに最適。淡いベージュを背景に、セージでアクセント、ボタンや見出しに深いフォレストカラーを。コツ:グリーンの割合は10〜15%に抑え、タンを引き立て役に。
media.ioで生成されたサンドストーンサーの画像例
3) ココアブラッシュ

HEX: #B8896A #F6E1D8 #E6B8A2 #A24E4B #3A2322
ムード: ロマンチック、居心地の良さ、柔らかさ
最適な用途: ビューティーブランディング・ウェディングペーパーに
ココアとブラッシュは、バラ色の夕暮れやなめらかなデザートをイメージ。やさしいピンクがブラウンベースを和らげ、素朴さより親しみやすさを感じさせます。深いココアとブラッシュで上品なコントラスト、クレイレッドを印鑑やリボンの差し色に。コツ:ピンクは背景用1色だけ、他はハイライト用にして雑多感を避けましょう。
media.ioで生成されたココアブラッシュの画像例
4) ハニードオリーブ

HEX: #D1A57A #F3EAD8 #B7A46A #6F6A3C #2C2B20
ムード: 陽気、素朴、ヴィンテージ
最適な用途: アルチザン食品ラベルやファーマーズマーケットポスター
蜂蜜の暖かみとオリーブの深みが午後の日差しや畑をイメージさせます。明るいタンは親しみやすさ、ダークオリーブは手作り感や伝統的な雰囲気を演出。オフホワイトの紙質やシンプルなセリフ体と合わせてクラシックに仕上げましょう。コツ:ミドルオリーブはマット紙に印刷して、濁りを防いでエッジをはっきり保つ。
media.ioで生成されたハニードオリーブの画像例
5) ウィート&インク

HEX: #CDA57A #F7F3EA #D7C2A5 #2E2E34 #5A6472
ムード: クリーン、モダン、編集風
最適な用途: ポートフォリオサイトやミニマルなプレゼン資料
ウィートのニュートラルとインキーなチャコールでギャラリーのようなすっきり感を演出。このライトブラウンのパレットは、シャープでプロっぽい印象も保ちつつ暖かみが欲しいときに最適です。オフホワイト×チャコールでレイアウト、スレートブルーはアイコンやリンクの控えめなアクセントに。コツ:本文はチャコール、スレートはホバー時にだけ使うと構造が明確に。
media.ioで生成されたウィート&インクの画像例
6) キャラメルコースタル

HEX: #C79A6A #F2E7D8 #8FB7C7 #2D6F8B #16323D
ムード: 爽やか、リラックス、フレッシュ
最適な用途: 旅行ブログのヘッダーやライフスタイル系SNS投稿
キャラメルサンドと海ガラスのようなブルーがゆったりした浜辺の雰囲気。暖かいタンで親しみやすく、涼しげなブルーが現代的でクリーンなコントラストに。ネイビーティール×キャラメルは見出しに、淡いクリームで背景を。コツ:写真はほんのり暖色系トーンにして、全体の統一感を。
media.ioで生成されたキャラメルコースタルの画像例
7) トーステッドデニム

HEX: #C6A17D #EFE7DD #3D5A80 #98AFC7 #1B2635
ムード: 自信、カジュアル、モダン
最適な用途: アプリのオンボーディング画面やSaaSブランディング
トーステッドタンとデニムブルーで、お気に入りのジャケットやよく使い込んだレザーのような感触。ライトブラウンの配色はフレンドリーで信頼感のあるUIに仕上げます。ディープネイビーは主要ボタンに、淡いブルーはサブパネルのやわらかさに使いましょう。コツ:オフホワイトの十分な行間で、ダークブルーに負けない暖かいベースを演出。
media.ioで生成されたトーステッドデニムの画像例
8) メイプルクレイ

HEX: #C58F66 #F4E9DD #D38A6C #8C4A3D #2B1D1A
ムード: 素朴、スパイシー、温かみ
最適な用途: レストランのメニューや秋のイベントフライヤー
メイプル&クレイのトーンは、暖かいオーブンやシナモン、手作りの陶器を想起。やわらかなクリームとリッチな赤みブラウンのバランスが食欲をそそります。ダークエスプレッソは可読性の高いメニューテキストに、クレイカラーは価格やセクション見出しにアクセントを。コツ:背景は明るく、濃いトーンは枠やアイコンのみに。
media.ioで生成されたメイプルクレイの画像例
9) アーモンドグラファイト

HEX: #C7A27E #F8F5F0 #DCCBB6 #5C5B60 #1E1E22
ムード: 洗練、落ち着き、上品
最適な用途: プロダクトLPやテック系資料
アーモンドニュートラルとグラファイトの影が磨き上げられた静かな高級感。やわらかなタンがレイアウトを親しみやすく、チャコールが構造や落ち着きを追加します。ヘッダーやアイコンにグラファイト、面積の広い部分にはアーモンドで、視覚的疲労感を抑えましょう。コツ:中間トープは区切り線として使い、重たすぎない奥行き感を演出。
media.io を使用して生成したアーモンドとグラファイトの画像例
10) カフェノワールとクリーム

HEX: #B98C66 #F9F1E6 #E5D1BD #6B4B3A #1D1412
ムード:クラシック、リッチ、居心地の良さ
最適な用途:コーヒーハウスのブランディングとロイヤルティカード
クリーミーなハイライトとカフェノワールの深みが、時代を超えたエスプレッソバーの雰囲気を演出します。このライトブラウンのカラーパレットは、温かみと伝統をすぐに伝えたいロゴに特に効果的です。ほぼブラックはスタンプや文字用に、タンとクリームは背景やパッケージパネルに使用します。ヒント:印刷では少し質感を加え、デジタル背景は明快さのためフラットに保ちましょう。
media.io を使用して生成したカフェノワールとクリームの画像例
11) セピアシトラス

HEX: #C8A06F #FFF1D6 #F0C75E #D9892B #5A3B1E
ムード:明るく、前向き、ノスタルジック
最適な用途:夏のプロモーションやフードデリバリー広告
セピアのぬくもりにシトラスのアクセントが加わり、日差しのあるポストカードや新鮮な皮の香りを感じさせます。イエローやオレンジのアクセントは、ブラウンを邪魔せずにエネルギーを加えます。クリーンなスペースにはクリームを、ボタンや割引バッジにはオレンジを使いましょう。ヒント:シトラスカラーは小さく控えめにポイント使いし、全体の洗練を保ちましょう。
media.io を使用して生成したセピアシトラスの画像例
12) モカミント

HEX: #C19B77 #F1E7DA #BFE3D1 #4E8C74 #243B33
ムード:クリーン、スパのよう、落ち着き
最適な用途:スキンケアパッケージや予約UI
モカのニュートラルにミントグリーンを加えることで、静かなスパルームや新しいタオルのような爽やかさを演出します。クールなグリーンがブラウンの重さや伝統的な印象を和らげます。濃いグリーンはCTAに、クリームは主要背景に使い、開放感を出しましょう。ヒント:アイコンの線は一番濃いグリーンにして統一感を持たせましょう。
media.io を使用して生成したモカミントの画像例
13) バーチローズ

HEX: #CBA585 #F6ECE6 #E8C3C3 #B26B7A #3F2B33
ムード:繊細、エレガント、親密
最適な用途:ブティックブランディングやエディトリアルルックブック
バーチタンとダスティローズは柔らかな布や温かい頬のライトのような雰囲気です。パレットは繊細ながら、タイポグラフィやアクセントにも十分なコントラストを持っています。プラム色は見出しに、ダスティローズは注目文やリボン、小さな形状に使いましょう。ヒント:印刷ならコートされていない紙を選ぶと、ローズトーンがより自然に映えます。
media.io を使用して生成したバーチローズの画像例
14) デザートナイト

HEX: #C09A78 #F2E8DE #8A6E5A #2B2B33 #0F1115
ムード:ムーディー、シネマティック、ラグジュアリー
最適な用途:プレミアムブランディングやランディングページヒーロー
砂漠の砂が夜の色にフェードしてドラマチックで映画のような雰囲気を作ります。ウォームタンが親しみやすさを保ち、ほぼブラックが高級感と権威を加えます。一番濃い色はヒーロー見出しに、サンドはメッセージの背後に柔らかな光として使いましょう。ヒント:トープとチャコールで繊細なグラデーションを加え、平坦な印象や強いコントラストを避けましょう。
media.io を使用して生成したデザートナイトの画像例
15) ヴィンテージブックショップ

HEX: #C3A07C #F3EDE3 #D9C1A8 #A88B63 #6E4E2F
ムード:ノスタルジック、静か、知的
最適な用途:ブックカバーや文房具セット
柔らかなブラウンと紙のようなクリームが、古本の背や静かな本棚、鉛筆で書いた余白を連想させます。このライトブラウンのカラーパレットは、文学的なブランド、ジャーナル、クラシックなパッケージの親しみやすさに最適です。濃いアンバーはタイトル用に、淡いクリームは背景用に、中間のタンはボーダーや枠に使用しましょう。ヒント:控えめな金箔のアクセントをひとつ加えるとヴィンテージの雰囲気を格上げできます。
media.io を使用して生成したヴィンテージブックショップの画像例
16) クレイ&カッパー

HEX: #C49A74 #F5E9DD #C06A4C #8C4B2E #2A1A14
ムード:大胆、手作り、温かみ
最適な用途:陶器ショップやハンドメイド商品タグ
クレイとカッパーのトーンは窯の熱やテラコッタの粉、手びねりのエッジを感じさせます。明るめのカッパーがパンチを効かせつつ、アースカラーらしさを保っています。タグの背景にはクリーム、ロゴやQRコードにはダークブラウンを使いましょう。ヒント:カッパーはアクセントカラーとして限定的に使い、意図的な印象を出しましょう。
media.io を使用して生成したクレイ&カッパーの画像例
17) ソフトアンバーUI

HEX: #C7A37E #F4F0EA #E0D4C6 #7C6A5B #2B2A2E
ムード:落ち着き、バランス、読みやすさ
最適な用途:ダッシュボードUIやデータ管理パネル
ソフトアンバーのニュートラルは、真っ白よりもやわらかくて落ち着きのある作業空間を作り出します。クリームからチャコールへのバリエーションでテーブルや図表、フォームの階層を明確にサポートします。一番濃い色はナビゲーションに、トープは区切り線に使い、画面を整理しましょう。ヒント:グラフ強調にはパレット外のコントラストのあるアクセントを1つだけ使い、くすんだ印象を避けましょう。
media.io を使用して生成したソフトアンバーUIの画像例
18) サンリットテラコッタ

HEX: #C79D74 #F7EEE5 #E07A5F #F2CC8F #3D405B
ムード:前向き、アーティスティック、温もり
最適な用途:クリエイティブスタジオサイトやイベントポスター
日差しを浴びたタンにテラコッタとゴールデンサンドを組み合わせると、黄金色に輝くスタジオの壁のような雰囲気になります。意外性のあるネイビーはモダンなエッジとなり、温もりを過度に田舎っぽくならないようにします。見出しにはテラコッタ、本文やロゴにはネイビーを使いましょう。ヒント:ベースレイヤーには必ずクリームを使い、温かいアクセントが鮮明に際立つようにします。
media.io を使用して生成したサンリットテラコッタの画像例
19) プレリーモーニング

HEX: #CFA880 #F3F7F1 #B7C4A1 #6B8F71 #2B3A2F
ムード:新鮮、アウトドア、穏やか
最適な用途:植物イラストやネイチャーブログヘッダー
プレリータンとやわらかいグリーンは、草についた朝露や静かな朝のそよ風を思わせます。背景用にも十分ソフトで、タイトルやバッジには十分な強さもあります。濃いグリーンは重要な文字に、淡いミントホワイトは全体の空気感を保つのに使いましょう。ヒント:一番明るい色にウォーターカラーテクスチャーを足して、ナチュラルさを出しながらごちゃつきを抑えましょう。
media.io を使用して生成したプレリーモーニングの画像例
20) フロステッドトープ

HEX: #C2A184 #FAF8F5 #E6DFD8 #A6A0A0 #3E3C3C
ムード:やわらかい、ミニマル、現代的
最適な用途:モダンインテリアのムードボードやタイポグラフィ投稿
フロステッドトープとささやくようなグレーは、薄いカーテン越しの静かな光を感じさせます。コントラストは控えめなので、ミニマルなレイアウトや落ち着いたムードボードに最適です。タイポグラフィにはディープグラファイトを、広い背景にはほぼホワイトを使いましょう。ヒント:中間グレーはラインの代わりに穏やかな影や区切り線に。
media.io を使用して生成したフロステッドトープの画像例
ライトブラウンに合う色は?
ライトブラウンはクリーミーホワイトやソフトベージュと簡単に組み合わせて、落ち着いたトーンのルックを作れます。見出しやUI要素に強いプロフェッショナルなコントラストが必要なときは、チャコールやエスプレッソ、ほぼブラックを加えてください。
新鮮な印象を加えたいなら、ライトブラウンにグリーン(セージ、オリーブ、フォレスト)やコースタルブルー(ティール、デニム、スレート)を合わせましょう。こうしたクールなアクセントがモダンさを保ち、温もりも失われません。
もっと活気を出したいときは、温かいアクセント(テラコッタ、カッパー、マスタード、シトラスオレンジ)を少量だけ使いましょう。小さなアクセント(バッジ、ボタン、アイコン)が、全体のシステムを意図的かつノイジーでない印象に仕上げます。
ライトブラウンのカラーパレットを実際のデザインに使う方法
まずは「サーフェスプラン」から。最も明るいクリーム/オフホワイトを背景に、タンをメインサーフェス(カード、パッケージパネル、セクション)として使います。一番濃い色はテキストやロゴ、ナビゲーション用に取っておき、読みやすさを確保します。
アクセントは最小限に。目立つアクセント(ブルー、グリーン、テラコッタなど)をひとつ選び、CTAやリンク、重要なハイライトに一貫して適用します。中間色を多数使ってごちゃつく事態を避けましょう。
印刷の場合は、紙選びもテストしましょう。暖色ブラウンは、用紙や仕上げによって発色が変化します。非コート紙はよりぬくもりが増し、マットコートは中間色の輪郭を際立たせます。
AIでライトブラウンパレットのビジュアルを作成する
HEXコードが既にある場合は、数分でリアルなブランドモックアップ、ポスター、UIコンセプトに変換できます。一番速いワークフローは、まずリファレンス画像を生成し、少しずつプロンプトを変えて繰り返します。
パレット名(ラテ、リネン、セージ、デニム、テラコッタなど)とデザイン形式(パッケージ、ランディングページ、招待状、ダッシュボード)を組み合わせることで、スタイルブレなく仕上げられます。「マット紙」「やわらかな影」「クリーンなシームレス背景」などの情報も加えてください。
気に入った見た目を見つけたら、プロンプト構造をキープして題材(メニュー→ラベル→ヒーローバナーなど)だけを差し替えれば、ビジュアルをキャンペーン全体で統一できます。
ライトブラウンのカラーパレット FAQ
-
ライトブラウンとされるHEXコードは何ですか?
ライトブラウンは、#C8A27A(ウォームラテタン)などタン系の範囲に多く存在します。よく似たライトブラウンは #C2A184~#CFA880 あたりに位置し、ゴールドからくすみの強さで前後します。 -
ライトブラウンは暖色ですか、それとも寒色ですか?
ライトブラウンは一般的にイエロー/オレンジの下地が強いため暖色系です。ブルーやミント、寒色グレーと合わせることで涼しくもでき、さらにテラコッタやカッパーのアクセントでより温めることもできます。 -
ライトブラウンの背景に最適なテキストカラーは?
ダークエスプレッソ、チャコール、ほぼブラックが、ライトブラウンにもっとも明瞭なコントラストとなります。アクセシビリティのためコントラスト比も確認し、#2B2A2E や #1E1E22 などパレットのダークトーンを活用しましょう。 -
ライトブラウンパレットに合うベストなアクセントカラーは?
セージ/オリーブグリーン、デニム/コースタルブルー、ダスティローズ、テラコッタが信頼できるアクセントです。より鮮やかな印象はマスタードやシトラスオレンジをアイコンやボタン等のポイントで加えましょう。 -
ライトブラウンはモダンなUIデザインに合いますか?
はい、ライトブラウンは表面や背景のウォームニュートラルとして優れています。オフホワイトと組合せて余白をつくり、ナビゲーションやタイポグラフィにはダークチャコールで、UIをクリーンかつ読みやすく保ちましょう。 -
ライトブラウンのパレットが「くすんで」見えないようにするには?
テキストには明るい背景色、メインのタンカラー、ダークなアンカーカラーの3色を使いましょう。ミッドトーンは控えめにし、十分な余白を取って、アクセントカラーの使用も最小限にすると、全体のデザインがすっきりまとまります。 -
ライトブラウン系のカラースキームが最も効果的な業界は?
カフェやフードブランド、ウェルネスやスキンケア、インテリア、ハンドメイド商品、編集ポートフォリオ、エコ商品などでよく使われます。ライトブラウンは温かみ、上質さ、自然素材を印象付けるからです。

