Best 20 Teal and Red Color Palettes with Hex Codes

ティールとレッドは、モダンでありながら時代を超越した印象を与える珍しい組み合わせの一つ——冷たい水と温かい火の出会いです。上手く使えば、瞬時にヒエラルキーを生み出し、強い感情と印象的なコントラストをデジタルや印刷物で演出できます。

下記に、ブランド、UI、ポスター、パッケージ、インテリア装飾に使える20のティール×レッド配色パレット案（HEXコード付）と、ニュートラル色やアクセントのバランス実践的ポイントを紹介します。

ティール×レッドパレットがうまく機能する理由

ティールは安定感と明瞭さを、レッドは緊急性と感情を加えます。一緒に使うことで、強いインパクトのコントラストが生まれ、注意を自然に引きつけます——CTAやフォーカルポイント、視覚的な序列付けに理想的です。

この組み合わせは様々なスタイルに馴染みます：深みのあるティールとブリックレッドはヘリテージやエディトリアル、鮮やかなティールとピンクレッドは遊び心あるモダンな雰囲気に。ポイントは、オフホワイトやサンド、チャコールのようなニュートラル色で彩度をコントロールすることです。

ティールとレッドは暖色・寒色スペクトラムの反対側にあるため、互いを平衡させつつも平坦になりません。ダークなテキスト色と落ち着いた背景でまとめることで、パレットは読みやすく洗練された印象を保ちます。

20種類以上のティール×レッド配色アイデア（HEXコード付）

1）ハーバーアンバー

HEX： #0f8b8d #e63946 #f1faee #a8dadc #1d3557

雰囲気： シャープなマリン調、自信に満ちた

最適用途： 海沿い・旅行・テック系ブランドアイデンティティ

シーグラスのようなティールにエンバーの赤を合わせると、夕暮れ時の港のように清潔でエネルギッシュな印象を与えます。タイポグラフィや構造にはネイビーを使い、赤はキーアクションやハイライトのみに使いましょう。特にオフホワイトのレイアウトでは心地よいコントラストが得られます。コツ：赤はボタン、バッジ、アイコン等の小さなアクセントのみにし、ビジュアルノイズを避けましょう。

media.ioで生成したハーバーアンバーの画像例

Media.io

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

今すぐ無料で試す

2）デザートリーフ

HEX： #1b9aaa #d1495b #f7f3e3 #eddea4 #3d405b

雰囲気： 砂に温められた、リラックス感

最適用途： リビングルームのアクセントやライフスタイルコンテンツ

焼けた砂の色がティールとレッドを柔らかくなじませ、気取らない落ち着きのペアに仕上げます。クリームやウィート色は壁やファブリック、空白スペースなど広めに使い、ティールはラグやキャビネットなど大きい面積で活用して。くすんだレッドはテラコッタのようで、アートプリントやクッションにピッタリです。コツ：ティールはレッドの2倍程度使うと安定した印象の部屋に。

media.ioで生成したデザートリーフの画像例

3）ヴィンテージビストロ

HEX： #0b7285 #c92a2a #fff4e6 #e9c46a #2d2a32

雰囲気： 居心地よく食欲をそそる

最適用途： レストランメニューやカフェ看板

濃いティールと伝統的なレッドで、エナメルタイルや手書きのスペシャル、温もりあるキッチンの輝きを連想させます。クリーミーな背景を広く使い料理写真や見出しの余白をしっかり確保。マスタードゴールドは価格や区切り、季節の注目にも活躍します。コツ：ダークテキストはセリフ体、ティールラベルはシンプルなサンセリフ体が読みやすいです。

media.ioで生成したヴィンテージビストロの画像例

4）アークティッククランベリー

HEX： #2a9d8f #b23a48 #f8f9fa #ced4da #343a40

雰囲気： 清らかな冬、シャープ

最適用途： データダッシュボードや解析UI

氷のようなニュートラルカラーで、ティールとクランベリーが冷たく現代的でシャープな印象になります。このティール×レッド配色は、状態やレベル分けを明確に見せたいダッシュボードに最適です。テキストやグリッド線にはチャコール、警告は赤、成功やアクティブ選択はティールを使い分けて。コツ：ボタンはティール、赤は本当に注意喚起したい時のみ登場させましょう。

media.ioで生成したアークティッククランベリーの画像例

5）トロピカルコントラスト

HEX： #00a6a6 #ff4d6d #fff0f3 #ffd6a5 #2b2d42

雰囲気： 明るくポップ、夏らしい

最適用途： SNS投稿やプロモーションバナー

鮮やかなティールとパンチの効いたピンクレッドで、ビーチタオルやフルーツシャーベットのように一気にハッピーな雰囲気に。背景には淡いピンク、見出しにはダークを使うと読みやすくなります。ピーチカラーはバッジやシール、期間限定ラベルなどのセカンドアクセントに最適です。コツ：ピンクエリアにグレインテクスチャをかけると大きな面積でものっぺりしません。

media.ioで生成したトロピカルコントラストの画像例

6）ライブラリーレザー

HEX： #006d77 #c1121f #faedcd #d4a373 #283618

雰囲気： 伝統的で洗練

最適用途： 書籍カバーやエディトリアルブランディング

深いティールと使い込まれたレッドが、革装丁や静かな自習室、学術的な雰囲気を思わせます。クリーム色とタン色を紙のようなベースに使うことで、上質で読みやすい印象に。オリーブグリーンで暖色と寒色の橋渡しも◎。コツ：コントラスト高めのセリフ体見出しと、ティールは囲みやルール、小さなモチーフに使うとスマートです。

media.ioで生成したライブラリーレザーの画像例

7）コーラルオーディトリアム

HEX： #0c8599 #ef233c #fefae0 #8ecae6 #023047

雰囲気： スポットライトのエネルギー、爽快

最適用途： イベントポスターやカンファレンスグラフィック

明るいティールと舞台の赤で、カーテンが開きマルキーで明快な発表がされる瞬間のよう。ペールクリームは広く余白をとり、遠くからでもタイトルが目を引くように。スカイブルーはスケジュールやスピーカー名、サブ見出しに使いやすい補助色です。コツ：最も濃いネイビーは小さな文字やQRコードで、スキャン性もUP。

media.ioで生成したコーラルオーディトリアムの画像例

8）ミッドナイトレガッタ

HEX： #005f73 #ae2012 #e9d8a6 #0a9396 #001219

雰囲気： ムーディーで高級感

最適用途： プレミアムブランドやヒーローセクション

インクのような影と銅色のレッドで、暗い水面を切って進むヨットのようなシネマティックな雰囲気に。ほぼブラックを背景、ライトサンドでタイポやキーラベルを持ち上げて。ティールは広い面やグラデーションに、レッドは上品なアクセントに最適です。コツ：ダーク背景にゴールド気味のアイコンラインを引くと仕上がりが一段上に。

media.ioで生成したミッドナイトレガッタの画像例

9）クレイポタリー

HEX： #2ec4b6 #e71d36 #fdfffc #ff9f1c #011627

雰囲気： ハンドメイド感、鮮やか

最適用途： アルチザン製品のパッケージやラベル

新鮮なティールとトマトレッドは、スタジオシェルフの上の釉薬をかけた陶器のように際立ちます。ホワイトをたっぷり使うことで、鮮やかなアクセントがうるさくならず計算された印象に。オレンジは手作り感ある暖かさを添えるのに最適で、シールやバッチナンバー、フレーバー表記などにおすすめです。コツ：細かな原材料表記などはディープネイビーで書くと小さいラベルも読みやすさキープ。

media.ioで生成された陶器の画像例

10) ガーデンランタン

HEX： #118ab2 #e63946 #f1faee #a8dadc #457b9d

雰囲気： フレッシュな春、親しみやすい

最適用途： 植物イラストと季節のプロモーション

クールなティールとランタンレッドは、明るい花と朝の空気を感じる庭の小道のようです。ソフトミントと淡いティールは、空のグラデーションや紙の質感、柔らかな背景に使えます。深いブルーはアウトラインやキャプション、小さなディテール作業に最適です。ヒント: 赤は花やフォーカルポイントに使って、自然に視線を導きましょう。

media.ioで生成されたガーデンランタンの画像例

11) レトロアーケード

HEX： #00b4d8 #ff006e #f8f9fa #ffbe0b #3a0ca3

雰囲気： ネオンの楽しさ、高いコントラスト

最適用途： ゲームのインターフェイスと配信オーバーレイ

エレクトリックティールとホットなレッドピンクは、アーケードのライトや素早いボタン操作を感じさせます。この色の組み合わせは、UI の階層（特にアクティブ状態や通知）を強調したいときに輝きます。コンテンツパネルには白、コインやバッジ、進捗のハイライトには黄色が最適です。ヒント: パープルは見出しやナビゲーションバー用にして、ネオンアクセントが読みやすいように保ちましょう。

media.ioで生成されたレトロアーケードの画像例

12) 北欧キャビン

HEX： #1f7a8c #bf4342 #eae2b7 #b7b7a4 #2f3e46

雰囲気： 静かで落ち着いた

最適用途： 居心地の良いインテリアやホームデコボード

控えめなティールとブリックレッドは、塗装された木やウールのブランケット、穏やかな冬の週末のような雰囲気です。温かいベージュをメインフィールドとして使い、テキスタイルや背景にグレージュで深みを加えましょう。キャビネットやアクセントウォールにはティール、小さなデコ（クッションやアート）にはレッドを。ヒント: マットな仕上げを選ぶことで、柔らかく自然な印象を保ちましょう。

media.ioで生成された北欧キャビンの画像例

13) フェスティバルポスター

HEX： #0081a7 #f07167 #fdfcdc #fed9b7 #001f54

雰囲気： 晴れやか、社交的

最適用途： 音楽フェスティバルフライヤーや屋外イベント

明るいティールとコーラルレッドは、夏のステージやペーパーブレスレット、澄んだ青空のイメージ。淡いクリーム色をメインの背景に使うことで、遠くからでもポスターが目に留まります。ピーチはラインナップやスポンサー部分に最適。ヒント: 最も暗いブルーは本文用にして、印刷時にも小さな文字がくっきり読めるようにしましょう。

media.ioで生成されたフェスティバルポスターの画像例

14) ミニマルコマースUI

HEX： #0a7a7a #d7263d #f6f7f8 #cfd8dc #263238

雰囲気： クリーン、コンバージョン重視

最適用途： EC UI と商品ページ

クールなティールにシャープな赤を合わせると、モダンで信頼感があり、アクションに最適です。ライトグレーをベース、チャコールをタイポグラフィーに使って可読性を確保しましょう。ティールは主なアクションや選択したフィルター用、赤はエラーや在庫警告、期間限定タグ用に。ヒント: 一貫したスペースと細い区切りで、パレットが軽やかになります。

media.ioで生成されたミニマルコマースUIの画像例

15) アルチザンコーヒーラベル

HEX： #0f766e #c53030 #fff7ed #d6bcfa #2d3748

雰囲気： クラフト、ブティック

最適用途： コーヒーパッケージやラベルシステム

濃いティールとローストレッドは、カフェのタイルやスタンプ、暖かなグラインダー音の雰囲気。クリーミーな背景は未加工の紙に似せて、親しみやすさを演出できます。ラベンダーを少し加えると、焙煎ノートや産地、季節限定にモダンなひねりを添えます。ヒント: アイコンや小さな文字はダークスレートでまとめれば、きれいに印刷できます。

media.ioで生成されたアルチザンコーヒーラベルの画像例

16) コースタルウエディングスイート

HEX： #2f9c95 #d64045 #fffaf0 #f7d9c4 #1f2937

雰囲気： ロマンチック、エアリー

最適用途： 結婚式の招待状や当日のステーショナリー

ソフトなティールとローズレッドは、海辺の誓いやシルクリボン、淡い夕日のよう。アイボリーやピーチを紙面のメインに使えば、エレガントな印象が保てます。名前や詳細にはダークスレート、モノグラムにはティール、小さな装飾（封蝋など）はレッドを。ヒント: 各カードでアクセントを1つに絞れば、統一感のあるセットになります。

media.ioで生成されたコースタルウエディングスイートの画像例

17) アスレチックチームキット

HEX： #007c7a #d00000 #f5f5f5 #ffba08 #03071e

雰囲気： 競争的、大胆

最適用途： スポーツブランディングとチームユニフォーム

力強いティールと純粋なレッドは、スピード感や試合日の視認性抜群。ベースはブラック、ナンバーやスポンサー表示にはホワイトでコントラストを。ゴールドはトリムやキャプテンバッジ、小さなパターンのアクセントに最適。ヒント: ユニフォームのレイアウトはシンプルにして、色がスタンドでも映えるようにしましょう。

media.ioで生成されたアスレチックチームキットの画像例

18) スパのパンフレット

HEX： #4ecdc4 #ff5a5f #f7fff7 #ffe66d #1a535c

雰囲気： 穏やか、気分を上げる

最適用途： ウェルネスパンフレットやプロモ冊子

フレッシュなティールとやさしい赤は、暖かいタオルと涼しい水のバランスが取れた心地よい雰囲気。ほぼ白の色味を背景に、ディープティールを見出しや区切りに。黄色は新メニューや季節パックのハイライトに使いましょう。ヒント: 赤の大きなブロックは避け、小さなアイコンや予約の案内として使うのがおすすめ。

media.ioで生成されたスパパンフレットの画像例

19) キッズストーリーブックUI

HEX： #00a8a8 #ff3b3f #fef9ef #ffd166 #26547c

雰囲気： 明るく、親しみやすい

最適用途： 子ども向け学習アプリやストーリーブック画面

明るいティールとキャンディアップルレッドは遊び心があり安全、ナビゲートしやすい配色です。背景はクリーミーに保ち、大胆な色はボタンやキャラクターに使用。黄色はご褒美や星、進捗など励ましシーンにぴったり。ヒント: ボタンの余白を増やし、テキストにはネイビーを使い、アクセシビリティも配慮しましょう。

media.ioで生成されたキッズストーリーブックUIの画像例

20) シネマティックタイトルカード

HEX： #0b525b #9b2226 #f2e9e4 #cddafd #1b263b

雰囲気： ドラマチック、映画的

最適用途： 映画ポスターやタイトルデザイン

ダークティールとディープレッドは、サスペンスやベルベットカーテン、徐々に盛り上がるサウンドトラックを思わせます。オフホワイトはクレジットやサポートテキストに。淡いブルーは文字の背後やグラデーションのハイライトに控えめに使いましょう。ヒント: レッドを最も暗いネイビーの上で試して、細かいディテールが印刷で消えないか確認しましょう。

media.ioで生成されたシネマティックタイトルカードの画像例

ティール×レッドに合う色は？

ニュートラルカラーは最も合わせやすいです。暖かいオフホワイト（アイボリーやクリーム）、クールなホワイト、ライトグレーでティールとレッドがぶつかるのを防ぎます。文字や構成にはピュアブラックよりもチャコールや深いネイビーが一般的にきれいに見えます。

さらに暖かみを加えたい場合は、サンド、タン、くすみゴールドがおすすめ。ティールの冷たさとレッドの熱さをつなぎ、より自然に感じさせます。モダンなひねりが欲しい場合は、やわらかなブラッシュや淡いラベンダーをそっとアクセントに加えましょう。

最大のコントラストが必要な場合は、背景を明るく、ティールを主なブロック、赤はごく小さなアクセントに。ダークモードの場合はほぼ黒/ネイビーの背景にライトサンドをタイポグラフィーに使い、レッドは控えめに追加します。

ティール×レッド配色を実際のデザインで使う方法

まず役割分担から始めましょう。メインカラー（多くはティール）、目立たせたいカラー（レッド）、背景用のニュートラルカラーを決めると、ページやポスター全体がうるさくなりません。

UIでは、レッドは重要な状態（エラーや警告、在庫なし）のみ、ティールはポジティブなアクション（主ボタン、トグル、アクティブナビゲーション）に使います。印刷の場合は、赤色部分がティールや濃色の背景でディテールを失わないよう試し刷りをしましょう。

ブランディングやインテリアでは、メイン色をアクセントより頻繁に使いましょう―60/30/10 くらいが目安。ティールは大きなエリア（壁、ヒーローセクション）向き、レッドは小さなアクセント（バッジ、アイコン、クッション、花柄）に最適です。

AIでティールレッドパレットのビジュアルを作ろう

HEXコードがすでにある場合、一番速いパレット検証方法は実際にレイアウトへ適用してみることです。ポスターやUI、ラベル、室内シーンなど実例で見ることで、コントラスト不足や中間色の濁り、派手すぎるアクセントの問題点にも早く気づけます。

Media.ioのテキスト to 画像生成機能を使えば、「ブランドアイデンティティボード」「EC UI」「結婚式招待状セット」などのプロンプトですぐに配色例を作成し、ちょうど良いバランスになるまで何度でも調整できます。

方向性が決まったら、プロンプトは常に統一しつつ、一度に変える変数（背景や文字色、アクセント比率）を一つずつにして、統一感のあるティール＆レッドアセットセットを構築しましょう。

次へ： ローズピンクのカラーパレット