ホワイト＆ブラック配色アイデア20選 | カラーパレットとHEXコード

白黒のカラーパレットは、デザインを意図的に見せる最も速い方法です―クリーンな背景、シャープな文字、そしてすぐに読める階層構造を実現します。

以下では、厳選された20種類のモノクロパレットとHEXコード、さらにコントラストやバランスの実用的なコツ、必要に応じてアクセントカラーを加える方法を紹介します。

白黒パレットが優れている理由

白と黒は視覚的な基礎です：白は空間と明快さを生み出し、黒は構造やコントラスト、集中を即座にもたらします。二つを組み合わせることで、タイポグラフィやレイアウトの判断がより意図的に感じられます。

モノクロパレットは「カラーノイズ」を減らすため、UIにおいてユーザーは素早く情報をスキャンでき、ブランドロゴもより記憶に残ります。微妙なグレーが注目を奪うことなく階層を加えます。

白黒配色は自然に高いコントラストを持つため、画面や印刷物で優れたパフォーマンスを発揮します―特にほぼ黒や柔らかい白を活用することで、長い文章でも快適な見た目を保てます。

20以上の白黒カラーパレットアイデア（HEXコード付き）

1) ギャラリーミニマル

HEX： #ffffff #f5f5f5 #d9d9d9 #333333 #000000

雰囲気： クリーン、モダン、高コントラスト

おすすめ用途： ポートフォリオサイトやミニマルなUI

ギャラリーのような白や深い黒は、額縁付きプリントや静かな美術館の壁を思わせます。ライトグレーは余白として使い、見出しが意図的で厳しい印象になりすぎないようにしましょう。ポートフォリオや商品ページ、タイポグラフィ重視のレイアウトに最適です。アクションを促すアクセント（例えばコバルトやエメラルド）を1色だけ加え、本文テキストは#333333で快適に。

media.ioで生成したギャラリーミニマルのイメージ例

Media.io

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

今すぐ無料で試す

2) 紙にインク

HEX： #fffdf8 #f1eee6 #c9c4b8 #3a3a3a #0b0b0b

雰囲気： 雰囲気：　エディトリアル、触感、タイムレス

おすすめ用途： 雑誌レイアウトや長文ブログ

エディトリアルな温かみとシャープなインク調は本のページや余白、整った文字組を連想させます。この白黒組み合わせはオフホワイトを主体にし、見出しや引用にはブラックを使うと洗練されます。雑誌やブログテンプレート、ブランドストーリーのページに最適。#c9c4b8の細いルール線でセクションを分ければ視覚的なノイズが出ません。

media.ioで生成した紙にインクのイメージ例

3) ノワールマーブル

HEX： #ffffff #ececec #b8b8b8 #2a2a2a #0f0f10

雰囲気： 雰囲気：　ラグジュアリー、洗練、ドラマチック

おすすめ用途： プレミアムパッケージやビューティーブランディング

冷たいグレーのシャープなコントラストは、ギャラリーのライトの下で大理石の模様のように映ります。最も明るい白を余白に使い、#0f0f10はロゴに使うことで高級感のある仕上がりになります。香水箱、スキンケアラベル、プレミアムランディングページにぴったりです。最も暗い色にはスポットUV、他はマット用紙で触感を引き立てましょう。

media.ioで生成したノワールマーブルのイメージ例

4) スカンジナビアンコントラスト

HEX： #fcfcfb #e8e6e1 #b9b5ad #4a4a47 #141414

雰囲気： 雰囲気：穏やか、空気感、デザイン重視

おすすめ用途： インテリア、家具ルックブック、ホームブランド

穏やかなニュートラルやソフトなチャコールは陽の差す部屋やリネン、シンプルな家具を思わせます。黒はアクセント（ハードウェアやフレーム、細い文字など）として使うと映えます。背景は#e8e6e1を使えばまぶしさが軽減され、商品写真が自然に。#b9b5adはサブUIやスペック表などにも使い、バランスを取りましょう。

media.ioで生成したスカンジナビアンコントラストのイメージ例

5) ストリートウェアモノ

HEX： #f8f8f8 #dedede #a7a7a7 #262626 #050505

雰囲気： 雰囲気：大胆、都会的、エネルギッシュ

おすすめ用途： ストリートウェアブランドやグラフィック商品

大胆なコントラストと鋼のようなグレーは、厚手Tシャツやコンクリート背景の新しいインクのような印象です。ほぼ黒は大きなロゴタイプに、ミッドグレー#a7a7a7はセカンダリーマークを柔らかくします。アパレルタグやルックブック表紙、インパクトあるSNS投稿に最適。暗いレイアウトでは本文に#f8f8f8を使い、ハイライトは控えめに。

media.ioで生成したストリートウェアモノのイメージ例

6) ソフトシャドウ

HEX： #ffffff #f3f4f6 #cfd4da #555c66 #0d0f12

雰囲気： 雰囲気：優しい、親しみやすい、モダン

おすすめ用途： ウェルネスアプリやSaaSオンボーディング

穏やかな影とクールなニュートラルは落ち着いた動きやソフトなカード、静かな集中をイメージさせます。階層を際立たせつつ、厳しい印象にならないUIに最適。#f3f4f6は面、#cfd4daはボーダー、#0d0f12は主要テキスト専用に。ボタンは暗めにしつつ、#555c66のシャドウで浮かせると親しみやすさが出ます。

media.ioで生成したソフトシャドウのイメージ例

7) チェスボードクラシック

HEX： #ffffff #f0f0f0 #c8c8c8 #1f1f1f #000000

雰囲気： 雰囲気：シャープ、クラシック、自信

おすすめ用途： ロゴやアイデンティティシステム

シャープな黒と白のブロックはチェス盤のように戦略的かつ時代を超えた印象。ミッドグレーはブランドシステムの中で中和役として使い、全てが最大コントラストにならないように。法律事務所やファッションロゴ、モダンテックのロゴにおすすめです。実用的なヒント：まず#1f1f1fでロゴをテストすれば、どこでも読みやすいかがわかります。

media.ioで生成したチェスボードクラシックのイメージ例

8) フィルムグレイン

HEX： #fafafa #e1e1e1 #b0b0b0 #3b3b3b #111111

雰囲気： 雰囲気：ノスタルジック、映画風、テクスチャ

おすすめ用途： 写真プリセットやクリエイターポートフォリオ

懐かしいグレーやインキーブラックはフィルムグレインやコンタクトシート、暗室プリントを想起させます。#b0b0b0はキャプションやメタデータに使えば画像が主役に。写真家サイトや事例紹介、ギャラリーアーカイブに最適です。3～5%のノイズオーバーレイでトーンに意図感を出しましょう。

media.ioで生成したフィルムグレインのイメージ例

9) コンクリートロフト

HEX： #f7f7f7 #dedede #bdbdbd #4b4b4b #1a1a1a

雰囲気： 雰囲気：インダストリアル、構造的、安定感

おすすめ用途： 建築プレゼンや不動産パンフレット

工業的なグレーや堅牢なチャコールはコンクリートの壁や鋼のディテールを連想します。明るい色は図面背景に、暗い色はラベルやセクションタイトルに使いましょう。建築デッキや不動産ワンページ、案内サインのコンセプトなどに最適。線の太さは統一し、サブグリッドラインは#bdbdbdで雑然さを防ぎます。

media.ioで生成されたコンクリートロフトのイメージ例

10）禅 墨

HEX： #fffefc #ebe7e0 #bfb8ad #3d3a36 #0f0e0d

雰囲気： 穏やか、有機的、瞑想的

おすすめ用途： スパメニューやマインドフルネスブランド

穏やかなニュートラルと墨のような黒は、筆のストローク、和紙、静かな儀式を想起させます。この白黒の配色は、温かみのあるオフホワイトをキャンバスとして使用し、黒は自信のあるポイントで控えめに使うと最適です。スパメニュー、瞑想ランディングページ、工芸品のパッケージに最適。使用のコツ：テキストが多いページでは純黒ではなく #0f0e0d を使うと視覚疲労を軽減できます。

media.ioで生成された禅墨のイメージ例

11）ハイグロスモノ

HEX： #ffffff #f2f2f2 #cfcfcf #2f2f2f #090909

雰囲気： シャープ、高級感、テクノロジー先進

おすすめ用途： テック製品広告やランディングヒーロー

艶やかなホワイトと深い黒は光沢プラスチックや精密金属の質感を思わせます。UIクロームには #2f2f2f 、主要CTAや製品名には #090909 を使用。テック広告、新興企業のヒーローセクション、ハードウェア仕様ページにおすすめ。反射は1つの明るいハイライトだけで十分、高級感を出せます。

media.ioで生成されたハイグロスモノのイメージ例

12）ブラックタイブライダル

HEX： #ffffff #f6f1f1 #d8d2d2 #3a3a3a #0a0a0a

雰囲気： 上品、フォーマル、ロマンティック

おすすめ用途： ウェディング招待状とイベント文具

上品なニュートラルと真っ黒はタキシード、シルクリボン、キャンドルリセプションを思わせます。#f6f1f1でページを柔らかくし、ロマンチックさを保ちます。招待状、RSVPカード、席順表などクラシックなタイポグラフィに最適。アドバイス：#d8d2d2は枠線や封筒に使い、黒文字を強調しすぎないように。

media.ioで生成されたブラックタイブライダルのイメージ例

13）モノクロボタニカ

HEX： #ffffff #f0f2f0 #c8cec9 #4a4f4b #121513

雰囲気： フレッシュ、穏やか、自然から着想

おすすめ用途： ボタニカルイラストやエコラベル

グレースケールのグリーンと濃いチャコールは押し葉や植物スケッチを思わせます。淡色は紙の質感に、最も濃い色は線やラベルに使います。エコパッケージ、ガーデンブランド、穏やかな編集アクセントに最適。ちょっとしたコツ：#c8cec9の水彩ウォッシュで植物に生命感を与え、鮮やかな色を追加せずとも自然な雰囲気を出せます。

media.ioで生成されたモノクロボタニカのイメージ例

14）データダッシュボード

HEX： #fbfbfb #e9edf2 #c7cfda #39424e #0b0f14

雰囲気： 集中、プロフェッショナル、構造的

おすすめ用途： 分析ダッシュボードや管理UI

冷たさを感じるニュートラルは構造的なグリッドや明快なデータ階層感を演出。#e9edf2はパネル、#c7cfdaは区切り線、#0b0f14は重要な数字に使い注目を集めます。ダッシュボードやB2Bポータル、テーブル多めの画面に最適。チャートはシンプルに、暗いシリーズと明るい背景バーが視覚の疲れを防ぎます。

media.ioで生成されたデータダッシュボードのイメージ例

15）ミュージアムラベル

HEX： #fffffe #f4f4f2 #d0d0cc #2e2e2c #0c0c0c

雰囲気： キュレーション、静かな、情報的

おすすめ用途： サイン、ラベル、案内システム

キュレーションされたニュートラルは美術館の説明板や展示メモの雰囲気。温かみのあるグレーは長い読み距離でも目に優しく、重要情報には #0c0c0c を使用。この配色はサインやラベル、説明カードにぴったり。コツ：余白を広く取り、#d0d0ccでセクションヘッダーをさりげなく支えて高級感を演出。

media.ioで生成されたミュージアムラベルのイメージ例

16）ナイトタイプライター

HEX： #fffeff #f1f1f3 #bdbdc4 #3a3a40 #101014

雰囲気： ムーディー、文芸的、洗練

おすすめ用途： ブックカバーや文具

ムーディーなニュートラルと濃いグラファイトは深夜の執筆やインクリボン、紙の端の鮮明さをイメージ。こういった白黒配色は本の表紙や文具デザインに向き、タイポグラフィが感情を表現します。#bdbdc4はテクスチャブロックや著者プロフィール、#101014はタイトルに。コツ：紙の粒状感を加えて、明るい色調でも無機質になりすぎないように。

media.ioで生成されたナイトタイプライターのイメージ例

17）レトロ新聞紙

HEX： #fffaf0 #efe3cf #c8b9a3 #4a423a #191512

雰囲気： ビンテージ、温かい、ノスタルジック

おすすめ用途： ポスターやカフェメニュー

ビンテージな温もりとダークエスプレッソの色合いは古い新聞紙やクラシックポスター感を与えます。#fffaf0をベースに、#191512で見出しを強調すると昔風の雰囲気に。カフェメニュー、イベントポスター、レトロなパッケージにおすすめ。コツ：レイアウトの10～15％だけ最も濃い色を使い、主要なテキストには#4a423aを使うことで温かみを保てます。

media.ioで生成されたレトロ新聞紙のイメージ例

18）ミニマルコミック

HEX： #ffffff #f3f3f3 #c9c9c9 #2b2b2b #000000

雰囲気： 遊び心、パンチのある、グラフィック

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

遊び心あるコントラストとクリーンなグレーはコミックパネルや太字キャプション、短いパンチラインの印象。これらの白黒配色は小画面でも読みやすい投稿に。カードの背景には #f3f3f3、アウトラインには #2b2b2b を使い、純黒は重要語句に。コツ：テキストブロックは短くし、行間を広く取ることで詰まり感を防げます。

media.ioで生成されたミニマルコミックのイメージ例

19）オプアートライン

HEX： #ffffff #ededed #c4c4c4 #2a2a2a #070707

雰囲気： ダイナミック、芸術的、インパクト大

おすすめ用途： パターンデザインやアルバムアートワーク

段階的グレーのダイナミックなコントラストは錯覚やリズム、動き感を生み出します。#c4c4c4で二次的なストライプを作るとパターンが圧迫感なくなります。アルバムカバー、ポスター背景、現代パターンライブラリに理想的。コツ：線幅は一貫させ、白い余白を残してデザインに休息スペースを持たせましょう。

media.ioで生成されたオプアートラインのイメージ例

20）セラミックスタジオ

HEX： #fdfdfc #f0eeeb #cfc9c3 #4b4743 #171614

雰囲気： 手仕事風、温かみ、控えめ

おすすめ用途： ハンドメイド商品ページやクラフトブランド

手仕事の温かみあるニュートラルは陶土、工房の棚、マット釉薬をイメージ。#f0eeebは商品写真の背景に、#171614は価格や主要ボタンに。陶器ショップ、ハンドメイド市場、作家ポートフォリオにも合います。コツ：背景に微細な粒状テクスチャを加えて雰囲気を足し、重い影は避けて作品の穏やかさと誠実さを保ちましょう。

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

白黒と相性の良い色は？

白と黒はほぼどんなアクセントカラーともよく合いますが、最適なのはコントラストの高い環境で読みやすい鮮やかな色—コバルトブルー、エメラルド、赤、または明るいシアンなどです。

より柔らかく高級感を出したい場合は、ネイビー、フォレストグリーン、バーガンディ、温かいタンなどの落ち着いたアクセントを選びましょう。これらはモノクロ基調を穏やかにしつつ個性を加えます。

プロダクトUIやダッシュボードなら、アクセントカラーとその補助色（同系色の淡色）1つずつでクリアな状態変化（ホバー、選択、アクティブ）を作れます。

白黒カラーパレットを実際のデザインで使う方法

まずは役割ごとのニュートラルから：背景用の白/オフホワイト、カード用のグレー、枠線用グレー、テキスト用の黒に近い色。それで「純白に純黒」の疲れを防ぎながらコントラストは確保できます。

黒の使い方のポイント：見出し、アイコン、主要アクション。中間グレーはセカンダリーUI（メタデータ、区切り線、無効状態）を担い、デザインが大声にならないように。

アクセントカラーを加える時は用途を一つに限定—CTA、ハイライト、リンクなどに。モノクロシステムではアクセント使いの一貫性が洗練されたインターフェイスを作ります。

AIで白黒パレットのビジュアルを作成する

コンセプト提案やムードボード作成なら、素早くモノクロビジュアルを生成して、タイポグラフィ、スペース、コントラストを最終デザイン資産導入前に確認できます。

Media.ioではプロンプトからクリーンなUIモックアップ、ポスター、パッケージシーン、ブランドシートを生成可能。ライトやテクスチャ、レイアウトスタイルを調整し、素早く繰り返し試せます。

プロンプトに上記パレットHEXコード（または色味の説明：オフホワイト紙、温かいグレー区切り、黒に近いテキストなど）を入れておくと、セット全体の仕上がりが一貫します。

次に： バーガンディとティールのカラーパレット