スレートグレーは「いつでも使える」ニュートラルカラーのひとつです。クールで落ち着きがあり、控えめな背景から堂々としたタイポグラフィまで幅広く活用できます。
以下に、UIやブランディング、インテリアに使えるHEXコード付きのスレートグレーのカラーパレットアイデア20選以上をご紹介します。さらに、配色のコツやビジュアルを素早く生成するAIプロンプトもまとめました。
この記事について
なぜスレートグレーパレットがこれほど優れているのか
スレートグレーは、ブルーグレーの色味と落ち着いたニュートラルの間の絶妙な位置にあり、現代的な印象を与えつつも、冷たく無機質なイメージにはなりません。暗さによって「背景」または「構造」として自由に使い分けられます。
デジタル製品において、スレートグレーは階層を明確にサポートします。ナビゲーションや見出しには深い色味、面には薄い色味、アクション用にはアクセントカラーを加えることで、特にダッシュボードやフィンテック、エディトリアル構成に効果的です。
インテリアやパッケージなどの物理的なデザインでは、スレートグレーが穏やかな重みを与えます。木、砂、真鍮、テラコッタなど温かみのある素材と自然に調和し、全体を上質で落ち着いた印象にまとめます。
20種類以上のスレートグレーカラーパレットアイデア（HEXコード付き）
1）フォグバウンドハーバー
HEX： #708090 #2F3A44 #AAB2BD #D9D3C7 #C6A15B
ムード： 穏やか・海沿い・モダン
おすすめ用途： SaaS分析ダッシュボードUI
クールな港の霧と磨かれたスチールが、安定感と集中力を与えます。コントラストや階層が重要なデータ重視のインターフェースに適しており、濃いチャコールがナビやヘッダーをしっかり支えます。温かみのあるサンドや落ち着いたゴールドが無機質さを和らげ、特にグラフやバッジ、重点指標に効果的。コツ：ゴールドはメインアクションに限定し、グレートーンで全体をまとめるとすっきり見えます。
フォグバウンドハーバーの画像例（media.io生成）
Media.ioはブラウザ上で動画、画像、音声を作成・編集できるオンラインAIスタジオです。
2）ブルースティールとブラッシュ
HEX： #708090 #1F2A37 #E8B4B8 #F4F1EC #6BAED6
ムード： 洗練・親しみやすい・軽やか
おすすめ用途： ビューティーブランド ランディングページUI
しっかりとしたスティールと柔らかなブラッシュが自信と優しさを演出します。構造をはっきり保ちつつ、やわらげたいランディングページに最適。オフホワイトとの組み合わせでヒーローセクションを作り、スカイブルーはリンクやセカンドボタンに。コツ：本文はオフホワイト上、見出しには一番濃いネイビーで視認性を確保しましょう。
ブルースティールとブラッシュの画像例（media.io生成）
3）アッシェンセージスタジオ
HEX： #708090 #3E4A3D #C9D2C1 #F2EFE9 #B08A5A
ムード： オーガニック・静かな・エディトリアル
おすすめ用途： セラミック製品パッケージ
静かなスタジオの光と大地のクレイがオーガニックでクラフト感ある雰囲気を作ります。セージと暖かいタンカラーでクールなベースを和らげ、特に手触りや落ち着きが大切なパッケージにおすすめです。オフホワイトでタイポなどに余白を与え、ディープグリーンはアイコンや成分強調に。コツ：スレートトーンをラベルメインに、差し色は1色のアーストーンに絞ると高級感が出ます。
アッシェンセージスタジオの画像例（media.io生成）
4）ストームウィンドウニュートラル
HEX： #708090 #111827 #9CA3AF #E5E7EB #F59E0B
ムード： シャープ・高コントラスト・都会的
おすすめ用途： フィンテック モバイルアプリUI
嵐の窓の反射や都市の影がシャープで都会的なニュアンスを添えます。スレートグレーのパレットは、明瞭さや信頼性、数字のコントラストが求められるフィンテックに最適。ほぼ黒はテキストやナビ、琥珀色はステータスや警告、重要なCTAに。コツ：琥珀色は10%以内に抑え目立ち過ぎないようにしましょう。
ストームウィンドウニュートラルの画像例（media.io生成）
5）グラファイトとアプリコット
HEX： #708090 #2B2D31 #F4A261 #F7F3E9 #264653
ムード： 暖かなコントラスト・モダン・自信
おすすめ用途： スタートアップピッチデックスライド
グラファイトの深みとアプリコットの暖かさが、エネルギッシュかつ上品な印象を作ります。見出し、グラフ、印象的なアクセントが必要なピッチ資料に最適。メインはオフホワイト、アプリコットは注目箇所や数字に。コツ：ティールは補助的なビジュアルやアイコンで繰り返し使い、一貫性を持たせましょう。
グラファイトとアプリコットの画像例（media.io生成）
6）レイニーデイエディトリアル
HEX： #708090 #0B1320 #BFC7D5 #F6F5F2 #7C5CFC
ムード： 雰囲気・洗練・エディトリアル
おすすめ用途： 雑誌特集レイアウト
雨の日の静けさとインクのコントラストが洗練されたプリント感を生み出します。淡いスティールで長文も読みやすく、ほぼ黒は見出しと引用に力強さを付加。バイオレットはセクション区切りや注目数字に控えめに使いましょう。コツ：本文は最も暗い色で、行幅はゆったり取ると落ち着きある誌面になります。
レイニーデイエディトリアルの画像例（media.io生成）
7）ノルディックコンクリート
HEX： #708090 #3B4A5A #C7CED6 #F3F4F6 #A3B18A
ムード： ミニマル・軽やか・建築的
おすすめ用途： モダンリビングルーム内装パレットガイド
ノルディックの光がコンクリート壁に射すことで、最小限かつ呼吸感あるムードになります。スレートとスティールは壁や造作、張り地に、明るいグレー系で空間をソフトに。淡いオリーブによるアクセントは植物や陶器、一脚のチェアなどに控えめが理想。コツ：アクセントのオリーブは小さなポイントで2ヶ所使い、バランスよく仕上げましょう。
ノルディックコンクリートの画像例（media.io生成）
8）ミッドナイトティールアクセント
HEX： #708090 #0F172A #0EA5A4 #CBD5E1 #F8FAFC
ムード： ハイテク・クリア・クール
おすすめ用途： スマートウォッチ製品広告
ミッドナイトの深みとティールの輝きが、未来的かつクリーンな仕上がりに。淡いグレーはデザインを良い意味でクリニカルに保ち、明瞭さが必要なテクノロジー広告に最適。ティールは機能の強調や光るアクセント、動きの示唆に。最も濃い色が商品の輪郭を際立たせます。コツ：背景はほぼ白、コントラストはタイポグラフィに寄せ、主役を際立たせましょう。
ミッドナイトティールアクセントの画像例（media.io生成）
9）ダスティローズオフィス
HEX： #708090 #374151 #D1A3A4 #F5F2EE #8AB4F8
ムード： プロフェッショナル・柔らかい・親しみやすさ
おすすめ用途： 企業レポートテンプレート
ソフトなオフィス照明と控えめなローズの香りがプロフェッショナルなレイアウトをより親しみやすく感じさせます。見出しや表の罫線には一番濃いグレーを使い、長い本文部分には暖かみのあるオフホワイトを使います。ダスティローズはセクションヘッダーに最適で、ライトブルーはリンクや参照を目立たせます。ヒント：チャートは2色＋ニュートラルカラーにすると、レポートが素早く読めます。
media.ioで生成されたダスティローズオフィスの画像例
10）ミネラルスパ・カーム
HEX： #708090 #22303C #A7C4C2 #E9EFEF #CBAE82
ムード：穏やか、クリーン、回復的
おすすめ用途：ウェルネスブランドアイデンティティキット
ミネラルウォーターのトーンと柔らかいスチームが回復的でクリーンな雰囲気を作ります。シーフォームとミスティホワイトが新鮮さを、暖かみのあるベージュが人間味や自然な対比を加えます。ロゴやタイポグラフィには濃い色調を使い、パッケージやSNS投稿は明るくエアリーに保ちます。ヒント：繊細な紙目など1種類のテクスチャに絞り、輝きを強調せず穏やかに保ちましょう。
media.ioで生成されたミネラルスパ・カームの画像例
11）カッパーハードウェア
HEX： #708090 #2D3748 #B87333 #EFE7DD #6B7280
ムード：インダストリアル、暖かい、プレミアム
おすすめ用途：キッチン家電パッケージ
銅の輝きを持つ工業用スチールがプレミアムでワークショップ風の雰囲気を醸します。バッジやモデル名には暖かなメタリックトーンを使用し、オフホワイトはクリーンな説明文や特徴リストをサポートします。ミッドグレーは、副パネルやアイコンを控えめに保ちつつ消えません。ヒント：銅色はスポット印刷やホイルでアクセント的に使い、過剰な光沢を避けながらボックスを引き立てます。
media.ioで生成されたカッパーハードウェアの画像例
12）ウィンタールウール
HEX： #708090 #1F2937 #C4CBD4 #F5F5F4 #A16207
ムード：居心地よい、テーラード、タイムレス
おすすめ用途：ファッションルックブックスプレッド
テーラードウールと冷たい空気が心地よい控えめなエレガンスを表します。背景や余白には柔らかなグレー、見出しや価格には濃い色調を使います。暖かみのあるブラウンゴールドは呼び出し、ページ番号、小さなグラフィックルールなどの上品なアクセントに。ヒント：写真は少し寒色よりにし、アクセントカラーが意図的に感じられるようにしましょう。
media.ioで生成されたウィンタールウールの画像例
13）キャンドルライトビストロ
HEX： #708090 #2B2A2F #E0C097 #F7F1E3 #8C5E3C
ムード：親密、暖かい、格調高い
おすすめ用途：レストランメニューデザイン
キャンドルの暖かさとダークストーンが親密かつ格調高く感じられます。メニューヘッダーや区切り線は一番濃い色にし、本文はクリーム色の紙調で読みやすく。タンやココア色はアイコン、食事ラベル、控えめな枠線に最適です。ヒント：一番暖かいブラウンは看板メニュー専用にし、目立ちすぎないようにしましょう。
media.ioで生成されたキャンドルライトビストロの画像例
14）セレスティアルナイト
HEX： #708090 #0A0F1F #94A3B8 #F8FAFC #F97316
ムード：ドラマチック、モダン、エネルギッシュ
おすすめ用途：音楽フェスティバルポスター
天体の夜の雰囲気でドラマを加え、深い空にネオンのような輝きを与えます。ポスター本体はほぼ黒、タイプの階層にはスレートや淡グレーを使い分けます。鮮やかなオレンジは日付やチケット情報、ワンポイントのグラフィックに最適。ヒント：オレンジを同じウェイトのタイポグラフィだけに使うと、意図的なシグナルとして伝わります。
media.ioで生成されたセレスティアルナイトの画像例
15）ミニマルミュージアム
HEX： #708090 #20262E #B8C0CC #FFFFFF #9B8C7A
ムード：静か、キュレーションされた、ギャラリーのようなクリーンさ
おすすめ用途：美術館案内サイン
静かなキュレートトーンは、意図的な間隔でギャラリーの壁のように感じられます。案内サインの主フィールドは白、矢印や部屋番号、見やすい見出しは濃い色を使いましょう。暖かいストーンのアクセントは特別展示のハイライトに最適、アートワークと競合しません。ヒント：アイコンは1ウェイトに絞り、遠くでも読みやすい高コントラストにしましょう。
media.ioで生成されたミニマルミュージアムの画像例
16）ペブルパス
HEX： #708090 #334155 #CBD5E1 #F1F5F9 #22C55E
ムード：新鮮、クリーン、ほのかに遊び心
おすすめ用途：アプリオンボーディングUI
滑らかな小石と新鮮な空気がクリーンで少し遊び心のあるエネルギーを生み出します。淡い色調は広々としたオンボーディング画面に、グリーンは進捗や成功、確認のポジティブな合図に使います。濃いグレーでタイトルに重みを与え、イラストも引き立ちます。ヒント：進捗インジケーターはアクティブステップだけグリーンにし、ユーザーがどこにいるかを即座に理解できるように。
media.ioで生成されたペブルパスの画像例
17）オリーブドリフト
HEX： #708090 #2A3D3B #7D8F69 #E6E2D8 #D97706
ムード：冒険的、安定感、アーシー
おすすめ用途：アウトドアギアECバナー
地に足の着いたトレイル風トーンが冒険心を表現しつつ、ワイルド過ぎない雰囲気に。オリーブとディープグリーングレーが商品写真とよく合い、淡いサンドがバナーを見やすく広々と仕上げます。暖かいオレンジは割引や限定商品の目印に少しだけ活用。ヒント：アクセントは短いテキストの背景だけに使い、商品写真とバッティングしないよう気をつけましょう。
media.ioで生成されたオリーブドリフトの画像例
18）インクアンドサンド
HEX： #708090 #0F172A #D6D3CD #F9FAFB #2563EB
ムード：シャープ、モダン、自信
おすすめ用途：ポートフォリオウェブサイトUI
インクのような濃色と柔らかなサンドが、ページのようにクリアでモダンな印象をもたらします。このスレートグレーパレットは、プロジェクトの余白やタイポグラフィが主役のポートフォリオサイトに最適。クールなブルーはリンクやホバーステートなどインタラクティブ要素のみに使い、一番濃い色はナビゲーションや見出しに。ヒント：ブルーはクリック可能な部分だけに使うと、訪問者がすぐに認識できます。
media.ioで生成されたインクアンドサンドの画像例
19）クラウディラベンダー
HEX： #708090 #2E2A3B #B8B3D6 #F4F3F8 #D4A373
ムード：ロマンティック、柔らか、モダン
おすすめ用途：結婚式招待状セット
曇ったラベンダーと柔らかなグレーがロマンティックでありつつモダン＆クリーンな印象です。淡いラベンダーを用紙のメインに、深いプラムグレーでタイポグラフィをエレガントに。暖かいタンはモノグラム、枠線、小さなモチーフに控えめな祝祭感をプラス。ヒント：装飾要素は細くミニマルにし、パレットのエアリーさを保ちましょう。
media.ioで生成されたクラウディラベンダーの画像例
20）ハーバーミスト・クラスルーム
HEX： #708090 #334E68 #BFD7EA #F0F7FF #F6C453
ムード：明るい、親しみやすい、整理整頓
おすすめ用途：教育用インフォグラフィック
明るく霞がかったブルーは親しみやすく整然として、落ち着いた教室の壁のよう。淡い空色はセクションやボックスに、深いブルーグレーは見出しやラベルの視認性を高めます。サニーイエローはキーファクトやアイコン、目を引くハイライトに最適。ヒント：イエローは吹き出しなど1種類の要素だけに反復して使い、視覚的な一貫性を作りましょう。
media.ioで生成されたハーバーミストクラスルームの画像例
21）スモーキープラム・コントラスト
HEX： #708090 #2B1B2E #A78BFA #EDE9FE #94A3B8
ムード：クリエイティブ、ラグジュアリー、ややムーディー
おすすめ用途：書籍カバーデザイン
スモーキープラムと柔らかなバイオレットが、薄暮のインクを紙に乗せたような、クリエイティブでわずかにラグジュアリーな雰囲気を醸します。ディーププラムは背景やタイトルブロックに、淡いバイオレットは著者名や細部に。クールなグレーブルーは全体のバランスを保ち、甘くなりすぎません。ヒント：タイトルは高コントラストのセリフ体で、他はミニマルな書体にするとモダンに仕上がります。
media.ioで生成されたスモーキープラムコントラストの画像例
スレートグレーと相性の良い色は？
スレートグレーは、サンド、クリーム、ベージュ、ウィートなどのウォームニュートラルと合わせると、より柔らかく親しみやすい印象を手軽に演出できます。これらの色合いは、ブルーグレーのベースを「暖かく」しつつ、モダンな雰囲気も損ないません。
鮮明なデジタルコントラストを求めるなら、スレートグレーとほぼ黒またはネイビー、クリーンなオフホワイトを組み合わせ、CTAや重要な状態には高視認性のアクセント（アンバー、オレンジ、ティール、エレクトリックブルーなど）を足しましょう。
より表現力豊かなパレットを試したいなら、スレートグレーはダスティローズやラベンダーなどの淡いパステル、セージやオリーブなどのアースグリーンともよく調和し、個性を加えつつ穏やかな配色が維持できます。
実際のデザインでスレートグレーパレットを使う方法
まず役割分担を決め、ダークスレートやチャコールは主テキストやナビゲーションに、ミッドスレートは二次UI要素に、ごく淡いグレーは背景やスペーシングに使い分けましょう。こうすることで、ページ全体の可読性と一貫性が保たれます。
次にアクセント色系統を1つ選び、徹底して使いましょう。ウォーム系（ゴールド、アプリコット、カッパー）は高級感と親しみやすさ、クール系（ティール、スカイ、バイオレット）はシャープでテクニカルな印象を与えます。
最後に、ボタンや小ラベル、データビジュアライゼーションなどは早い段階でコントラストをテストしましょう。スレートグレーは控えめなので、明確な階層を設定しないと全体が「いい感じのグレー」に埋もれます。
AIでスレートグレーパレットのビジュアルを作成
ムードボードやUIコンセプト、パッケージモックアップを作るとき、パレットを元にしたビジュアルを生成すれば、実制作前に雰囲気を確認できます。
Media.ioのテキスト→画像生成ツールでは、（上記例のような）プロンプトを貼り付け、アスペクト比を指定して素早く反復し、ブランドに合う光や素材・スタイルを探せます。
方向性が決まったら、スレートグレーのベースは固定し、アクセントカラーだけ切り替えて複数バリエーションを試すことも簡単です。
スレートグレーカラーパレットよくある質問
-
スレートグレーのHEXコードは何ですか？
よく使われるスレートグレーのHEXは#708090です。また、多くのデザイナーはこれを中心により濃いまたは淡いブルーグレーを加えて、配色全体を構築します。 -
スレートグレーは暖色系ですか、それとも寒色系ですか？
スレートグレーは一般的に寒色系です。青みがかっているためです。ベージュ、サンド、小麦色、銅色、柔らかなオフホワイトの背景と組み合わせることで、より温かみを感じさせることができます。 -
スレートグレーと相性が良いアクセントカラーは何ですか？
強いコントラストをつけたい場合は、アンバー/オレンジ、ティール、鮮やかなブルーがおすすめです。ソフトなアクセントには、ダスティローズ、ラベンダー、セージ、暖かみのあるタンがブルーグレーのトーンに良く合います。 -
UIでスレートグレーを使うとき、地味にならない工夫は？
複数の明度（テキストやナビにはダーク、サーフェスにはライト）を使い、アクセントカラーをインタラクティブ要素（ボタン、リンク、アクティブ状態）用に一色確保しましょう。こうすることで階層が明確になり、「全体がグレー」という平坦さを避けられます。 -
スレートグレーはブランディングにも向いていますか？
はい、スレートグレーはモダンで安定感があり、プロフェッショナルな印象を与えます。特にSaaS、金融、プレミアムな製品のブランディングで、暖色メタリックやクリーンで鮮やかなアクセントと組み合わせると効果的です。 -
スレートグレーに合うニュートラルな背景色は？
オフホワイトや柔らかなグレー（クリーム、ミスト、ライトストーン）がおすすめです。快適なコントラストを保ち、スレートのタイポグラフィもはっきり見せ、アクセントカラーを加える余地ができます。 -
スレートグレーのカラーパレットには何色入れるべき？
ほとんどのプロジェクトには5色がバランス良いです：2～3色のスレート（ダーク／ミッド／ライト）、1色の背景ニュートラル、1色のアクセント。これで統一感のあるUIトークンやプリントシステムが作れます。
次へ： ウィートカラーパレット
