人気のティールブルーカラーパレット20選｜HEXコードと活用のコツ

ティールブルーは、海のような静けさとテクノロジーの清潔感の間に位置しているため、穏やかな印象を与えつつも、色あせて見えることがありません。そのバランスのおかげで、ブランド、UI、モダンなインテリアにも信頼できるカラーとして選ばれています。

以下に、HEXコード、雰囲気のメモ、実用的な組み合わせのヒントを含むティールブルーのカラーパレット20選をご紹介します。また、AIプロンプトも付いているので、視覚イメージも簡単に生成できます。

ティールブルーパレットが効果的な理由

ティールブルーは青の安定感と緑のフレッシュさを持ち合わせているので、信頼感とモダンさの両方を感じさせます。実際には、ダッシュボードや金融、医療などのシリアスなインターフェイスにも合いながら、親しみやすい印象を与えることができます。

コントラストの相性も良く、深いティールブルーはナビゲーションや見出しに力強い印象をもたらし、淡いアクアカラーはすっきりとした背景となり、視覚的な疲労を抑えます。画面上で快適さや鮮明さが求められる場面に、特に効果的です。

さらに、ティールブルーはスタイルを選ばず使える万能色です。コースタル、ミニマル、レトロ、ラグジュアリーなど、アクセントカラーによって雰囲気が変化します。コーラルやゴールド、サンドのような暖かみのある色と組み合わせると親しみやすく、チャコールやネイビーと合わせればシネマティックや高級感も演出できます。

20以上のティールブルーカラーパレット案（HEXコード付き）

1) オーシャングラス

HEX： #0B7285 #1098AD #74C0FC #E3FAFC #0B2E3C

雰囲気： クリーン、コースタル、リフレッシュ

おすすめの用途： ウェルネスのブランディングやスキンケアパッケージ

太陽の光が浅瀬の砂を通して揺れるような、清潔でコースタルな印象。ティールブルーのこのカラーパレットは、マットなラベルに使うとシャープで、グロッシーなアクセントで高級感も演出できます。ホワイトスペースとミニマルなタイポグラフィと合わせれば、スパのような仕上がりに。濃いネイビーは成分リストのアンカーに使うのがおすすめ。ポイント：淡いアクアを背景のメインに使うと、濃い色が重々しくならず、落ち着いた印象に。

media.ioで生成されたオーシャングラスのイメージ例

Media.io

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

今すぐ無料で試す

2) ハーバースレート

HEX： #0A3D62 #0C5C75 #3D5A6C #BFC9D1 #F2F4F6

雰囲気： 安定感、モダン、信頼感

おすすめの用途： エンタープライズ向けダッシュボードやフィンテックUI

黄昏の港にグレーがかった空が広がるような、安定感と信頼感のある配色。ダークブルーはしっかりした構成を作り、ソフトグレーで画面の彩度を抑えます。クリアなホワイトの面や、重要なアクションには明るいアクセントを1つだけ合わせるとおすすめ。ポイント：一番濃い色は、ヘッダーやナビゲーション用に取っておくことで、余計な罫線を増やさずに階層を整理できます。

media.ioで生成されたハーバースレートのイメージ例

3) アクアインク

HEX： #06283D #1363DF #47B5FF #1F8A70 #E8F9FD

雰囲気： 力強い、エネルギッシュ、ハイコントラスト

おすすめの用途： テック系ランディングページやヒーローセクション

インクが水に落ちて一気に鮮明になるような、力強くエネルギッシュな配色。ネイビーとエレクトリックブルーが印象を際立たせ、淡いアイスカラーで余白感も演出します。幾何学模様や短いキャッチーな見出しと合わせると、スピーディでモダンな感覚に。ポイント：ティールはセカンダリのCTAカラーに使い、プライマリーボタンの色はセクションごとに一貫させましょう。

media.ioで生成されたアクアインクのイメージ例

4) ノルディックフィヨルド

HEX： #0E7490 #155E75 #94A3B8 #E2E8F0 #F8FAFC

雰囲気： クール、エアリー、ミニマル

おすすめの用途： SaaSのオンボーディングやヘルプセンター

北欧のフィヨルドに霧が流れ込むような、クリーンでエアリーなカラースキーム。穏やかなニュートラルと抑えた彩度で、長時間の読書や操作にも最適です。細いラインアイコンやゆとりのあるスペーシングと合わせて、落ち着いてインフォーマティブな体験に。ポイント：ミッドティールはリンクやフォーカス状態に使い、ナビゲーションの一貫性を生み出しましょう。

media.ioで生成されたノルディックフィヨルドのイメージ例

5) ピーコックベルベット

HEX： #005F73 #0A9396 #AE2012 #E9D8A6 #001219

雰囲気： ラグジュアリー、ドラマティック、アーティスティック

おすすめの用途： ブティックホテルのブランディングやメニュー

クジャクの羽根とベルベットの影のような、ラグジュアリーでドラマティックな配色。深いティールと黒に近い色で洗練された雰囲気、暖かなオークルやレンガ色でヴィンテージ感も加わります。セリフ体のタイポグラフィやゴールド箔のディテールと合わせれば高級感アップ。ポイント：赤はアクセントとして控えめに使うと、パレットの上品さが保てます。

media.ioで生成されたピーコックベルベットのイメージ例

6) ミスティラグーン

HEX： #2A9D8F #1B6C7A #A8DADC #F1FAEE #457B9D

雰囲気： 柔らかい、さわやか、ポジティブ

おすすめの用途： 結婚式の招待状やサマーイベントのフライヤー

朝もやに包まれたラグーンのように、柔らかくさわやかな印象。ペールミントやオフホワイトで文字が軽やか、深みのあるティールブルーが全体のバランスを取ります。繊細なスクリプトフォントやモダンなサンセリフと合わせると、ロマンティックだけどクリーンな雰囲気に。ポイント：一番明るい色を背景に使うと、濃いティールがシャープに映えます。

media.ioで生成されたミスティラグーンのイメージ例

7) ディープシーネオン

HEX： #001F2D #006D77 #00B4D8 #90E0EF #FFB703

雰囲気： エレクトリック、ナイトライフ、ハイインパクト

おすすめの用途： ゲーミングポスターや配信オーバーレイ

ネオン看板が深い海中で光るような、電撃的で夜をイメージさせる配色。ベースとなるダークトーンで引き締めつつ、明るいシアンとアンバーでアクセントやアラート表現に最適。ポイント：アンバー色はバッジやハイライト用途に抑え、意図的な使い方にしましょう。

media.ioで生成されたディープシーネオンのイメージ例

8) コースタルサンドバー

HEX： #0F766E #115E59 #D6CCC2 #F5EBE0 #4A6FA5

雰囲気： リラックス、ナチュラル、サンウォーム

おすすめの用途： インテリアムードボードやライフスタイル系ブログ

静かな砂洲に流木とシーグラスが並ぶような、リラックス感と温かみのある配色。ベージュがティールの冷たさを和らげ、部屋やレイアウトを居心地よく演出します。ラタンやライトオーク、リネンのホワイトなどと合わせてコースタルモダンな雰囲気に。ポイント：落ち着いたブルーはセカンダリアクセントとして使い、グリーンが主張しすぎないようにしましょう。

media.ioで生成されたコースタルサンドバーのイメージ例

9) レイニーウィンドウ

HEX： #164E63 #0E7490 #64748B #CBD5E1 #0F172A

雰囲気： ムーディ、静か、プロフェッショナル

おすすめの用途： 編集レイアウトや長文レポート

雨に濡れる窓越しに街の明かりがぼやけるような、静かでムーディなパレット。スレートや深いネイビーで重厚感が生まれるため、データ中心のページやストーリーテリングにも合います。クリーンなグリッドや控えめな区切り線を使い、ボックスで囲み過ぎないデザインに。ポイント：ミッドティールは引用用カラーに使い、落ち着いたリズムを保ちつつ個性をプラス。

media.ioで生成された雨の窓の画像例

10) レトロプールタイル

HEX： #1D3557 #00A6A6 #7AE582 #F7F7FF #FF6B6B

雰囲気： 遊び心、レトロ、夏らしさ

おすすめの用途： ソーシャルメディアテンプレートとクリエイターブランディング

光沢のあるプールタイルやクラシックな夏のプレイリストのように、遊び心がありレトロ。明るいティールとミントグリーンは柔らかな白の背景に映え、コーラルが親しみやすいアクセントを加えます。ラウンドした形や太めのフォントと組み合わせてヴィンテージ感を演出。ヒント：コーラルは重要なボタンだけに使用し、全体の統一感を保ちましょう。

media.ioで生成されたレトロプールタイルの画像例

11) グレイシャーミント

HEX： #0B3C49 #2EC4B6 #CBF3F0 #FFFFFF #9BB4C1

雰囲気： フレッシュ、ライト、クリニカルで清潔

おすすめの用途： ヘルスアプリと予約UI

氷河の空気やミントウォーターのようにフレッシュでクリニカル。明るいティールは親しみやすくモダンで、信頼感も失いません。白や淡いグレーカードと合わせることでフォームの可読性を維持します。ヒント：ミント色は成功状態、最も濃い色は主要ナビゲーションに使いましょう。

media.ioで生成されたグレイシャーミントの画像例

12) ナイトアクアリウム

HEX： #001A2C #003D5B #0A9396 #94D2BD #E9D8A6

雰囲気： 没入感、静寂、シネマティック

おすすめの用途： ポッドキャストカバーや音楽アートワーク

夜の水族館が輝くような没入感とシネマティックさ。ティールブルーの配色は強いコントラストがよく合い、暗い色が奥行きを、シーフォームがディテールを際立たせます。ミニマルなラインアートやソフトなグラデーションと合わせれば、雰囲気のあるモダンなカバーに。ヒント：フォントは暖かいサンドカラーで、濃いブルーの背景でも読みやすく。

media.ioで生成されたナイトアクアリウムの画像例

13) シーグラスボタニカ

HEX： #0E7C86 #2A9D8F #B8F2E6 #FAF3DD #5E6472

雰囲気： エアリー、植物的、落ち着き

おすすめの用途： 春の植物イラストとステーショナリー

シーグラスが新緑に包まれるような、エアリーで落ち着いた配色。クリーミーなオフホワイトがグリーンを柔らかくし、優しくオーガニックな印象を作ります。水彩のウォッシュや繊細なインクライン、余白多めで軽やかに。ヒント：グレーはブラックが強すぎると感じたときの目立たないインク代用に。

media.ioで生成されたシーグラスボタニカの画像例

14) テックウェーブグラデーション

HEX： #0B1320 #1B4965 #5FA8D3 #62B6CB #CAE9FF

雰囲気： スマート、未来的、洗練された

おすすめの用途： プロダクトUIシステムとデザイントークン

ガラスの上を滑るグラデーションのようにスマートで未来的。ミッドナイトから淡いアイスまでの幅広い色合いで一貫性ある状態管理やレイヤリングに便利です。ニュートラルグレーや温かみのあるアクセントと共に。ヒント：5色を予測可能なスケールで管理し、明暗関係なく整ったコンポーネント設計に。

media.ioで生成されたテックウェーブグラデーションの画像例

15) ミニマルクリニック

HEX： #0F4C5C #2D6A4F #D8F3DC #F8F9FA #343A40

雰囲気： 穏やか、清潔、安心感

おすすめの用途： 医療パンフレットやクリニックサイン

明るいクリニックの静かな自信のような、穏やかで安心感ある配色。淡いグリーンホワイト背景が内容を読みやすく、深いティールが視覚的なアンカーとして機能します。分かりやすいアイコンや明快な文章と組み合わせて案内板や説明書に最適。ヒント：本文にはチャコールカラーを使い、中間ティールでコントラストが弱くなるのを避けましょう。

media.ioで生成されたミニマルクリニックの画像例

16) サンセットピア

HEX： #0A4D68 #088395 #05BFDB #FFD166 #F25C54

雰囲気： ビビッド、夏らしさ、社交的

おすすめの用途： フェスティバルポスターとイベントブランディング

桟橋の手すりに反射する夕日ように、鮮やかで社交的。ティールブルーの組み合わせは、クールな水色と暖かなサンセットのアクセントをバランスよく配置することで映えます。大胆なフォント、シンプルな形状、余白を多く使い、意図した色使いを実現。ヒント：日付やチケット情報には黄色を、視線誘導に使いましょう。

media.ioで生成されたサンセットピアの画像例

17) セラミックスタジオ

HEX： #0B7285 #3A506B #F6F1E9 #CDB4DB #B56576

雰囲気： アーティな、手作り感、あたたかみのあるモダン

おすすめの用途： クラフトショップブランディングと商品タグ

スタジオの棚で乾く釉薬陶器のような、アーティで手作り感ある配色。クリーミーなベースがティールとスレートを柔らかくし、モーヴやローズが温かみのある触感を加えます。テクスチャペーパーやシンプルなスタンプ風マークと組み合わせて本物らしい印象に。ヒント：ティールはロゴのみに使い、暖色は季節ごとにアクセントを変えて使いましょう。

media.ioで生成されたセラミックスタジオの画像例

18) アールデコ・ベイ

HEX： #003049 #0A9396 #E9C46A #F4F1DE #1D3557

雰囲気： グラマラス、構築的、ヴィンテージ＆モダン

おすすめの用途： カクテルバーメニューと招待状

ブラスの装飾線や海の眺めがあるアールデコロビーのような、グラマラスで構築的な雰囲気。ティールとネイビーで強い幾何学を保ち、ゴールドが華やかさを引き立てます。左右対称レイアウトや細いラインボーダーでクラシックに。ヒント：ゴールドは区切り線やセクション見出しだけに使い、紙面に上質感を与えつつ色の多用は避けましょう。

media.ioで生成されたアールデコ・ベイの画像例

19) マウンテンレイクフォグ

HEX： #0F3D3E #1B6B6F #6C9A8B #DCEDEA #2F3E46

雰囲気： ナチュラル、穏やか、癒し

おすすめの用途： アウトドアブランドのルックブックやウェブバナー

山の湖の霧が朝に晴れていくような、ナチュラルで癒しの配色。抑えめなグリーンがティールを大地的に保ち、自然をテーマにしたストーリーテリングに最適。ウォームニュートラルやクラフト紙の質感、ドキュメンタリー調写真と相性良し。ヒント：最も薄い色はオーバーレイパネルに使うと、写真の上でもテキストが読みやすくなります。

media.ioで生成されたマウンテンレイクフォグの画像例

20) エレクトリックメリディアン

HEX： #001D3D #003566 #00A8E8 #00D1B2 #FEE440

雰囲気： 自信に満ちた、明るい、モダン

おすすめの用途： 製品広告やローンチグラフィック

夜空を切り裂くライトビームのように、自信に溢れた明るい配色。ブルー系がテックなエネルギー、アクアグリーンがフレッシュで親しみやすさを演出。シャープなタイポグラフィと高いコントラストで、イエローをスポットライトのように目立たせます。ヒント：イエローは1レイアウトにつき1つの注目要素（価格や日付など）にのみ使いましょう。

media.ioで生成されたエレクトリックメリディアンの画像例

ティールブルーに合う色は？

ティールブルーは、コーラル・テラコッタ・アンバー・ゴールドなどの「人間味」のある暖色アクセントと美しく組み合わせできます。こうした対比によって意図的なバランス感を生み出します。

落ち着いた印象にしたい場合は、サンド、ベージュ、暖かい白、柔らかなグレーなどのニュートラルカラーを使い、ティールブルーが冷たくなりすぎるのを防ぎましょう。シネマティックや上質感を出したい場合は、ティールブルーにネイビー、チャコール、漆黒を組み合わせて階層と奥行きを作ります。

カラーパレットの一貫性を保つには、ティールブルーをメインカラーにするか、アクセントカラーにするか決めましょう。その後は、アクセント系統（暖色かネオンか）を1つ選び、コンポーネント・グラフィック・タイポグラフィの全体で繰り返し使います。

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

各色の役割を割り当てることから始めましょう：ナビや見出し用のディープティール／ネイビー、リンクやフォーカス用のミッドティール、背景や広い面に使うペールアクア。ティール同士で競合せず階層が明確になります。

ブランディングや印刷物では、インク量のバランスが重要です。広い面は薄いティールを使い、ロゴや枠線、重要モチーフは鮮やかなティールで。紙の質感（非塗工、リネン、クラフト紙など）と合わせると、デザインがクリニカルになり過ぎるのをやわらげられます。

UIでは、必ず出荷前にコントラストを確認しましょう。白背景のティールは小さいサイズではコントラストが低くなりがちで、暗い背景の明るいシアンは多用すると目が疲れる原因に。最も明るい色はアクセントとして使い、本文色にはしないでください。

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

ムードボードや広告案、UIモックアップを作る際は、パレットに合ったビジュアルを生成して事前に雰囲気を検証すると良いでしょう。AIを活用すれば同じティールブルーベースで沿岸風・ミニマル・レトロ・ラグジュアリーなど多彩な方向性を素早く検討できます。

上記プロンプトを再利用し、テーマ（パッケージ・ポスター・ダッシュボードなど）やライティング・スタイルキーワード（スタジオショット、フラット2D、エディトリアルレイアウト）を入れ替えて繰り返し出力を作りましょう。アスペクト比タグはそのまま使うと意図したレイアウトに合わせやすくなります。

方向性が固まったら、HEXコードを背景・タイポグラフィ・ボタン・アクセント要素すべてに一貫して使い、システム全体の統一感を保ちましょう。

次に： ティールグリーンのカラーパレット