ターコイズブルーの配色20選とHEXコードまとめ

ターコイズブルーは、海の静けさと現代的なエネルギーの絶妙なバランスを持ち、ブランディング、UI、印刷物の確かなアンカーとなります。新鮮で清潔、そして自信に満ちていながら、無機質には感じられません。

以下にHEXコード付きの20以上のターコイズブルーパレットの組み合わせと、実際のレイアウトでの活用例、Media.ioで素早くマッチングビジュアルを生成する方法を紹介します。

ターコイズブルーパレットが優れている理由

ターコイズブルーは、自然に明快さ、新鮮さ、親しみやすさを伝えます。クールで現代的・テクニカルな印象がありながら、消費者向けブランドにも親しみやすさを保ちます。

また、温度帯を超えて組み合わせしやすい色です：暖色系（ピーチ、コーラル、オレンジ）は動きを生み、寒色系（ティール、ネイビー、スレート）はレイアウトにまとまりと可読性をもたらします。

デザインの実用面から見ると、ターコイズブルーは用途が広いです：淡いシーフォームを背景に、中間トーンをブランドブロックに、深いティールをナビゲーションやタイポグラフィに利用すれば、余分な色を加えることなく完結したシステムを構築できます。

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

1）コースタル・ラグーン

HEX： #1FB7C6 #0E7C86 #A7E8E1 #F2F7F6 #F4C3A1

ムード： そよ風、沿岸、クリーン

最適用途： 旅行系ランディングページUI

爽やかなラグーンの水と日差しの暖かい砂がフレッシュでウェルカムなトーンを作ります。見出しやナビには深いティールを使い、淡いシーフォームやオフホワイトで背景を構成しましょう。ピーチのアクセントはコールトゥアクションに控えめに使うと、夕焼けのような印象になります。最も濃いティールと明るいニュートラルを組み合わせてコントラストを高め、可読性を保ちましょう。

media.ioで生成したコースタル・ラグーンの画像例

Media.io

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

今すぐ無料で試す

2）トロピカルブリーズ

HEX： #22C7D6 #2BE3B3 #FFD166 #FF6B6B #0B3D4A

ムード： 遊び心、トロピカル、エネルギッシュ

最適用途： 夏のプロモーションポスター

遊び心あるサーフカラーとジューシーなフルーツトーンが、瞬時に夏らしさを演出します。ターコイズとミントをメインに使い、イエローやコーラルレッドを価格や日付等の目立たせたい部分にポイント使いしましょう。深いブルーグリーンはタイポグラフィのアンカー役で、明るいアクセントが強くなりすぎません。背景はシンプルに、大きなカラーブロックでメッセージ性を高めるのがコツです。

media.ioで生成したトロピカルブリーズの画像例

3）シーグラス・ニュートラル

HEX： #3CCAD7 #7FE7DE #E6F4F1 #D9CBBF #4B5D63

ムード： ソフト、エアリー、洗練

最適用途： ウェルネスブランドのアイデンティティ

柔らかなシーグラス調の色合いは、穏やかでエアリー、さりげない高級感を感じさせます。広い面には淡いアクアやかすみがかったオフホワイトを使い、温かみのあるベージュで人間味をプラスすると、過度にクリニカルな印象を避けられます。スレートグレーはロゴや細字に最適で、優しいまま可読性も保てます。マットな紙や控えめなグレイン加工を合わせて、静かな仕上がりにするのがおすすめです。

media.ioで生成したシーグラス・ニュートラルの画像例

4）レトロプールサイド

HEX： #19BFD0 #00A6A6 #F7E6B1 #FF7A59 #2F2E41

ムード： レトロ、晴れやか、大胆

最適用途： カフェメニューのデザイン

レトロなプールタイルや日焼けした傘で懐かしく陽気な雰囲気に。ターコイズブルーにクリーミーなイエローの背景、温かみのあるオレンジアクセントがメニューで映えます。チャコールカラーは本文テキスト向きで、鮮やかな色を大きく大胆に扱いながらも可読性を損ないません。オレンジは各セクションで1~2箇所の強調に留め、上品に仕上げましょう。

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

5）アークティック・ミント

HEX： #2EC9D3 #B9FFF5 #E9FBFF #B6C7D6 #2E3A59

ムード： シャープ、モダン、氷のよう

最適用途： SaaSダッシュボードUI

シャープで氷のようなトーンが清涼感とすっきりとしたUIを連想させます。ナビやデータラベルには濃いネイビーを使い、ミントやほぼ白の色調でカードやコンテンツ面を重ねます。スチールブルーは、補助的な枠線やグラフのラインにぴったりで重くなりません。メインのアクセントカラー（明るいアクアなど）はプライマリーアクションや主要な指標に絞りましょう。

media.ioで生成したアークティック・ミントの画像例

6）デザートオアシス

HEX： #16B9C8 #0C7B83 #E7D7B9 #C97C5D #FFFFFF

ムード： アースカラー、日差し、調和

最適用途： ブティックホテルのパンフレット

日差しを浴びた砂とクールな水が調和したバランスよいリゾート感を演出します。ターコイズ系＋暖かみのあるクレイカラーアクセントを見出し、アイコン、部屋の強調に使えば、レイアウトに安定感が生まれます。クリームや白は写真に空気感を与え、深いティールは小さいテキストをサポートします。余白とシンプルなラインアイコンを大きくとって、リラックス感のある上質な仕上がりにしましょう。

media.ioで生成したデザートオアシスの画像例

7）オーシャンデプス

HEX： #13B5C8 #0B7285 #063B4C #1B1F2A #A3D5E0

ムード： ムーディ、シネマティック、高級感

最適用途： テック系カンファレンスのウェブサイトヒーロー

ムーディな海の深みと夜空の暗さで、シネマティックで高級感のあるパレットに。ヒーロー背景にはほぼ黒を使い、アクアグラデーションで光や動きをプラス。淡青はバッジやさりげない光効果に、ネオン風にならない絶妙なハイライトに使えます。アクセシビリティのため、主要な見出しは一番明るい色にし、本文は高コントラストに保ちましょう。

media.ioで生成したオーシャンデプスの画像例

8）コーラルリーフ・ポップ

HEX： #20C0D4 #12A0A8 #FF6F91 #FFD1DC #FFF7F2

ムード： 明るい、フレンドリー、若々しい

最適用途： ビューティープロダクト広告

明るいリーフカラーは、弾けるようなフレンドリーさとSNS映え感を演出します。背景にはクリーミーブラッシュとオフホワイト、ブランドブロックにはターコイズ、ピンクはバッジやボタンなど目立たせたいパーツに一点だけ使いましょう。深いティールは細字や成分表で使えば、見た目を洗練させてくれます。ソフトなシャドウや余白を充分にとると、現代的で上品な印象に仕上がります。

media.ioで生成したコーラルリーフ・ポップの画像例

9）スカイラインアクア

HEX： #2BC4D8 #2F9BB3 #6C63FF #F5F7FF #1F2937

ムード： アーバン、シャープ、コンテンポラリー

最適用途：スタートアップのピッチデックスライド

ヴァイオレット縁のアーバンアクアは、シャープで現代的、そしてやや未来的な印象を与えます。スライドの背景には淡いオフホワイトを、テキストにはチャコールを使用して、チャートをすっきり保ちましょう。アクアカラーはセクションヘッダーや強調表示によく合い、ヴァイオレットはデッキ全体のアクセントとして最適です。アイコンの塗りは統一し、余計な色は加えずにストーリーへ集中出来るようにしましょう。

media.ioで生成したスカイラインアクアの画像例

10) スパ セレニティ

HEX： #28C1D7 #8BE6E0 #CFF7F3 #F6F1EA #A58D7F

ムード：心地よい、優しい、回復的

最適用途：瞑想アプリのオンボーディング

穏やかな水色と温かなリネンのニュートラルが、回復的で深呼吸したくなる雰囲気を作ります。このターコイズブルーのカラーパレットは、冷静さが商品価値の一部となるオンボーディング画面に最適です。ミントカラーは柔らかなベージュの背景に組み合わせ、タウプ色は補助テキストやアイコン用に使用します。実用的なコツは、一番明るいアクアを主要なボタンの状態だけに使い、視覚的な緊張感を避けることです。

media.ioで生成したスパセレニティの画像例

11) シトラスサーフ

HEX： #18BDD1 #00D6A3 #C8F169 #FFF1A6 #125B6B

ムード：さわやか、スポーティ、陽気

最適用途：スポーツドリンクパッケージ

サーフの爽快なトーンとシトラスのハイライトが、スポーティで活気あふれる雰囲気を演出します。ブランド名や栄養成分表示にはダークティールを使い、アクアとミントをメインラベルカラーに押し出しましょう。ライムと淡いイエローはフレーバーの指標や商品名の近くのアクセントに最適です。ネオンのようにならないよう、余白を多く取りバランスを保ちましょう。

media.ioで生成したシトラスサーフの画像例

12) ミッドナイトターコイズ

HEX： #1AB8CF #0A8AA2 #0B3C49 #101820 #E0FBFC

ムード：スリーク、ドラマチック、コントラスト強め

最適用途：音楽イベントのフライヤー

ミッドナイトの深みあるトーンにエレクトリックアクアを加えることで、ドラマチックでクラブのような雰囲気が生まれます。背景は限りなく黒に近い色にし、明るいターコイズはイベントタイトルや重要な情報で使いましょう。薄いアイストーンは会場や時間などセカンダリー情報に使うのがベスト。ヘッドラインにだけグロー効果を使い、他はフラットで現代的な仕上がりにしましょう。

media.ioで生成したミッドナイトターコイズの画像例

13) クラウディベイ

HEX： #35C8DA #A0E8EE #EAF6F8 #BFCAD6 #6B7280

ムード：軽やか、沿岸、控えめ

最適用途：不動産リスティングテンプレート

爽やかな沿岸の空気と柔らかな雲のトーンが、この組み合わせに控えめで信頼感のある印象を与えます。淡いブルーホワイトをメインキャンバスに使い、ターコイズは区切り線やハイライトにさりげなく使いましょう。グレー系は見出しやキャプションを鮮明かつプロフェッショナルに見せてくれます。写真は暖色やニュートラル系にすると、アクセントカラーが冷たくならず新鮮さが引き立ちます。

media.ioで生成したクラウディベイの画像例

14) ボタニカルアクア

HEX： #24C2D8 #2BB3A6 #5CCB5F #F1F7E8 #2D4A3E

ムード：豊か、自然、リフレッシュ

最適用途：春の植物イラスト

豊かなガーデングリーンにクリーンなアクアを合わせると、雨上がりの温室のような明るさを感じさせます。クリーミーなボタニカルホワイトを紙の色として使い、アクアの茎やアクセントを入れたグリーンの水彩葉を重ねましょう。ディープフォレストは細い輪郭線やタイポグラフィに最適です。色のにじみは薄く保ち、パレットがフレッシュで重くならないように心掛けましょう。

media.ioで生成したボタニカルアクアの画像例

15) ヴィンテージポストカード

HEX： #1FBFD3 #55D6C2 #F2E2C4 #CBB3A0 #3D405B

ムード：ノスタルジック、温かみ、旅心をくすぐる

最適用途：結婚式招待状セット

日差しを浴びたニュートラルと涼しげな海のインクが、ノスタルジックな旅気分を醸し出します。クリーム色とタンをベースに、ターコイズを繊細な枠線やモノグラムディテールに使用します。くすんだネイビーは、名前や日付で使っても厳しすぎず、フォーマルな印象を加えます。ヴィンテージ感を強調するなら、レタープレスやテクスチャード紙を考えてみましょう。

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

16) モダンマリーナ

HEX： #14B8D4 #0E7490 #94A3B8 #F8FAFC #F97316

ムード：モダン、ノーティカル、自信

最適用途：フィンテックアプリ用ブランドキット

モダンマリーナの色味は自信にあふれ、まるで磨かれた金属や澄んだ水のようなクリーンさを感じさせます。ターコイズとディープティールはキーカップリング、クールグレーとほぼ白がレイアウトに規律を与えます。CTAや主要数字にはオレンジのアクセントを少量使いましょう。一貫した余白・シンプルなアイコンで、色のコントラストがストーリーを語ります。

media.ioで生成したモダンマリーナの画像例

17) パウダーブルーミスト

HEX： #2CC4D9 #BDEFF2 #E9F2F9 #D6D3D1 #374151

ムード：ソフト、ミニマル、プロフェッショナル

最適用途：履歴書・カバーレターテンプレート

柔らかな霞色ブルーで、落ち着きや自信を感じさせる洗練されたミニマルデザインを作ります。ページのベースにはほぼ白と淡いアクアを使い、明るいターコイズはセクションヘッダーや繊細な線に限定しましょう。チャコールは本文に最適で、印刷でも可読性が保たれます。飾り要素は細く一貫性を保ち、ATS対応のドキュメントに仕上げましょう。

media.ioで生成したパウダーブルーミストの画像例

18) フェスティバルボードウォーク

HEX： #25C1D8 #00BFA6 #FFB703 #FB7185 #3A506B

ムード：フェスティブ、力強い、陽気

最適用途：イベントチケットデザイン

フェスティバルボードウォークカラーは、イルミネーションや音楽、夏の夜をイメージさせる最高ににぎやかな配色です。アクアとティールをメインカラーに、黄色やピンクはスタンプやQR・VIPタグなど小さなスポットで使いましょう。スチールネイビーは重要情報を読みやすく、構造的なアクセントに。他はフラット＆シンプルで、スキャニング時の速さを重視しましょう。

media.ioで生成したフェスティバルボードウォークの画像例

19) テックネオンアクア

HEX： #11C5D9 #00F5D4 #2D2A32 #B8F3FF #F72585

ムード：ネオン、未来的、パンチのある

最適用途：ゲーミング配信オーバーレイUI

ネオンアクアにホットマゼンタのアクセントを加えると、未来的でハイエナジーな雰囲気になります。ダークチャコールをキャンバスに使い、明るい色合いが画面を圧迫せず輝くようにしましょう。マゼンタはアラートやサブスク案内に、アクアはフレームやラベルに使います。大きな面積はダークトーンを維持し、長時間配信でも目が疲れにくい構成がコツです。

media.ioで生成したテックネオンアクアの画像例

20) ウェディングタイド

HEX： #22C3D8 #7BE7D9 #FFF7EE #E6C9D1 #3F4C5A

ムード：ロマンチック、エアリー、エレガント

最適用途：ブライダルシャワー招待状

エアリーな潮風を思わせるトーンと柔らかなブラッシュで、ロマンチックかつ洗練されたコースタルエレガンスを表現します。暖かみのあるアイボリーは心地よいベースとなり、ターコイズは枠線やアイコン、モノグラムに新鮮さを加えます。ブラッシュは控えめなアクセントで使い、招待状が上品さを保つように。名前や詳細にはダークスレートを合わせ、花柄はラインで最小限にしましょう。

media.ioで生成したウェディングタイドの画像例

21) ハーバーミニマル

HEX： #1FC2D7 #0B6B7A #DDE7EA #FFFFFF #111827

ムード：ミニマル、シャープ、エディトリアル

最適用途：雑誌レイアウトカバー

シャープなハーバーカラーは、明るい紙にクリーンなタイポグラフィでミニマルかつエディトリアルな印象を与えます。ホワイトとライトグレーを主役に、大胆なマストヘッドやアクセントバンド用にターコイズを使いましょう。インクのようなディープブラックは本文・小さなディテールに最適で、最大限の明瞭さをもたらします。装飾は控えめに、力強いフォントひとつだけ使い、アクセント形状も限定しましょう。

media.ioで生成したハーバーミニマルの画像例

22) カームクリニック

HEX： #2AC2D8 #76E4DE #F3FBFA #CBD5E1 #0F172A

ムード：落ち着き、クリニカル、信頼感

最適用途：ヘルスケアアプリUIキット

落ち着きのあるクリニカルトーンは清潔感と信頼感を伝えつつ、冷たさを感じさせません。やわらかなオフホワイトを基盤に、アクアをプライマリーアクションや強調に使用。スレートニュートラルはフォームや区切りを整理し、ディープネイビーはテキストを読みやすく保ちます。ターコイズブルーの配色を一貫させるには、セカンダリボタンに明るいミントだけ使い、余計なアクセント色を加えないのがポイントです。

media.ioで生成したカームクリニックの画像例

ターコイズブルーと相性の良い色は？

ターコイズブルーは、ピーチ・コーラル・テラコッタ・オレンジなど暖色と組み合わせると、エネルギッシュで親しみやすい印象に仕上がります。こうしたコントラスト（暖色vs寒色）は、CTAやバッジ、価格のハイライトに最適です。

より落ち着いた“プレミアム”な印象にしたい場合は、ターコイズブルーをティール・ネイビー・スレート・ブルーグレーなど寒色系の補色と組み合わせましょう。これで見出し・ナビ・データ重視のUIに強い階層感が生まれます。

ニュートラルなベースが必要なら、オフホワイト・クリーム・サンド・ライトグレーを使うとターコイズが軽やかかつモダンに仕上がります。特に印刷やエディトリアル、製品ページに効果的です。

実際のデザインでターコイズブルーパレットを使う方法

まず役割分担を決めましょう：背景には明るいニュートラル、ブランドブロックやUIの強調にはミッドターコイズ、テキストにはディープティール/ネイビーを。シンプルな構成が、どんな画面でも読みやすく拡張可能にします。

暖色アクセントは強調部分だけに絞り、ボタン・重要数値・セクション内のラベル1か所など最小限に。暖色を使い過ぎると、ターコイズがクリーンさを失い騒がしさを感じてしまうので注意しましょう。

アクセシビリティのために、ターコイズ色の背景上のテキストのコントラスト（特に中間色の場合）を確認してください。迷った場合は、本文テキストをオフホワイトにし、ターコイズはアクセントやアイコン、ヘッダーに使いましょう。

AIでターコイズブルーパレットビジュアルを作成する

すでにHEXコードをお持ちの場合は、レイアウトを説明し、色を挿入することで、オンブランドのモックアップ（ポスター、UI画面、パッケージ、招待状など）を作成できます。これにより、本格的なデザインシステムに取り組む前にカラーパレットを検証できます。

Media.ioを使えば、同じプロンプトから複数のバリエーションを生成できます：プラットフォームに合わせてアスペクト比を変更し（ウェブのヒーローは16:9、ストーリーは9:16、ポスターは3:4）、パレットを一貫性のあるものに保ち、まとまりのある結果にしましょう。

方向性が気に入ったら、そのプロンプトをテンプレートとして再利用し、ターコイズブルーのカラースキームはそのままに、製品タイプやレイアウトだけを入れ替えてください。

次へ： ティールコーラルカラーパレット