モノクロームカラーパレット20選｜配色サンプル・HEX・AIデザイン例

モノクロームカラーパレットは、1つの基調色（またはニュートラル）を使用し、明から暗まで伸ばして、クリーンな階層構造を作り出し、視覚的な雑然さを排除します。

下記には、HEXコード付きの20の即利用可能なモノクロームパレットと、UI、ブランディング、編集レイアウトでMedia.ioで生成できるリアルなAIプロンプト例を掲載しています。

なぜモノクロームパレットが上手く機能するのか

モノクロームパレットは、すべての色がすでに「マッチ」しているため、デザインの意思決定を簡単にします。複数の色調を使う代わりに、明暗（明るさ/暗さ）を使って構造を築きます。

また、明瞭性も高まります。ナビゲーションやチャート、見出しなど、トーンのステップが予測可能な階層を作り、穏やかでスキャンしやすい印象を与えます。

さらに、モノクロームトーンは写真や印刷にも適しており、特に編集やブランドシステムにおいて画面や素材間の一貫性が重要な場合に効果的です。

20以上のモノクロームカラーパレットアイデア（HEXコード付き）

1) グラファイト ミスト

HEX： #F5F6F7 #D9DDE1 #B0B6BE #6B737D #2A2F35

雰囲気：クリーン、穏やか、編集向け

最適用途：UIダッシュボードやデータ中心のSaaS画面

コンクリートの上に霧がかかった朝のように静かでクリーンなグラファイトニュートラルは、安定感とモダンさを感じさせます。階層が重要で、眩しさを抑えたいダッシュボードに最適です。アラートやCTAには大胆なアクセントと組み合わせ、アイコンのラインは本文より少し濃くして読みやすさを保ちましょう。コツ：最も濃い色は見出しや重要な数字に使い、インターフェースを呼吸しやすい設計にしましょう。

media.ioで生成したグラファイトミストのイメージ例

Media.io

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

今すぐ無料で試す

2) ポーセリン スモーク

HEX： #FAF7F2 #E6DED3 #C9BFB3 #9A8F84 #4A433D

雰囲気：やわらかく、洗練された、プレミアム感

最適用途：高級ブランドやパッケージングシステム

陶器に煙りがかかったような柔らかく洗練された暖色ニュートラルで、さりげなく高級感を演出します。パッケージやタグ、印刷物など紙のテクスチャを活かす場面にぴったり。マット仕上げや微細なエンボス加工と、最も濃いトーンでコントラストを出したタイプが好相性。コツ：中間トーンはボーダーや区切り線に使い、強いラインを避けましょう。

media.ioで生成したポーセリンスモークのイメージ例

3) インクウォッシュ ネイビー

HEX： #E8EDF5 #BFCBE0 #879BBF #3E5C8A #0F2343

雰囲気：自信、集中、プロフェッショナル

最適用途：金融アプリやエンタープライズUIキット

水に広がるインクのように自信と集中を感じさせるネイビートーンは、信頼と正確さを演出します。金融UIや分析ツール、管理画面など明瞭さが求められる場面に最適。余白や明るい背景を組み合わせて、濃い色がレイアウトを圧迫しないようにしましょう。コツ：最も明るいブルーはチャート背景、中間ブルーはデータ系列ラインにすると視認性が保てます。

media.ioで生成したインクウォッシュネイビーのイメージ例

4) フォレスト シェード

HEX： #EAF3ED #C6DDCC #8FB79A #4F7F5E #1E3A28

雰囲気：新鮮、安定、エコ志向

最適用途：エコ商品パッケージやサステナブルブランド

雨上がりの木陰道のように新鮮で落ち着いたグリーンは、自然と信頼感を伝えます。サステナブルなパッケージやオーガニックラベル、ウェルネスブランドにぴったり。リサイクル紙のテクスチャや、最も濃いグリーンで描いたミニマルアイコンと好相性。コツ：大きい背景には最も明るい色を使い、重くなりすぎたり過度に飽和しないようにしましょう。

media.ioで生成したフォレストシェードのイメージ例

5) サンドストーン デューン

HEX： #FBF4E8 #E7D7BF #CBB58E #A07E55 #5A3E23

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

最適用途：インテリアデザインのムードボードやホームデコブランド

日差しを浴びた砂丘のような暖かくナチュラルなトーンは、親しみやすさと時代を超えた雰囲気を持ちます。インテリアのムードボードやカタログ、穏やかなEC体験に最適。リネンや木材などナチュラルな素材写真と組み合わせ、アクセントは黒や深いブラウンで構造を保ちましょう。コツ：中間サンドを大きいブロックに使い、最も濃い色は小さな文字やアイコンに限定しましょう。

media.ioで生成したサンドストーンデューンのイメージ例

6) ローズウッド クワイエット

HEX： #F6E9EB #E5C7CD #C995A0 #8A4A56 #3B151D

雰囲気：ロマンチック、エレガント、親密

最適用途：結婚式招待状やイベントステーショナリー

思い出の本に挟んだドライローズのようにロマンチックで親密なローズウッドトーンは、クラシックでパーソナルな印象を与えます。結婚式の招待状やRSVPカード、上質な封筒など微細なコントラストが大切な場に最適。細身のセリフ体や余白をたっぷり使い、濃い色はブロックではなくインクのような質感。コツ：名前や詳細部分は最も濃いトーンで印刷し、淡い中間色はボーダーやモノグラムに使いましょう。

media.ioで生成したローズウッドクワイエットのイメージ例

7) ラベンダー フォグ

HEX： #F4F0FA #D9CFF0 #B7A1DD #7B5FB3 #3A1F66

雰囲気：夢幻、優しい、モダン

最適用途：スキンケア広告や美容ブランドビジュアル

ラベンダー畑の間を漂う霧のように夢幻で優しいパープル。スキンケアキャンペーンや商品詳細ページ、グラデーションがソフトなSNSクリエイティブにおすすめ。クリーンなサンセリフ体と明るい白い背景で空気感を保ちましょう。コツ：濃いパープルは見出しにポイントで使い、全体の印象を穏やかに保ちます。

media.ioで生成したラベンダーフォグのイメージ例

8) カッパー エンバー

HEX： #FBEFE6 #F0D0BE #D7A07D #AA633D #4C2416

雰囲気：居心地の良い、職人風、力強い

最適用途：コーヒーショップポスターや季節プロモ

暖炉に燃える炎のような居心地よいカッパーブラウンは、即座に暖かさを演出します。カフェポスター、メニューのハイライト、季節プロモなど手作り感を出したい場面に最適。紙質やシンプルなイラストと合わせ、重くならないようフレンドリーに。コツ：本文は最も濃い色、中間カッパーは主な価格の後ろの形に。

media.ioで生成したカッパーエンバーのイメージ例

9) コバルト ナイト

HEX： #EEF3FF #C7D6FF #839FFF #2E5BFF #0B1B4D

雰囲気：大胆、エレクトリック、若々しい

最適用途：イベントフライヤーやナイトライフポスター

夜の都市のライトのように大胆かつエネルギッシュなコバルトブルーは、現代的で活気があります。イベントフライヤーやクラブポスター、発表グラフィックなど一目でインパクトを出したい場面におすすめ。詰まったタイポグラフィと高コントラストの配置で、明るいブルーが騒がしくならないようバランスを取りましょう。コツ：ネオン風ブルーは注目の一点だけに使い、淡いトーンで全体を整えます。

media.io で生成されたコバルトナイトの画像例

10）オリーブアーカイブ

HEX： #F2F4EA #D7DDC1 #B1BB84 #7A8A42 #2E3A12

雰囲気： 伝統的、学術的、控えめ

最適用途： 博物館の案内表示と展示ラベルシステム

古紙や押し葉のようなヘリテージと学術的な雰囲気で、これらのオリーブは整理された穏やかさを感じさせます。読みやすさが重要な博物館ラベルや展示サイン、教育印刷物に適しています。クリーム色の背景や図に黒のラインワークと合わせてください。ヒント：最も濃いオリーブ色はセクションのヘッダーに、中間のオリーブ色は二次ナビゲーションに使い、一貫性を保ちましょう。

media.io で生成されたオリーブアーカイブの画像例

11）ティールカレント

HEX： #E8F7F6 #BFE8E5 #7FCBC6 #2E9D98 #0D3E3B

雰囲気： 新鮮、テクノロジー、楽観的

最適用途： アプリのオンボーディングと機能説明UI

水の中を移動する光のように新鮮で楽観的なティールで、清潔感と現代的な印象です。オンボーディング画面やプロダクトツアー、やさしいエネルギーが必要な機能紹介に最適です。丸みのあるUIコンポーネントと十分な余白と合わせて、ティールの鮮明さを保ちましょう。ヒント：最も濃いティールは主要ボタンに、最も淡いティールはカードやセクションに使用しましょう。

media.io で生成されたティールカレントの画像例

12）チョコレートノワール

HEX： #F3ECE6 #D9C7BA #A98B79 #6B4A3B #24140E

雰囲気： 濃厚、親密、クラフト重視

最適用途： アーティザンチョコレートのパッケージとラベル

暗いデザートバーのようにリッチで親密なブラウンは、手作り感と贅沢感があります。単色の配色でパッケージ全体の一体感を保ち、階層を値の変化で表現できます。ゴールド箔や未加工の紙と合わせて温もりを引き出しましょう。ヒント：材料リストは最も淡いパネルにすると読みやすくなります。

media.io で生成されたチョコレートノワールの画像例

13）スカイスチール

HEX： #F2F6FA #D0DCE8 #A4B7CB #6C86A1 #2B3E52

雰囲気： クール、秩序、企業的

最適用途： 年次報告書とB2B編集レイアウト

冬空とスチール梁のようにクールで秩序だったブルーグレーは、構造的で信頼感があります。年次報告書やケーススタディ、落ち着いたページ展開が必要な長文PDFに最適です。シンプルなチャートや一貫したヘディングスタイルと合わせて、スキャンしやすくしましょう。ヒント：2番目に淡い色は表の行に使い、濃い境界線なしでも判読性を高めます。

media.io で生成されたスカイスチールの画像例

14）ミントミニマル

HEX： #F1FBF7 #CFF2E5 #97DFC7 #4FBA95 #1E5A45

雰囲気： 明るい、回復的、親しみやすい

最適用途： ウェルネスアプリUIと習慣トラッカー

冷たいミントの息のように明るく回復感のあるグリーンは、安心感があり、生活に馴染みやすい印象です。習慣トラッカーやウェルネスUI、穏やかなマイクロインタラクションに最適です。柔らかな影や丸みのあるカードと合わせて親しみやすさを保ちましょう。ヒント：中間のミントは進捗管理に、最も濃いグリーンはアクティブタブや主要アクションに使いましょう。

media.io で生成されたミントミニマルの画像例

15）プラムベルベット

HEX： #F5EEF6 #E1C9E6 #BC8CCB #7A3B8F #2A0E33

雰囲気： 劇的、エレガント、クリエイティブ

最適用途： 書籍カバーとアルバムアートワーク

ベルベットが低照度で輝くような劇的でエレガントなプラム色は、芸術的で高級感があります。書籍カバーやアルバムアート、強いムードが必要なキャンペーンビジュアルに適しています。ミニマルなレイアウトとシャープなタイポグラフィコントラストと合わせて、パープルの甘さを抑えましょう。ヒント：最も濃い色を背景にし、淡い色からタイトルやバッジ用のハイライトを引き出しましょう。

media.io で生成されたプラムベルベットの画像例

16）クリムゾンランプ

HEX： #FCECEE #F6C7CE #E88A9A #C23B55 #4B0E18

雰囲気： 大胆、情熱的、インパクト大

最適用途： 製品発表のSNS広告やプロモグラフィック

夜に赤いランプが輝くような大胆で情熱的なクリムゾンは、即座に緊急感を生み出します。こうした単色配色はプロモグラフィックに最適で、メッセージに焦点を置きつつダイナミックな雰囲気。シンプルな形と強いタイポグラフィリズムと組み合わせ、中間クリムゾンにレイアウトの多くを担当させましょう。ヒント：最も濃い色は価格や締切などの詳細に使い、強調しつつ騒々しくなりません。

media.io で生成されたクリムゾンランプの画像例

17）ストーンウォッシュブルー

HEX： #F1F5F8 #D0DEE7 #A1B8C9 #6D8EA6 #2E4555

雰囲気： リラックス、海岸風、信頼感

最適用途： 写真プリセットのプロモ・ライフスタイルブランディング

海辺の色あせたデニムのようにリラックスして信頼できるブルーは、親しみやすく穏やかな印象です。ライフスタイルブランドやプリセットプロモカード、やさしいWebセクションに自然にフィットします。風通しの良い写真と組み合わせ、UIアクセントを最小限にすれば色調が写真と競合しません。ヒント：最も濃いブルーは小ラベルやキャプションに使い、淡い画像上でも判読性を保ちましょう。

media.io で生成されたストーンウォッシュブルーの画像例

18）ゴールデンパーチメント

HEX： #FFF7DF #F1E0A9 #D9C46B #B3912A #4A3609

雰囲気： ヴィンテージ、晴れやか、ノスタルジック

最適用途： ヴィンテージメニューやカフェ印刷物

古いパーチメントのページのようにヴィンテージで晴れやかなゴールドは、懐かしく親しみやすい印象です。メニューやカフェの会員カード、レトロポスターレイアウトなど、温かみが主役のデザインによく合います。クラシックなセリフ書体とシンプルなアイコン、冷たい色を避けてゴールドの温度感を守りましょう。ヒント：最も濃いブラウンは細かいテキストに、中間ゴールドはセクションヘッダーに。

media.io で生成されたゴールデンパーチメントの画像例

19）スレートサーキット

HEX： #EDF1F4 #C7D0D8 #8896A4 #4B5A68 #161C22

雰囲気： スタイリッシュ、テクニカル、モダン

最適用途： テックランディングページと製品UIセクション

ブラッシュメタルや回路のようなスタイリッシュでテクニカルなスレートは、精密で高級感のある色調です。テック領域のランディングページや機能グリッド、ドキュメントの強いコントラストが必要な場面に理想的です。細いラインアイコンや淡いスレート間のグラデーションと組み合わせ、奥行きを演出しましょう。ヒント：中間のスレートはカード背景に、ほぼ黒はヘッダーにしてページを見やすく。

media.io で生成されたスレートサーキットの画像例

20）アイボリーアッシュ

HEX： #FFFFFF #F0F0F0 #D1D1D1 #A5A5A5 #5A5A5A

雰囲気： ミニマル、空気感、ギャラリー風

最適用途： ミニマルポスターやギャラリー印刷物

静かなギャラリーウォールのようなミニマルで空気感のあるアイボリー～アッシュグレーは、意図的でタイムレスな印象。ポスターやポートフォリオ、タイポグラフィ印刷物でレイアウトと余白が主役になる場面に最適です。太字書体と精密なグリッドで鮮明な仕上がりに。ヒント：主要要素には中間グレーを、その他はほぼ白でコントラストを濁さずに。

media.io で生成されたアイボリーアッシュの画像例

モノクロームに合う色は？

単色システムはアクセントカラーとよく合います。シアン、ライム、レッドなどの明るいアクセントは明確な行動喚起を加えつつ、トーンデザインの落ち着き構造を損ねません。

メタリックや「素材」アクセントも良い選択です。温かいニュートラルにはゴールド箔、クールグレーにはクロームのようなハイライトを合わせると、競合するパレットではなくテクスチャとして認識されます。

バリエーションを増やす必要がある場合は、単色ベースに隣接色（アナログカラー）を彩度低く加え、全体が統一感を保てるようにしてください。

モノクロームカラーパレットを実際のデザインで使う方法

色見本ではなく役割から始めましょう：最も淡い色は背景に、中間色は面や境界線に、最も濃い色は見出しや主要データに割り当てます。こうすることでコントラストが安定します。

UIで単色トーンを使う場合、余白や太さ、コンポーネント状態（ホバー・アクティブ・無効など）で「全て同じに見える」状態を防ぎます。わずかな値変化が十分なことも多いです。

ブランディングや編集レイアウトでは、写真やタイポグラフィを主役にしましょう。単色カラーは静かな舞台となり、写真やタイトル、製品の細部をより意図的に見せてくれます。

AIでモノクロームパレットのビジュアルを作成

デザイン前に単色パレットの実例を見たい場合は、Media.io のテキスト画像生成を使い、ポスター・パッケージ・UI画面・ムードボードを即座にモックアップできます。

上記プロンプトをコピーし、対象（あなたの商品、アプリ、イベント）を調整、背景やライティングの記述はそのままにするとポートフォリオ向けのきれいな結果になります。

方向性が決まったら、「マット」「高級」「ミニマル」「編集」などキーワードを入れ替え、同じトーン内で質感や構図をブラッシュアップしましょう。

次へ： ミュージアムカラーパレット