ティールカラーの配色20選｜カラーパレット例＆HEXコード

ティールは青と緑の間に位置し、「落ち着き」と「新鮮さ」のバランスが取れています。そのため、ティールのカラーパレットは、冷たさを感じさせず明快さが求められるインターフェース、ブランド、空間などで使いやすいです。

下記では選りすぐりの20種類のティールの配色とHEXコードをご紹介します。加えて、ティールとニュートラル、メタリック、暖色アクセントの組み合わせ方について、モダンで読みやすいデザインを作るためのガイドも記載しています。

なぜティールのパレットはこんなに使いやすいのか

ティールは柔軟性が高く、UIではクリーンでモダン、ブランディングではリッチで高級感を演出できます。シアン寄り（明るめ）やグリーン寄り（深み）の調整で印象が変えられます。

また、コントラストとの相性も抜群です。深いティールはオフホワイトと組み合わせて雑誌のようなレイアウトに、軽いシーフォームトーンはカードやフォーム、オンボーディング画面のフレンドリーな背景として活躍します。

そして最後に、ティールは暖色と寒色のアクセントを橋渡しできる色です。コーラルやゴールドのようなエネルギッシュな色と合わせても、混乱せず自然な「デザイン感」が生まれるのはそのためです。

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

1) ラグーンブリーズ

HEX: #0f766e #14b8a6 #5eead4 #f1f5f9 #0b1320

雰囲気： 落ち着き、海辺、新鮮

おすすめ用途： ウェルネスアプリ UI

穏やかなラグーンカラーは、澄んだ水や涼しい朝の風を連想させます。ウェルネスのダッシュボードや習慣トラッカー、明瞭さが重要なクリーンなオンボーディング画面に最適です。明るいアクアはスレートやほぼ黒のテキストと合わせて読みやすく、ライトミントはカードやさりげないハイライトに使いましょう。使用ポイント：一番濃い色はヘッダーやナビゲーションに使い、明るいアクセントが空気感を保ちます。

media.ioを使って生成したラグーンブリーズの画像例

Media.io

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

今すぐ無料で試す

2) ディープハーバー

HEX: #063940 #195e63 #3e838c #f4f1de #1b1f24

雰囲気： 海の雰囲気、洗練、ムーディー

おすすめ用途： シーフードレストランのメニューデザイン

深いハーバーカラーは、波止場の夜や潮風、磨かれた木材を感じさせます。高級感はありつつ派手すぎないレストランのメニューやブランドシステムに適しています。暗めのティールはウォームオフホワイトと合わせ、穏やかな青緑は区切り線やアイコンに使いましょう。使用ポイント：クリーム色は余白にたっぷり使い、タイポグラフィの品格と読みやすさを演出します。

media.ioを使って生成したディープハーバーの画像例

3) カッパータイド

HEX: #0b525b #1f7a8c #bfdbf7 #e6beae #d95d39

雰囲気： 暖かみ、クラフト感、親しみやすさ

おすすめ用途： キャンドルパッケージ

カッパーと水のティールは、陽射しを受けた波が古びた金属に触れるイメージ。クラフト感のあるパッケージやブティック商品の立ち上げ、キャンドルラベルに理想的です。錆のアクセントは淡いブルーと調和させ、強いティールはロゴや縁取りに。使用ポイント：銅色は控えめにワンポイント使用し、配色に落ち着きを保ちます。

media.ioを使って生成したカッパータイドの画像例

4) ミンテッドマーブル

HEX: #0f766e #2dd4bf #a7f3d0 #f8fafc #94a3b8

雰囲気： スパ風、明るい、現代的

おすすめ用途： バスルームインテリアのムードボード

ミントと柔らかなティールは、磨かれた石やスチーム、静かなスパのイメージ。バスルームやパウダールーム、ミニマルなキッチンにも好適です。クールなグリーンはライトグレー、淡木、ブラッシュニッケルと組み合わせれば、落ち着いたコンテンポラリーに。使用ポイント：最も濃いティールは、タオルや目地など細部に繰り返して意図的な空間演出を。

media.ioを使って生成したミンテッドマーブルの画像例

5) レインフォレストインク

HEX: #064e3b #0f766e #115e59 #0b1320 #e2e8f0

雰囲気： 濃密、ドラマティック、映画的

おすすめ用途： 環境スリラーブックカバー

インキーなグリーンと深いティールは、熱帯雨林の影や隠れた小道のよう。サスペンス系ブックカバーやドキュメンタリーのキービジュアル、環境キャンペーンに適しています。ほぼブラックは淡グレー文字と合わせ、ティールはタイトルやバッジのポイントアクセントに。使用ポイント：カバーはコントラストをはっきり出してサムネイルでも可読性を保ちます。

media.ioを使って生成したレインフォレストインクの画像例

6) レトロプールサイド

HEX: #008c9e #00b4d8 #90e0ef #ffd166 #073b4c

雰囲気： ポップ、陽気、懐かしい

おすすめ用途： サマーイベントフライヤー

明るいプールブルーとシトラスイエローが、ロードサイドのモーテルやビニールラウンジチェアを思い出させます。サマーフライヤー、ポップアップイベント、元気なプロモグラフィックに最適。イエローは濃紺の見出しと合わせ、淡いアクアは余白ある背景に。使用ポイント：グラデーションは控え、シェイプは大胆に、レトロ感を維持しましょう。

media.ioを使って生成したレトロプールサイドの画像例

7) デザートオアシス

HEX: #0f766e #34d399 #fbbf24 #fef3c7 #92400e

雰囲気： 陽射し、冒険的、ウェルカム感

おすすめ用途： 旅行ブログのヒーローバナー

ティールとサボテンのグリーンは、暖かな砂漠の砂に映える日陰のオアシスのよう。エネルギッシュながらネオン過ぎない配色で、旅行ブログや行程ページ、ガイドテンプレートにぴったり。ゴールドはティールのボタンと合わせ、クリームは写真と見出しメインのキャンバスに。使用ポイント：ブラウンは細い区切りやキャプションに控えめに使い、全体を落ち着かせましょう。

media.ioを使って生成したデザートオアシスの画像例

8) スレート＆シーフォーム

HEX: #0f766e #2dd4bf #64748b #1e293b #f1f5f9

雰囲気： モダン、自信、クリーン

おすすめ用途： SaaSダッシュボードUI

クールなシーフォームとスレートグレーは、ガラス建築や澄んだ朝の空気のイメージ。こうしたティールパレットは、SaaSのダッシュボードやアナリティクスビュー、管理画面に最適です。スレートのタイポとシーフォームのハイライトは、ステート・タグ・アクティブナビゲに。使用ポイント：一番明るいミントは成功や選択中に限定し、インターフェースの一貫性を保ちます。

media.ioを使って生成したスレート＆シーフォームの画像例

9) コーラルカレント

HEX: #0f766e #14b8a6 #fb7185 #fff1f2 #2d1b2d

雰囲気： 活気、トレンド、ソーシャル

おすすめ用途： ビューティーブランドのSNS投稿

鮮やかなコーラルとクリーンなティールは、ポップアートのメイクや光沢あるパッケージを思わせます。SNSのテンプレート、新商品発表、クリエイターキットなど、素早く注目を集めたい時に効果的です。コーラルの見出しは深いプラム色と合わせてコントラストをつけ、淡いブラッシュを背景に。使用ポイント：コーラルは１投稿につき１〜２箇所のみ使い、フィードの統一感を守りましょう。

media.ioを使って生成されたサンゴカレントの画像例

10) ノルディックティールニュートラル

HEX: #115e59 #0f766e #e5e7eb #f9fafb #111827

雰囲気： ミニマル、実用的、落ち着き

おすすめ用途： ECプロダクトページ UI

やわらかいグレーと mutedなティールが、北欧のテキスタイルや整然と並ぶ棚を連想させます。信頼感やすっきりとした印象が重要な商品ページやチェックアウトフローに最適です。暗いインク色と明るい背景を組み合わせ、ティールはリンクやトグル、価格のハイライトに活用しましょう。使い方のコツ：もっとも強いティールはプライマリーボタン用に残しておくことで、コンバージョンアクションが目立ちます。

media.ioを使って生成されたノルディックティールニュートラルの画像例

11) エレクトリックピーコック

HEX: #006d77 #00a896 #02c39a #ffd166 #001219

雰囲気： ボールド、華やか、高エナジー

おすすめ用途： 音楽フェスティバルのポスター

ピーコックティールとネオンミントは、ステージライトが夜の空気を切り裂くようなイメージです。このパレットは、フェスのポスターやナイトライフのプロモーション、高インパクトな告知に最適です。明るいグリーンと深いブラックをタイポグラフィに組み合わせ、イエローはキーバンドの背後のスポットライトアクセントに。コツ：文字は大きくシンプルにして、鮮やかな色どうしが可読性を妨げないようにしましょう。

media.ioを使って生成されたエレクトリックピーコックの画像例

12) ヴィンテージアポセカリー

HEX: #134e4a #0f766e #a3b18a #f2e8cf #6b4f4f

雰囲気： アーシー、ノスタルジック、手作り感

おすすめ用途： ハーバルトニックボトルのパッケージ

アーシーなティールにセージとパーチメントのトーンが加わることで、古いラベルやガラス瓶、ドライハーブのような雰囲気です。薬局風パッケージ、小規模フードブランド、ファーマーズマーケットの看板に最適。パーチメントと深いティールでクラシックなラベルコントラストを作り、くすんだ茶色はヴィンテージ調の枠線に。コツ：繊細な紙のテクスチャーを加え、パレットはマットに保つと手作り感を演出できます。

media.ioを使って生成されたヴィンテージアポセカリーの画像例

13) アークティックフィヨルド

HEX: #0e7490 #22d3ee #a5f3fc #e0f2fe #0f172a

雰囲気： シャープ、氷のよう、精緻

おすすめ用途： フィンテックランディングページUI

氷のようなブルーやティールは氷河の水や鋭い冬の光のような印象です。速さ、清潔感、安全性が大事なフィンテックのランディングや製品画面に最適。ダークネイビーと明るいシアンでCTA（行動喚起）を際立たせ、最も薄い色はセクションやカードに。コツ：アイコンはモノクロにし、アクセントカラー1色で焦点を作りましょう。

media.ioを使って生成されたアークティックフィヨルドの画像例

14) ブラッシュラグーン

HEX: #0f766e #5eead4 #fbcfe8 #fff7ed #374151

雰囲気： ソフト、ロマンチック、軽やか

おすすめ用途： 結婚式招待状セット

やわらかなブラッシュと水のようなティールは、シーグラスやシルクリボン、春の花を思わせます。ウエディングステーショナリーやブライダルシャワー招待状、上品な RSVP カードに最適。チャコールの文字をブラッシュ背景に合わせ、ティールはモノグラムや小さいイラスト程度のアクセントにするとバランス良好。コツ：パステルをメインとアクセントで分けてキャンディのようなイメージを避けましょう。

media.ioを使って生成されたブラッシュラグーンの画像例

15) チャコールリーフ

HEX: #0f766e #134e4a #334155 #0b1320 #f8fafc

雰囲気： スリーク、テッキー、プレミアム

おすすめ用途： 年次報告書 エディトリアルレイアウト

ダークなリーフトーンは深い水とクリーンでモダンなエッジを感じさせます。編集レイアウトや年次報告書、洗練されたプレゼン資料に最適。たっぷり白の余白、細いルール、シャープなグラフと組み合わせると上質な仕上がりに。コツ：本文は白に載せ、濃い色合いはサイドバーやセクション冒頭に使用しましょう。

media.ioを使って生成されたチャコールリーフの画像例

16) ゴールデンケルプ

HEX: #0f766e #14b8a6 #f59e0b #fef3c7 #3f2d20

雰囲気： 贅沢、海岸風、暖かみ

おすすめ用途： レストランインテリアアクセントプラン

ティールにゴールドのハイライトは、日差しの差し込む水中の昆布を連想させます。ホスピタリティ空間やバー、ダイニングで暖かさと新鮮さを両立。ティールのシートと真鍮の照明、クリーム色の壁にダークブラウンで木やレザーのアクセントをプラス。コツ：照明にゴールド色を取り入れ、夜の空間を輝かせましょう。

media.ioを使って生成されたゴールデンケルプの画像例

17) ストーミーベイ

HEX: #0b525b #144552 #1c2e4a #9be7d8 #f1f5f9

雰囲気： ストーミー、集中、プロフェッショナル

おすすめ用途： プレゼンテーションスライドテーマ

ストーミーベイのトーンは雨の海の上のような安定感と真剣さです。スライドやクライアントプレゼン、キーノートで落ち着いた権威を持たせたい時に最適です。ディープネイビーと明るい背景を合わせ、淡いミントでコールアウトやデータのハイライトに。コツ：グラフはほぼモノクロで、アクセント1色だけで聴衆を誘導しましょう。

media.ioを使って生成されたストーミーベイの画像例

18) スプリングユーカリ

HEX: #0f766e #2dd4bf #bbf7d0 #fefce8 #84cc16

雰囲気： フレッシュ、ボタニカル、前向き

おすすめ用途： 水彩ボタニカルイラスト

フレッシュなグリーンとやわらかなティールは、日光で乾くユーカリの葉のイメージ。ボタニカルラベルや優しいSNSグラフィック、季節のキャンペーンにぴったりです。バターイエローと明るいミントでウォッシュを加え、一番濃いグリーンで茎や焦点の葉を描きます。コツ：イラストの周りに余白を多めにとり、パレットを軽やかに保ちましょう。

media.ioを使って生成されたスプリングユーカリの画像例

19) ネオンアクアリウム

HEX: #0f766e #00f5d4 #00bbf9 #9b5de5 #0b1320

雰囲気： フューチャリスティック、エナジェティック、ネオン

おすすめ用途： ゲーミング配信オーバーレイUI

ネオンアクアとバイオレットは、夜の水族館で光るサンゴの印象。配信オーバーレイやeスポーツグラフィック、個性とコントラストが重要なUIスキンに合います。暗いベースに明るいアクセントでパネルやアラートを作り、パープルはラベルやタイマーなどサブの強調に。コツ：全てのネオン色を一度に使わず、主役とサブアクセントを分けて明瞭さを保ちましょう。

media.ioを使って生成されたネオンアクアリウムの画像例

20) クラシックティール＆タン

HEX: #0f766e #115e59 #d6a15e #f5e6d3 #3a2f2a

雰囲気： タイムレス、暖かみ、エディトリアル

おすすめ用途： ファッションルックブック誌面

クラシックなティールとタン、クリームの組み合わせは、仕立ての良いコート、レザー小物、美術館の照明を思わせます。こうしたティールの配色はルックブックやライフスタイル記事、プレミアムカタログに最適。タンはブロック、ティールは見出しに、クリームは商品写真を明るくナチュラルに見せる役割です。コツ：ページ番号や線など細部にブラウンを繰り返し使い、一体感のある印刷仕上げに。

media.ioを使って生成されたクラシックティール＆タンの画像例

ティールと合う色は？

ティールは、白やアイボリー、ライトグレーのようなシャープなニュートラルカラーと組み合わせると、クリーンで現代的なルックになります。深みと可読性を持たせるには、ティールにチャコールやスレート、ほぼ黒などの文字・ヘッダー色を合わせましょう。

暖かいコントラストなら、サンゴ、テラコッタ、タン、ゴールデンイエローなどがティールの邪魔をせずエネルギーをもたらします。高級感が欲しい場合は、ティールに真鍮・ゴールドやつや消しニッケルの金属色を合わせて、好みの暖かさやクールさを調整してください。

よりトーナルなティール配色にしたい場合は、ティールにネイビーやブルーグリーンを重ねましょう。これでパレットが洗練され、ダッシュボードやレポート、エディトリアル向けに特に効果的です。

実際のデザインでティールパレットを使う方法

まず役割分担から始めます：構造用（ヘッダー・ナビ）のダークティールやネイビー、ブランドの個性には中間のティール、背景やカードには淡い色を選びます。こうすることで、画面やページ全体のヒエラルキーが一貫します。

コントラストも意識しましょう。ティールが背景の場合はオフホワイトや非常に濃い文字色を、アクセントなら注目すべきUI状態（アクティブ・選択・成功時）だけを目立たせると、システムがすぐに理解されます。

印刷やインテリアの場合は、ティールは意図的に小さな箇所――ルール線、アイコン、タオル、トリムなど――に繰り返してニュートラルが空間の大部分を占めるように。暖色アクセント（ゴールド、タン、サンゴ）が1カ所焦点になると効果的です。

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

これらのティールパレットのアイデアを実際のデザインに試したい場合は、プロンプトからモックアップを数秒で生成できます。雰囲気やコントラスト、アクセントバランスを本格レイアウト前に素早くチェックできます。

アクセント（サンゴ vs ゴールド vs タン）だけを変えてティールベースはそのまま、複数のバリエーションを作ってみましょう。ブランドやUIの雰囲気に合うティールの組み合わせがすぐ見つかります。

Media.ioを使えば、短い説明文からポスター、UI画面、パッケージ、インテリアムードボードなどを洗練されたビジュアルにブラウザだけで変換できます。

次： ブルーカラーパレット