20選 インフォグラフィックに最適な配色&HEXコード一覧

現代のインフォグラフィックデザインは明快さが重要です：強い階層構造、読みやすいラベル、そしてデータを素早く見分けられる色彩システムが必要です。

以下は厳選されたインフォグラフィック用カラー パレットアイデア（HEXコード付き）です。ダッシュボードやレポート、スライド、SNS統計などでコピーして使えるほか、AIプロンプトを再利用して一致するビジュアルを生成できます。

インフォグラフィック用パレットが効果的な理由

インフォグラフィックが成功するのは、色が役割を果たすときです：シリーズを区別し、セクションをグループ化し、重要な数字に注目を集めます。良いパレットなら「込み入ったデータ」も簡単なビジュアルストーリーに変わります。

一般的なブランドのパレットと違い、データビジュアライゼーション用の色は軸やラベル、小さなマーク（ドット、ライン、ティック）のために予測可能なコントラストが必要です。このため、多くのインフォグラフィック配色は強いニュートラル色（ネイビー/チャコール）と2～3色のアクセントを組み合わせています。

厳選されたセットなら決断疲れも軽減されます。各色に役割（メインシリーズ、サブシリーズ、ハイライト、背景）があることで、チャートはスライド、ダッシュボード、印刷物でも統一感を保てます。

20種類以上のインフォグラフィック用カラーパレットアイデア（HEXコード付き）

1）エメラルドターコイズグリッド

HEX： #0ea5a4 #10b981 #0f172a #e2e8f0 #f59e0b

雰囲気： 新鮮、自信がある、現代的

最適： ダッシュボードUIチャートとKPIカード

新鮮で自信に満ちた印象。明るいティールピンを暗いグリッド上に配置したクリーンな分析作業スペースのようです。ターコイズとエメラルドをメインシリーズカラーに、深いネイビーは見出しや軸テキストに活用。暖かいアンバーはスパイクや外れ値のアラート色として控えめに使うのがベスト。ゆったりとした余白と細い区切り線で、コントラストが忙しくならずキリッとした印象になります。

media.ioで生成したエメラルドターコイズグリッドの画像例

Media.io

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

今すぐ無料で試す

2）ミントチョークボード

HEX： #0b1320 #14b8a6 #a7f3d0 #f1f5f9 #fb7185

雰囲気： 賢く、遊び心があり、高コントラスト

最適： クラスルーム風の解説スライド

賢くて遊び心があり、深いスレートボードにミント色のチョークラインと明るい付箋アクセントのような印象。暗い色調は大きなブロックに使い、ミントはアイコンやルール、チャート線で力を発揮します。柔らかいシーフォームは2本のデータラインが必要な時にサブシリーズとして最適。ピンクは重要なポイントのみに使い、蛍光ペンのようなハイライト役割にしてシリーズの競合を防ぎましょう。

media.ioで生成したミントチョークボードの画像例

3）コーラルマーカーハイライト

HEX： #0f766e #fb7185 #f97316 #111827 #f8fafc

雰囲気： エネルギッシュ、大胆、注目を集める

最適： SNSインフォグラフィック投稿やクイック統計

エネルギッシュで大胆。きれいなティールの基調上にコーラルマーカーのストロークが重なるイメージです。ティールは構造担当、コーラルとオレンジが重要数字を強調。ほぼ黒の文字は本文用にして明るいアクセントが読みやすく清潔。オレンジは一つのチャートシリーズだけに割り当ててレイアウトを乱さない工夫を。

media.ioで生成したコーラルマーカーハイライトの画像例

4）ネイビーシトラスコントラスト

HEX： #0b1f3b #22c55e #fde047 #f8fafc #334155

雰囲気： シャープ、スポーティ、高い明瞭度

最適： 財務レポートやパフォーマンスチャート

シャープで明瞭。真夜中のレポートカバーに鮮やかなシトラスラベルが映えるイメージ。ネイビーはヘッダーやテーブルバンド、グリーンはポジティブ傾向、イエローは基準・ターゲット。スレート色はサブテキストやグリッドラインに信頼できるニュートラル色。イエローは明るい背景で使い、ネイビー近くではアウトラインやバッジとして活用するのが読みやすさのポイント。

media.ioで生成したネイビーシトラスコントラストの画像例

5）サンドストーンダッシュボード

HEX： #f1e7d6 #cbd5e1 #0f172a #0ea5a4 #b45309

雰囲気： 落ち着き、安定、プロフェッショナル

最適： SaaSオンボーディング分析画面

落ち着きと安定感。暖かい紙と磨かれた石に涼しげなティールピンが添えられたイメージ。サンドストーン色を主な面の色にして密な指標を和らげて、ネイビーでタイプを鮮明に。ティールは主要アクションとチャートシリーズに最適。銅色は警告や離脱指標にぴったり。グリッド線はライトスレートで控えめにし、ダッシュボードの空間に開放感を。

media.ioで生成したサンドストーンダッシュボードの画像例

6）ベリーネオンコールアウト

HEX： #4c1d95 #a855f7 #fb7185 #14b8a6 #0b1320

雰囲気： パンチが効いて若々しい、高エネルギー

最適： イベントまとめインフォグラフィック、タイムライン

パンチがあり若々しい、暗い舞台背景にネオンインクが光る印象。背景はほぼ黒にして紫が主要構造を主張。コーラルは際立つ数字やタイムラインのドットに最適、ティールはサブ情報のクールな対比役。コーラルは長文ではなく短いラベルだけにし、可読性を保つのがコツ。

media.ioで生成したベリーネオンコールアウトの画像例

7）オーシャンフォッグミニマル

HEX： #0ea5a4 #94a3b8 #e2e8f0 #0f172a #ffffff

雰囲気： ミニマル、涼しげ、信頼感

最適： B2B一枚もの資料やデータ要約

ミニマルで信頼感、清潔なガラスに深い水平線が漂う海霧のイメージ。ティールを主要シリーズと見出しに繰り返してページをまとめる。ぼんやりしたスレートはサブシリーズやニュートラルアイコン向きで目立ちすぎない。チャートは細く正確にして柔らかいグレーが意図を持って見えるように。

media.ioで生成したオーシャンフォッグミニマルの画像例

8）レトロプリントシアン

HEX： #0891b2 #f97316 #fef3c7 #1f2937 #a3a3a3

雰囲気： レトロ、親しみやすさ、編集的

最適： 雑誌風インフォグラフィックページ

レトロで親しみやすい、テクスチャクリーム紙にサイアンスポット色とオレンジインクスタンプが映えるイメージ。サイアンがメインチャート担当、オレンジはコールアウトや矢印、小さなバッジに。暖かいクリームは全体の背景色として目に優しい。編集的な雰囲気にしたいときはダークグレーで文字を、黒は大きなブロックには使わないように。

media.ioで生成したレトロプリントシアンの画像例

9）フォレストカッパーレポート

HEX： #14532d #0ea5a4 #b45309 #f8fafc #1f2937

雰囲気： 信頼感、ナチュラル、成熟

最適：サステナビリティレポートとインパクト統計

信頼性があり、自然な印象。常緑の葉と清潔なレポートカバーの上の銅色のシールのような雰囲気です。主要なデータカテゴリーにはフォレストグリーンを、比較やベンチマークにはティールを使用しましょう。銅色はチャート全体の塗りではなく、合計やバッジ、小さなアイコンの強調に最適です。アドバイス：背景は白にすることで、濃いグリーンが長いドキュメントでも重い印象にならないようにします。

media.ioで生成されたフォレストカッパーレポートの画像例

10）ライラックスレートメトリクス

HEX： #6d28d9 #c4b5fd #334155 #e2e8f0 #0ea5a4

雰囲気：モダン・穏やか・ややクリエイティブ

最適：プロダクト指標デッキおよび四半期更新

モダンで穏やか、磨かれたスレートウォールにライラック色のライトが当たっているイメージ。テキストやチャート軸にはスレートを使い、ライラックはメイン傾向よりも柔らかく感じさせたいセカンダリー系列に使用します。ティールは主なKPIラインや最重要バーの鮮やかな焦点色になります。アドバイス：ライラックの塗りは低い不透明度にして、ラベルがはっきり見えるようにしましょう。

media.ioで生成されたライラックスレート指標の画像例

11）サンリットマンゴーチャート

HEX： #fbbf24 #f97316 #0ea5a4 #0f172a #fff7ed

雰囲気：楽観的・温かみ・クリア

最適：マーケティングパフォーマンスインフォグラフィック

楽観的で温かみのある雰囲気。朝の日差しがマンゴーや柑橘スライスを照らすイメージ。ゴールドトーンは主要チャートエリアに使用し、オレンジはコンバージョンやピークなど最も目立たせたい箇所に限定します。ティールは温かみをバランスさせ、セカンダリー要素に安定感と信頼性を与えます。アドバイス：背景にはクリーム色を用いて、白すぎる背景は避けて明るい印象を保ちましょう。

media.ioで生成されたサンリットマンゴーチャートの画像例

12）ティールローズインフォポスター

HEX： #0ea5a4 #f43f5e #fde68a #1f2937 #f8fafc

雰囲気：明るい・親しみやすい・モダン

最適：統計付き公共啓発ポスター

明るく親しみやすい雰囲気。新しいティールのバナーにローズのステッカーと柔らかな日差しのアクセント。ヘッダーやセクションブロックにはティール、重要な数値や短いラベル強調にはローズを使います。ライトゴールドは、背景の形や控えめなチャートの塗りとして理想的です。アドバイス：遠くから見ても目立つように、アイコンはシンプルかつ太くしましょう。

media.ioで生成されたティールローズインフォポスターの画像例

13）チャコールライムラベル

HEX： #111827 #a3e635 #22c55e #e5e7eb #ffffff

雰囲気：シャープ・テクニカル・ハイコントラスト

最適：エンジニアリングダッシュボードおよび運用チャート

シャープかつテクニカル。チャコールコンソール上のネオンラベルのような雰囲気。チャコールは濃密なテーブルや軸テキスト、ライムは主要な成功のシグナル、グリーンはセカンダリーステータスに使います。ソフトグレーは、セパレータやカード枠を煩雑にならず可視化します。アドバイス：ライムの大きな背景には避け、ストロークやチップ、主要なマーカーとして使うことで可読性を最大化します。

media.ioで生成されたチャコールライムラベルの画像例

14）ソフトパステルストーリーボード

HEX： #99f6e4 #fecdd3 #c7d2fe #64748b #f8fafc

雰囲気：優しい・親しみ・ストーリー主導

最適：ステップバイステッププロセスインフォグラフィック

優しくストーリー性のある雰囲気。パステルカラーの付箋が穏やかなストーリーボードに並ぶイメージ。このインフォグラフィックカラーパレットは、多段階フローや異なるセクションを明確にしたい時に最適です。テキストや線にはスレートを、各パステルカラーは各ステップ用に割り当て、形は大きくラベルは短く保ちましょう。アドバイス：十分な余白を設け、淡い色合いが互いに区別しやすくなるようにします。

media.ioで生成されたソフトパステルストーリーボードの画像例

15）バーガンディクリームコラム

HEX： #7f1d1d #f5f5f4 #f59e0b #0f172a #14b8a6

雰囲気：プレミアム・堅実・編集志向

最適：年間総括および経営者向け概要

プレミアムかつ堅実。クリーム色の文具にバーガンディ色のインク、控えめなゴールドシールは高級感。主要データ系列やセクションヘッダーにはバーガンディ、ページベースにはクリームを使い、重厚な印象を与えます。ティールは副指標、アンバーはポイント強調に最適です。アドバイス：チャートは各ページで大胆に1つだけ、タイポグラフィを主役にしましょう。

media.ioで生成されたバーガンディクリームコラムの画像例

16）グレイシャーティールクラリティ

HEX： #06b6d4 #0ea5a4 #0f172a #cbd5e1 #f8fafc

雰囲気：涼しさ・清潔感・精密

最適：ヘルスケアデータダッシュボード

涼しく精密な雰囲気。明るいクリニックの氷河水や磨かれた器具のイメージ。主要系列にはシアン、比較にはティールを、テキストにはネイビーを使い医療レベルの可読性を維持します。ソフトスレートはグリッド線やカード枠に最適で、数字の邪魔になりません。アドバイス：重い塗りは避け、線や点を活用して衛生的で軽やかなデザインにしましょう。

media.ioで生成されたグレイシャーティールクラリティの画像例

17）クレイセージ概要

HEX： #a16207 #84cc16 #14532d #fef3c7 #1f2937

雰囲気：ナチュラル・温かみ・親しみやすい

最適：コミュニティレポートと調査結果

ナチュラルで親しみやすい雰囲気。午後の光に照らされた粘土の鉢や新鮮なセージのイメージ。主要系列にはセージグリーン、ラベルやヘッダーの重み付けにはディープフォレスト。チャートや短い引用にはクリーミーイエローの背景がぴったりです。アドバイス：クレイトーンはバッジやカテゴリーチップなど小さな強調に限定し、親しみやすいアクセントにしましょう。

media.ioで生成されたクレイセージ概要の画像例

18）グラファイトアクアフォーカス

HEX： #0f172a #06b6d4 #22c55e #e2e8f0 #f8fafc

雰囲気：集中・モダン・高可読性

最適：プロダクトロードマップインフォグラフィック

集中力がありモダンな雰囲気。グラファイトスケッチにアクアインク、グリーンチェック。ロードマップを読みやすくする色構成で、構造全体をダークにしてアクセントを明るく保ちます。タイムラインラインとマイルストーンカードにはアクア、出荷や成功の印にはグリーン。アドバイス：背景は極めて明るくし、グレーセパレータで四半期ごとの動きを誘導しましょう。

media.ioで生成されたグラファイトアクアフォーカスの画像例

19）シトラステールブループリント

HEX： #0ea5a4 #fde047 #f97316 #1e293b #f1f5f9

雰囲気：活気・構造的・楽観的

最適：ハウツーガイドおよび解説型インフォグラフィック

活気があり構造的な雰囲気。ティールのブループリントに明るいシトラスのステッカーが各ステップを示します。フレームにはティールとネイビー、番号付きサークルにはイエロー、注意や重要なヒントにはオレンジを使用します。背景は淡くして、ページ全体が開放的で読みやすくなっています。アドバイス：オレンジはアイコンなど一種類の要素に限定し、ガイド全体の一貫性を保ちましょう。

media.ioで生成されたシトラステールブループリントの画像例

20）ネオンナイトスキャッター

HEX： #0b1320 #22c55e #06b6d4 #a855f7 #f8fafc

雰囲気：エレクトリック・未来的・高コントラスト

最適：テック基調講演スライドおよびデータストーリーテリング

エレクトリックで未来的。夜空に浮かぶネオンポイントのイメージ。各系列に異なる光輝が必要な散布図やラインチャートに理想的な色の組み合わせです。背景は深く、ラベルや目盛りには白のみを使用し、グリーン・シアン・バイオレットがストーリーを展開します。アドバイス：グリッド密度を減らし、マーカーを大きくしてネオンカラーを意図的で雑音でない印象にしましょう。

media.ioで生成されたネオンナイトスキャッターの画像例

21）グレイシャーアクアクリーン

HEX： #99f6e4 #0ea5a4 #94a3b8 #0f172a #ffffff

雰囲気：エアリー・クリーン・安心感

最適：顧客成功レポートおよびNPSチャート

エアリーで安心感のある雰囲気。きれいな水と柔らかな霧、力強いダーク見出しのイメージ。穏やかな塗りにはアクア、メイントレンドラインにはティールを使用し、結果は肯定的かつ穏やかに感じられます。スレート色は副注釈や小さな凡例に最適。アドバイス：最も濃い色は見出しだけに使い、チャートには涼しいグリーンを使いましょう。

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

22）ウォームアーシータイムライン

HEX： #7c2d12 #ea580c #fef3c7 #14532d #1f2937

雰囲気：温かみ・ストーリーテリング・堅実

最適：企業沿革タイムラインおよびマイルストーン

温かくナラティブな雰囲気。ヴィンテージペーパーに焦げたオレンジのスタンプ、深いグリーンのしおりのイメージ。マイルストンドットや短い日付タグにオレンジ、ストーリーを滑らかに読むためテキストにはダークニュートラルが最適。カテゴリや時代ラベルにはフォレストグリーン。アドバイス：各パネルのクリーム背景を統一し、セクション間の不要な変化を防ぎましょう。

media.ioで生成されたウォームアーシータイムラインの画像例

インフォグラフィックに合う色は？

最も信頼性の高いインフォグラフィック配色は、中立的な基礎（白・オフホワイト・ライトグレー）とダークテキストカラー（ネイビーまたはチャコール）から始めるのが基本です。これによりラベルの読みやすさが保たれ、チャート全体が画面上でぼやけて見えるのを防ぎます。

そこから、明度の異なるアクセント色を2〜3色選びます。ティール＋グリーンは「関連」系列に、アンバーやコーラルなどの暖色アクセントはコールアウト・ターゲット・アラート専用に使いましょう。

さらにカテゴリ数が必要な場合は、色相を頻繁に変えず彩度（やわらかいvs鮮やか）でパレットを拡張します。これにより視聴者が素早くグループを識別でき、凡例に頼らずにすみます。

実際のデザインでインフォグラフィック用カラーパレットを使う方法

役割を先に割り振りましょう：主要系列色、副系列色、強調／アラート色、背景やタイポグラフィ用ニュートラル。これで「虹色チャート」になるのを防ぎ、要素同士の競合を避けられます。

タイトル・軸ラベル・ツールチップ・データラベルなど、各コンポーネントでコントラストを均一に保ちましょう。明るいイエローやライムを含むパレットの場合、テキストの背景に大きく塗るのではなく、バッジ・ストローク・マーカーに使用します。

プレゼンテーションや印刷用には、パレットを小さいサイズ（凡例や細い線）やグレースケールでテストしてください。グレースケールで2つの系列が同じに見える場合は、明度を調整し、比較がはっきりわかるようにしましょう。

AIでインフォグラフィックパレットビジュアルを作成

ダッシュボードやレポートの見開き、ソーシャル統計カードでパレットの雰囲気をプレビューしたいですか？付属のプロンプトを使って素早くモックアップを作成し、最終的なチャートを決める前にレイアウトやコントラストを反復調整しましょう。

Media.ioを使えば、テキストプロンプトから数分でインフォグラフィック風ビジュアルを作成できます――テーマの構想やブランドイメージの一致、同じデータセットに対する複数のカラーバリエーションの検討に便利です。

上部のパレットのいずれかから始めて、プロンプト構造はそのまま、色やレイアウトタイプ（タイムライン、KPIカード、ドーナツチャート）のみを入れ替えて一貫性を保ちましょう。

次へ： グリーンターコイズカラーパレット