ダイムグレーは、ピュアブラックのような厳しさのない構造をもたらすモダンなニュートラルです。UI、ブランディング、インテリアでは、すっきりとしたタイポグラフィ、安定したレイアウト、落ち着いたビジュアル階層をサポートします。
以下は、16進コードを備えた20以上の薄暗いグレーのカラーパレットのアイデアと、アクセントのペアリング、コントラストの読みやすさ、パレットを実際のデザインシステムに変えるための実用的なガイダンスです。
この記事では
薄暗いグレーのパレットがとてもうまく機能する理由
薄暗いグレーは、真っ黒な黒と柔らかいライトグレーの間のスイートスポットに位置するため、コンテンツを圧倒することなくナビゲーション、見出し、UI chromeを運ぶことができます。そのバランスにより、デザインは構成され、意図的に感じられます。
ニュートラルなので、くすんだグレーは暖かいアクセント（砂、テラコッタ、ゴールド）やクールなアクセント（ティール、スレートブルー、ミント）と合わせやすいです。同じ信頼できる基盤を維持しながら、気分を劇的に変えることができます。
また、画面と印刷全体の一貫性にも役立ちます。薄暗いグレーは「純粋な黒」のコントラストショックを軽減し、大きなブロック、背景、タイポグラフィの多いレイアウトではより洗練されて見える傾向があります。
20 以上の薄暗いグレーのカラー パレットのアイデア (十六進コード付き)
1）都市部の霧
十六進：#696969 #2F343A #BFC5CC #F2F1ED #C7A27C
気分：静かな、大都会的な、洗練された
最適な場合:テクノロジー製品のランディングページUI
静かな街の霧とブラッシュコンクリートが思い浮かび、暖かい砂のアクセントで柔らかくなります。誇大宣伝よりも明確さが重要なダッシュボードやSaaSランディングページに適合します。深い炭の中に見出しを保ちながら、トープのハイライトをボタンまたはキーメトリックとペアリングします。使用法のヒント: 泥だらけのコントラストを避けるために、日焼けを 1 つの主なアクションに予約してください。
media.ioを使って生成した都市霧の画像例
Media.io は、ブラウザでビデオ、画像、オーディオを作成および編集するためのオンライン AI スタジオです。
2) 石とセージ
十六進：#696969 #3E4247 #A9B7A5 #E7E3DA #7B6D5D
気分：接地された、自然な、回复
最適な場合:スパのブランドアイデンティティとパッケージ
グラウンドストーントーンが柔らかいセージのノートと出会い、落ち着いた浴場のインテリアのようです。それはあなたが信頼と落ち着きを望むウェルネスブランディング、ラベル、最小限のパッケージに美しく機能します。シールやコールアウトではセージをヒーローのアクセントにし、グレイにタイポグラフィを処理させます。使用法のヒント：ライトクリームをコーティングしていないストックとして印刷し、オーガニックな感触を高めます。
media.ioを使って生成した石とセージの画像例
3) ミュージアムミニマル
十六進：#696969 #1F2328 #D9D3C7 #FFFFFF #8B7E74
気分：ギャラリー - 清潔で洗練された静かな贅沢
最適な場合:編集誌のレイアウト
ギャラリーの壁、静かなタイプ、厳選された静けさが雰囲気を定義します。この薄暗いグレーのカラーパレットは、ホワイトスペースとエレガントな階層に依存する編集スプレッドやルックブックに適しています。見出しのほぼ黒と引用の温かみのあるグレージュを組み合わせると、ページが冷たく感じないようにします。使用法のヒント: レイアウトが博物館のようなままになるように、キャプションのアクセントルールを 1 つ守ります。
media.ioを使って生成したミュージアムミニマルの画像例
4）ココアスモーク
十六進：#696969 #3B2F2A #8A6F5A #E9DFD3 #171717
気分：ムーディー、居心地の良い、親密な
最適な場合:コーヒーショップのメニューデザイン
スモーキーなエスプレッソトーンと温かいココアが、心地よい深夜のカフェの雰囲気を醸し出しています。読みやすさを維持する必要があるメニューや小さな形式の印刷に最適です。本文のテキストにはクリーム色の背景を使用し、セクションのヘッダーと価格には濃い茶色を予約します。使用法のヒント: 微妙な紙の質感を追加して、暗闇が平らに感じないようにします。
media.ioを使って生成したココア煙の画像例
5) 沿岸曇り
十六進：#696969 #4A6572 #9FB7C3 #F5F7F8 #D2B48C
気分：新鮮、風通しがよく、落ち着いた
最適な場合:旅行ブログのヘッダーとサムネイル
海沿いの曇り空は、きれいな氷のような白いベースのおかげで、暗いというよりも風通しが良く感じられます。このミックスは、静かなカラーストーリーを必要とするトラベルヘッダー、サムネイルシステム、コンテンツカードに適しています。リンク用のブルーとグレーと小さなUIハイライトを組み合わせ、ソフトバッジカラーとしてタンを維持します。使用法のヒント: 飽和したブルーを制限して、パレットが霧でリラックスしたままにします。
media.ioを使って生成した沿岸曇りの画像例
6) ネオンサインの夕暮れ
十六進：#696969 #1B1D22 #FF4FA3 #6C5CE7 #F3F3F3
気分：エネルギッシュ、ナイトライフ、モダンなエッジ
最適な場合:エレクトロニックミュージックナイトのイベントポスター
ナイトライフ 夕暮れのエネルギーは、深いスモーキーなニュートラルに対してパンチの効いたピンクとバイオレットで現れます。これらの薄暗いグレーの色の組み合わせは、コントラストがすぐに注目を集める必要があるイベント ポスターやソーシャル グラフィックに輝きます。グレーをステージにし、見出しにピンクを使用し、バイオレットがセカンダリディテールをサポートします。使用法のヒント: 印刷でバンディングを制御できない限り、グラデーションを避けてください。
media.ioを使って生成したネオンサインduskの画像例
7) リネンスタジオ
十六進：#696969 #8E8A84 #DCD6CC #FAF7F2 #B58B6A
気分：柔らかい、触覚、手作り
最適な場合:最小限の製品写真撮影背景スタイリング
柔らかいリネンとスタジオの日光が、このセットに落ち着いた手作りのトーンを与えています。暖かく自然なアンダートーンのニュートラルな表面が必要な製品撮影に最適です。暖かい日焼けを小道具のアクセント（リボン、ラベル、小さなカード）として使用し、オフホワイトがフレームのほとんどを運びます。使用法のヒント: グレーが金属ではなく生地として読まれるように、影を穏やかに保ちます。
media.ioを使って生成したリネンスタジオの画像例
8) 北极钢鉄
十六進：#696969 #22313F #A7B1B7 #E6EEF3 #00A6A6
気分：鮮明、技術的、自信に満ちた
最適な場合:データダッシュボードUI
シャキシャキしたスチールと氷のようなライトグレーは、クリーンなティールのシグナルカラーで、技術的で信頼性があります。状態と指標を明確に強調する必要がある分析ダッシュボードやフィンテックツールに適合します。ティールとチャートとトグルをペアリングし、ナビゲーションのために最も暗いネイビーを維持してください。使用法のヒント: ミッドグレーが視認性が低くならないように、小さなタイプでコントラストをテストしてください。
media.ioを使って生成したアークティックスチールの画像例
9) ブラッシュコンクリート
十六進：#696969 #4C4C4C #F2C6C2 #FFF4F3 #B07A7A
気分：柔らかく、モダンで、親しみやすい
最適な場合:美容ブランドのソーシャルテンプレート
コンクリートに淡いブラッシュカラーを加えると、モダンでありながら親しみやすく、ほのかにバラ色に輝くミニマルなスタジオのような雰囲気を感じさせます。ビューティー系のSNSテンプレートや製品の強調表示、シンプルなプロモーションに最適です。広い範囲にはブラッシュカラーを、小さなタグには深みのあるローズを使うと、グレーが全体のバランスを保ってくれます。使い方のコツ：ピンクがくすんで見えないように、背景はほぼ白に近く保ちましょう。
media.ioを使用して生成したブラッシュコンクリートの画像例
10）フォレストスレート
十六進： #696969 #2A3A2E #6F8F72 #E3E7E0 #C7B299
気分： ナチュラル、安定感、健やかさ
最適な場合: エコブランド向けWebサイト
フォレストグリーンがスレートグレーの上に重なり、ハイキングコースやリサイクル紙のラベルを思わせます。説教くさくならず実用的な印象を求めるサステナブルなブランドによく合います。ヘッダーやアイコンにはエバーグリーン、ページのメイン背景には淡いグレーグリーンを組み合わせて。使い方のコツ：温かみのあるベージュを少量加えれば、グリーンが冷たくなりすぎません。
media.ioを使用して生成したフォレストスレートの画像例
11）ゴールデンアワーアスファルト
十六進： #696969 #2D2D2D #F0B429 #F7E7C6 #8C6A3B
気分： 力強い、暖かい、都会的
最適な場合: スタートアップのピッチデックスライド
アスファルトに差し込むゴールデンアワーの光が自信と都会的なインパクトを与えます。説得力とほんの少しの楽観性を演出したいピッチデックやキーノートスライドに最適です。ハイライトや重要な数値にはイエローを使い、ダークなニュートラルがグリッド構造を作ります。使い方のコツ：イエローが強くなりすぎないよう、クリーム色をメインに。
media.ioを使用して生成したゴールデンアワーアスファルトの画像例
12）ネイビーテイラード
十六進： #696969 #0F1B2D #2B3A55 #E9EDF2 #C6A15B
気分： プロフェッショナル、仕立ての良い、高級感
最適な場合: 法律事務所のブランディング
仕立ての良いネイビーと静かなグレーは、真鍮のピンが映えるスーツのようです。信頼性を求めつつ時代遅れに見せたくない法律事務所やコンサルブランドに最適。真鍮ゴールドは印や区切りに使い、ネイビーはナビや見出しに使用。使い方のコツ：ゴールドは本文には使わず、仕上げのアクセントに。
media.ioを使用して生成したネイビーテイラードの画像例
13）テラコッタロフト
十六進： #696969 #3C3532 #C76B4B #F3E6DC #8C8A84
気分： 暖かい、クリエイティブ、生活感
最適な場合: インテリアデザインムードボード
ロフトで使うテラコッタは、クリエイティブで招かれたくなる空間、窓辺の粘土プランターのような雰囲気を与えます。インテリアやムードボード、ホームデコにおすすめ。テラコッタは壁や背景にソフトクリームと組み合わせ、家具には暗いトーンを。使い方のコツ：テラコッタを小さく複数使い統一感を。
media.ioを使用して生成したテラコッタロフトの画像例
14）アイリス＆インク
十六進： #696969 #24243A #6F7BF7 #EDEEFF #B9B0D9
気分： 夢のよう、モダン、ほんのり未来的
最適な場合: モバイルアプリ導入画面
アイリスの光とインクの影が夢のような雰囲気を作り、霧ガラス越しの黄昏のようです。この暗いグレーパレットは、落ち着いた動きと明快なステップを必要とするオンボーディングフローに最適。ペリウィンクルは進捗表示やマイクロインタラクションに使い、ほぼ白はコンテンツカードに。使い方のコツ：ミッドラベンダーをソフトなシャドウの代用として。
media.ioを使用して生成したアイリス＆インクの画像例
15）モノクロームワークショップ
十六進： #696969 #111111 #4D4D4D #CFCFCF #F8F8F8
気分： 工業的、フォーカス、無駄なし
最適な場合: 写真家向けポートフォリオWebサイト
工業的なモノクロームは、プリントとコントクトシートが並ぶワークショップの壁のようです。画像を際立たせながらUIを目立たせたくないポートフォリオに最適。ナビゲーションには一番濃い黒、スペーシングや区切りにはライトグレーを。使い方のコツ：ホバー状態は控えめにし、作品が主役に。
media.ioを使用して生成したモノクロームワークショップの画像例
16）ミントメトロ
十六進： #696969 #30363B #7FD1B9 #E9FAF5 #F4C95D
気分： フレッシュ、ポジティブ、現代的
最適な場合: フィンテックアプリのマーケティングバナー
メトログレーに映えるミントは、現代的で楽観的、クリーンな通勤と光がガラスに当たるイメージです。フィンテックバナーや機能の訴求に最適。主要な形状にミント、バッジや率には小さな黄色を。使い方のコツ：ミントにはたっぷりの余白をとり、鮮やかだけど騒がしくならないように。
media.ioを使用して生成したミントメトロの画像例
17）ローズウッドイヴニング
十六進： #696969 #2B2024 #6E3B3B #EAD7D7 #D1A054
気分： ロマンチック、ドラマティック、エレガント
最適な場合: 結婚式招待状セット
ローズウッドのトーンと落ち着いた光が、キャンドルライトのベルベットのようなロマンチックでドラマティックな雰囲気です。少しモダンなエッジのある招待状やフォーマルな文房具に最適。ダスティブラッシュの背景に深いワインのテキスト、ゴールドは名前やボーダーのハイライトに。使い方のコツ：ゴールドのラインは細めにし、上品さをキープ。
media.ioを使用して生成したローズウッドイヴニングの画像例
18）クレイ＆グラファイト
十六進： #696969 #2E2A28 #B38B6D #EFE7DD #6F5E53
気分： アースカラー、職人気質、安心感
最適な場合: 陶芸ショップ梱包ラベル
素焼きのクレイとグラファイトは、朝の静かな時間に陶芸家が器の縁を整える手作りの温もりを感じさせます。ラベルやタグ、小さなパッケージデザインに最適。クレイはクリームと合わせてラベルベースに、グラファイトはシャープなテキストに。使い方のコツ：ミッドブラウンのスタンプを加え、職人気質を強調。
media.ioを使用して生成したクレイ＆グラファイトの画像例
19）シトラスコンクリート
十六進： #696969 #333333 #D7E04B #F5F6E8 #A3A7AA
気分： 明るい、遊び心、モダン
最適な場合: スポーツウェア製品広告
コンクリートニュートラルにシトラスのアクセントで、スポーティかつモダンな印象を演出。クリーンなスタジオの新作トレーナーのよう。パンチ力はあるが騒がしくなりすぎない製品広告に最適。ペアライムのアクセントは主要なベネフィット用に、淡いオフホワイトは余白用に。使い方のコツ：レイアウトごとにライムは一点のみに注目させ最大効果を。
media.ioを使用して生成したシトラスコンクリートの画像例
20）ウィンターボタニカル
十六進： #696969 #46505A #8AA0A6 #F1F4F6 #B7A18B
気分： クール、繊細、エアリー
最適な場合: 水彩ボタニカルイラストセット
クールなウィンターボタニカルは、ジャーナルに挟んだ淡い葉のような繊細さ。柔らかさを保ちつつ構造を失わないイラストセットや文房具におすすめ。ブルーグレーは茎や影に、一番明るい色はペーパートーンに。使い方のコツ：ベージュはシードポッドとして控えめに入れて温かみをプラス。
media.ioを使用して生成したウィンターボタニカルの画像例
21）カッパーサーキット
十六進： #696969 #202225 #B87333 #E6E6E6 #4B6E77
気分： 工業的、ハイテク、高級感
最適な場合: ハードウェア製品パッケージ
ダークグラファイトにカッパーを合わせると、デスクライトの下の回路のように工業的でありながら高級感も。技術的かつ温もりを感じさせたいハードウェアパッケージやスペックシートに最適。カッパーは細いラインやアイコンに、薄いグレーは視認性の高いパネル用に。使い方のコツ：控えめなティールをラベル色として繰り返し使い、バリエーションを整理。
media.ioを使用して生成したカッパーサーキットの画像例
くすんだグレーと相性の良い色は？
ディムグレーはサンド、トープ、クリーム、テラコッタなどの暖色ニュートラルとよく馴染み、親しみがありヒューマンな印象に。これらのアクセントが配色全体を冷たくなりすぎたり無機質に傾きすぎるのを防いでくれます。
シャープでモダンな印象にしたい場合は、ディムグレーとティール、スレートブルー、ミント、アイシーなオフホワイトなどのクールトーンを組み合わせて。特にダッシュボードやSaaS、クリアさが求められるエディトリアルレイアウトで効果的です。
エネルギッシュな印象が欲しい場合は、明るい「シグナル」カラー（ネオンピンク、ペアライム、ゴールデンイエローなど）をひとつ加え、そのほかは落ち着いた色味で。ポイントは節度です。制御されたグレーにひとつだけ派手なアクセントがあると、上質なのに騒々しくなりません。
実際のデザインで薄暗いグレーのカラーパレットを使用する方法
まず役割を決めて、本文やUIの骨組みにディムグレー、見出しにはほぼブラック、メイン背景にはライトグレーやオフホワイトを。アクセントカラーは主要なアクションやハイライト、重要なデータのみに使用します。
特にディムグレーがミドルグレー背景上にあるときはコントラストに注意しましょう。読みやすくするには、テキストをさらに濃くするか背景を明るくし、複数画面で小さな文字も確認します。
ブランディングや印刷では、質感や紙選びもポイント。非コート紙や繊細な風合い、マットな仕上げでディムグレーが手触り感や上品さを増します。アクセントカラーはタッチポイント全体で統一し、システムの一体感を維持しましょう。
AIで薄暗いグレーのパレットビジュアルを作成する
ランディングページ、ポスター、パッケージモックアップ、ムードボードでディムグレー配色をプレビューしてみたいですか？テキストプロンプトから素早くコンセプト画像を生成し、コントラストや雰囲気が納得いくまで試せます。
フォーマット（UI、印刷、製品写真）、ライティング、素材を説明し、パレットのキーポイント（メイントーンのディムグレー、アクセントカラー、背景色）を加えましょう。これで制作前のアイデア検証が容易になります。
ディムグレー・カラーパレットよくあるご質問
-
ディムグレーのHEXコードは何ですか？
Web標準の「dimgray」カラーは#696969です。タイポグラフィ、UI構造、ニュートラルな背景に最適なバランスの取れた中暗グレーです。 -
ディムグレーはテキストに純粋なブラックより優れていますか？
多くの場合、はい。ディムグレーは明るい画面での強いコントラストや眼精疲労を軽減しつつ、可読性を保ちます。特に大きなテキストや見出し、UIラベルに適しています（小さな本文テキストにはコントラストを確認してください）。 -
ディムグレーに最も合うアクセントカラーは何ですか？
サンド、テラコッタ、ゴールドなどの暖色系アクセントは心地よさを加え、ティール、スレートブルー、ミントなどの寒色系アクセントはクリーンでテクニカルな印象を与えます。ビビッドなアクセント（ピンクやペアライム）を控えめに使うことで強い強調が得られます。 -
ディムグレーパレットが「地味」に見えないようにするには？
主要な見出しにはブラックに近い色でコントラストを高め、オフホワイトの背景で余白を作り、アクセントカラーを1色だけフォーカルポイント（ボタン、バッジ、ハイライト）に使い、あちこちに分散させないようにします。 -
ディムグレーはブランドアイデンティティにも使えますか？
はい。ディムグレーは安定感と洗練さを伝え、プロフェッショナルなブランドの強いベースカラーになります。ミント、ブラスゴールド、ブラッシュ、カッパーなど特徴的なアクセントと組み合わせれば、印象的なアイデンティティとなります。 -
UIデザインでディムグレーを使用する最適な方法は？
セカンダリーテキスト、ボーダー、アイコン、ナビゲーション部分に使い、メインのコンテンツ背景にはより明るいニュートラルカラーを使います。プライマリアクションやステータスには、高コントラストのアクセントカラーを1色だけ用います。 -
デザイン前にディムグレーパレットのアイデアを素早く視覚化する方法は？
AIのテキストから画像作成ツールで、パレットや素材を指定するプロンプトを使い、モックアップ（UI画面、ポスター、パッケージ、インテリア）を生成します。その後、可読性や雰囲気に合わせて調整します。
次： ペアカラー パレット
