スレートブルーは、落ち着きと自信の間の絶妙なバランスに位置し、モダンなカラースキームの信頼できるベースとなります。UIではプロフェッショナル、インテリアでは居心地の良さ、ブランディングでは上質な印象を与えます。
以下はHEXコード付きのスレートブルーの20個のカラーバリエーションと、デザインをバランスよく意図的に見せるためのニュートラルカラーやアクセントカラーの組み合わせ方のヒントです。
この記事の内容
スレートブルーの配色がなぜ優れているのか
スレートブルーは、ブルーの信頼感や透明感に淡いバイオレットのニュアンスを加えた万能な色です。この柔らかさで過度にビジネスライクにならず、洗練された印象を保ちます。
また、暖色・寒色どちらとも好相性です。エアリーなニュートラルでミニマルに、またはコーラルやネオンピンク、ゴールドなどの生き生きとしたアクセントで際立たせることもできます。
デジタルデザインでは、明るいUIでも暗いUIでもしっかりとした階層を生み出し、原色ブルーほど強すぎないのが特徴です。印刷物やインテリアでは、鮮やかさよりも深みや落ち着きを感じさせます。
20種類以上のスレートブルーカラーパレットアイデア（HEXコード付き）
1）海岸の夕暮れ
HEX： #6A5ACD #1F2A44 #9BB7D4 #F2E9E4 #D9A5B3
雰囲気： 穏やか、海辺、夕暮れ時
おすすめ用途： 旅行ブランドのランディングページ
穏やかでほのかに霞んだこのスレートブルーのカラーパレットは、青い時間帯のボードウォークのような雰囲気です。旅行サイトやブティックホテル、読みやすさが重要なヒーローセクションにおすすめ。ディープネイビーにウォームブラッシュのアクセントを合わせて、冷たさを和らげましょう。ヒント：コールトゥアクションや小さなアイコン部分だけにブラッシュを使うと、主役のブルーが穏やかに保てます。
media.ioで生成した海岸の夕暮れの画像例
Media.ioは、ブラウザ上で動画、画像、音声の作成・編集ができるオンラインAIスタジオです。
2）インクラベンダー
HEX： #6A5ACD #2B2D42 #CDB4DB #EDF2F4 #8D99AE
雰囲気： 雰囲気：エディトリアル、シック、洗練
おすすめ用途： 雑誌表紙レイアウト
洗練されエディトリアルなスレートブルーのトーンは、ラベンダーのハイライトが効いたインクとテクスチャーペーパーの組み合わせのよう。メリハリを出しつつ柔らかさもあり、表紙や特集ページ、ルックブックに最適です。最も暗い色は見出しに、淡いグレーはたっぷりの余白部分に配置して。ヒント：セクションを整え階層を高める細いラベンダーラインを加えるのもおすすめ。
media.ioで生成したインクラベンダーの画像例
3）テックネビュラ
HEX： #6A5ACD #0B1320 #2D4F7C #32A6A8 #E7EEF7
雰囲気： 雰囲気：未来的、クリーン、集中
おすすめ用途： SaaSダッシュボードUI
フォーカスされ未来感のあるこのパレットは、夜空のようなダッシュボードを思わせます。SaaSの分析画面やフィンテック、開発者ツールに最適。ナビゲーションに近いブラック、メインアクションにスレートブルー、ステータスハイライトにティールを使い分けましょう。ヒント：データビジュアライゼーションのアクセントカラーは2色までに絞るとグラフが見やすくなります。
media.ioで生成したテックネビュラの画像例
4）ヴィンテージステーショナリー
HEX： #6A5ACD #7A6C5D #D8C3A5 #F6F1E9 #B56576
雰囲気： 雰囲気：ノスタルジック、暖かい、ロマンチック
おすすめ用途： 結婚式招待状一式
ノスタルジックかつロマンチックな色合いは、古い紙やワックスシール、ほのかな夕暮れのインクを思わせます。招待状やメニュー、セーブ・ザ・デートなど、洗練されたヴィンテージ感を求める際に最適です。ウォーム系のニュートラルとモーヴのアクセントを重要な部分に、トープでバランスを。ヒント：ソフトなクリーム色を意図的に見せるため、少しテクスチャーのある背景を選ぶと効果的です。
media.ioで生成したヴィンテージステーショナリーの画像例
5）雨上がりの森
HEX： #6A5ACD #2E4A3F #7FB069 #E3F2E1 #354F52
雰囲気： 雰囲気：新鮮、大地感、リフレッシュ
おすすめ用途： エコパッケージデザイン
新鮮でリフレッシュ感のあるこのスレートブルーパレットは、雨上がりの葉や冷たい空気をイメージさせます。エコブランドや詰め替えパッケージ、ナチュラル製品のラベルにもぴったり。ブランドロゴにスレートブルー、材料要素や目立たせたい部分にグリーンを活用しましょう。ヒント：再生紙に印刷する際は線画を少し太くしておくと濃いグリーン部分が潰れにくいです。
media.ioで生成した雨上がりの森の画像例
6）夜のネオン
HEX： #6A5ACD #111827 #FF2E88 #22C55E #F8FAFC
雰囲気： 雰囲気：大胆、ナイトライフ、ハイコントラスト
おすすめ用途： 音楽フェスのポスター
大胆でエレクトリック、これは深夜のネオンサインのような雰囲気です。強いコントラストはポスターやイベントプロモ、目立たせたい告知で威力を発揮します。背景をスレートブルーとチャコールで、ピンクとグリーンをエネルギーポイントに。ヒント： アクセントカラーは文字や図形で短く使うことで、遠目でも読みやすさをキープしましょう。
media.ioで生成した夜のネオンの画像例
7）ミニマルロフト
HEX： #6A5ACD #F5F5F5 #D1D5DB #374151 #E5E7EB
雰囲気： 雰囲気：モダン、エアリー、抑制された美しさ
おすすめ用途： インテリアムードボード
エアリーかつ控えめなニュートラルは、青い影が射す日差しのコンクリートのような印象です。インテリアムードボード、ミニマルブランド、クリーンなポートフォリオにも最適。タイトルやクッション、小さなドアなどポイント使いしましょう。ヒント：スレートブルー部分を全体の15％以内にすれば、全体が穏やかな印象に。
media.ioで生成したミニマルロフトの画像例
8）砂漠のトワイライト
HEX： #6A5ACD #C97C5D #F2D0A7 #5B5F97 #2F2D2E
雰囲気： 雰囲気：日差しを浴びた、ロマンチック、映画的
おすすめ用途： ブティックホテルのブランディング
サンストーンの壁が夕暮れ後に冷えていく情景を思い起こさせる映画的なパレット。スレートブルーはブティックホテルのブランディングやガイド、洗練されたパッケージデザインにもぴったり。テラコッタと合わせて暖色×寒色のバランスを楽しみ、文字色はブラックに近い色を使いましょう。ヒント：ウェブでは、セクション区切りにサンド〜ラベンダーのグラデーションを使うと柔らかくなります。
media.ioで生成した砂漠のトワイライトの画像例
9）ウィンターベリー
HEX： #6A5ACD #4C1D95 #BE123C #FDF2F8 #111827
雰囲気： 雰囲気：居心地よい、フェスティブ、ドラマティック
おすすめ用途： ホリデー用SNSグラフィック
ベリーシロップが新雪に落ちたようなぬくもりあるフェスティブなカラーパレット。ホリデー用のプロモや季節のメールヘッダー、ソーシャル用のタイルにも最適。淡いピンクを背景に、ベリーレッドでメインメッセージを。ヒント：テキスト色は純粋なブラックではなく、ブラックに近い濃色を使うと冬らしい深みが出ます。
media.io を使用して生成されたウィンターベリーの画像例
10）セラミックカーム
HEX： #6A5ACD #A3B18A #E9EDC9 #FAFAF0 #3A5A40
雰囲気：スパ風、やさしい、均整の取れた
おすすめ用途：ウェルネスアプリのオンボーディング
やさしくスパのようなスレートブルーの配色は、艶やかなセラミックと静かなハーブティーを思わせます。穏やかなグリーンとソフトなクリームがオンボーディング画面を歓迎的で落ち着いた雰囲気にします。プライマリーボタンにはスレートブルーを、深めのグリーンは確認や進捗の際に使いましょう。ヒント：行間を広げ、アイコンを細く保つことで軽やかで呼吸しやすいトーンを演出できます。
media.io を使用して生成されたセラミックカームの画像例
11）モノクロームスレート
HEX： #6A5ACD #5849B8 #7B6DE0 #B7B1F2 #1E1B4B
雰囲気：トーナル、洗練、自信がある
おすすめ用途：プレゼンテンプレート
トーナルで洗練されたスレートブルーの色味は、同系色の生地を重ねた印象です。統一感のあるスライドデッキを素早く作る際に最適で、すべてのスライドが一貫性をもたらします。タイトルには一番濃いインディゴ、図形には中間色、広い背景には淡いラベンダーを使いましょう。ヒント：グラフやチャート用にアクセントスタイルを1つ作り、全体で繰り返してプレミアム感を演出しましょう。
media.io を使用して生成されたモノクロームスレートの画像例
12）レトロアーケード
HEX： #6A5ACD #F97316 #FDE047 #0EA5E9 #0F172A
雰囲気：遊び心、エネルギッシュ、レトロ
おすすめ用途：Twitch 配信用オーバーレイ
遊び心とエネルギーにあふれたこのスレートブルーパレットは、アーケード筐体や輝くスクリーンライトをイメージさせます。オレンジとイエローが即座にワクワク感をもたらし、スレートブルーが全体の印象を引き締めます。フレームやパネルにはダークネイビーを使用し、暖色アクセントはアラートやバッジに使いましょう。ヒント：グラデーションは控えめにし、ソリッドな色ブロックを活かすとクリアなレトロ感が出ます。
media.io を使用して生成されたレトロアーケードの画像例
13）ガーデンパーティ
HEX： #6A5ACD #FFB4A2 #FFD6A5 #B7E4C7 #FFF7ED
雰囲気：陽気、軽やか、春らしい
おすすめ用途：春のフライヤーデザイン
陽気で軽やかなこの組み合わせは、晴れたテラスでの新鮮な花びらやレモネードを彷彿させます。春のフライヤー、ポップアップ市場、地域イベントなど、親しみやすさを求めるシーンに最適です。見出しにはスレートブルー、大きな図形や背景はパステル色を使いましょう。ヒント：淡い色がデジタルすぎないように微細なグレインを加えます。
media.io を使用して生成されたガーデンパーティの画像例
14）ディープシースタジオ
HEX： #6A5ACD #003554 #006494 #E8F1F2 #1B263B
雰囲気：シャープ、マリン、スタジオのようなクリーン
おすすめ用途：ヘッドホンのプロダクト広告
シャープでマリンなこのスレートブルーは、深海のような深みと、表面近くの明るい反射を想起させます。テック製品のクリーンでプレミアムな広告に最適です。主役グローにはスレートブルー、影やコピーには濃いネイビーを使用。ヒント：背景は限りなく白に近いブルーとし、製品のシルエットがはっきり映えるように（きついコントラストは避けて）。
media.io を使用して生成されたディープシースタジオの画像例
15）アルチザンコーヒー
HEX： #6A5ACD #4B3621 #C9A66B #F3E9DC #2C2A4A
雰囲気：落ち着き、居心地の良さ、ブティック感
おすすめ用途：カフェメニューデザイン
落ち着きと心地よさがあり、エスプレッソブラウンに涼やかなトワイライトカラーを合わせました。カフェメニューやロイヤリティカード、小ロットのパッケージングなど、温かみと構造感が必要な場面に理想的です。ゴールドとスレートブルーの組み合わせはセクション見出しや価格の強調に適します。ヒント：背景にはクリーム色をメインにして、テキストの読みやすさや親しみやすを保ちましょう。
media.io を使用して生成されたアルチザンコーヒーの画像例
16）オーキッドスモーク
HEX： #6A5ACD #8E7DBE #C3B1E1 #F1F0FF #3D3B66
雰囲気：ドリーミー、やわらかい、ロマンティック
おすすめ用途：ビューティーブランドのパッケージ
夢のようにソフトなこれらのパープルは、朝靄に包まれたオーキッドの花びらのようです。甘すぎないエレガントさが求められるスキンケアやフレグランス、ビューティー系パッケージに向いています。ボックスのベースには淡いライラック、ディテールにはスモーキーなバイオレットを使いコントラストを持たせます。ヒント：スレートブルーの要素に控えめなスポットグロスを加えれば、パッケージに高級感が生まれます。
media.io を使用して生成されたオーキッドスモークの画像例
17）グラファイトゴールド
HEX： #6A5ACD #1F2937 #D4AF37 #F9FAFB #6B7280
雰囲気：プレミアム、自信のある、モダン
おすすめ用途：フィンテックロゴとウェブサイト
プレミアムで自信を感じさせるこのスレートブルーは、ダークグラファイトを背景にブラッシュドメタルのような雰囲気です。フィンテックブランドや投資系ツール、信頼感と少しの高級感が求められるコーポレートサイトにぴったりです。ゴールドは大事な数字やバッジの小さなアクセントとして使い、スレートブルーはリンクやプライマリアクションに活用します。ヒント：早い段階でアクセシビリティテストを行い、ほとんどのコンテンツエリアにほぼ白背景を用いてコントラストを上げましょう。
media.io を使用して生成されたグラファイトゴールドの画像例
18）サンライズグラデーション
HEX： #6A5ACD #FF7A59 #FFD166 #06D6A0 #F8F9FA
雰囲気：前向き、明るい、現代的
おすすめ用途：キーノートスライドデッキ
前向きで明るく、朝焼けが澄んだ空に広がるイメージです。スレートブルーの組み合わせはキーノート、ワークショップ、クリエイティブな提案で、活気はほしいが混乱は避けたい場合に最適。見出しはスレートブルーで、コーラル・イエロー・ミントはセクションマーカーやグラフに使い分けます。ヒント：1スライドにつき1つだけ暖色アクセントを使うと、ストーリーが分かりやすくなります。
media.io を使用して生成されたサンライズグラデーションの画像例
19）クラスルームカーム
HEX： #6A5ACD #FDE68A #93C5FD #FFFFFF #374151
雰囲気：親しみやすい、わかりやすい、整理整頓された
おすすめ用途：教育用ワークシートレイアウト
親しみやすく整理整頓されたスレートブルートーンは、明るい教室で整然としたノートを思わせます。全年齢にわかりやすさが必要なワークシート、ポスター、配布資料に最適です。見出しやセクション区切りにはスレートブルー、強調や呼びかけにはイエローを活用。ヒント：シンプルな形と一貫した余白で、ページ全体を見やすくしましょう。
media.io を使用して生成されたクラスルームカームの画像例
20）コズミックフローラル
HEX： #6A5ACD #2A1E5C #E07A5F #F2CC8F #81B29A
雰囲気：アーティスティック、ファンタジック、絵本のよう
おすすめ用途：水彩ボタニカルイラスト
アーティスティックで絵本のようなこの組み合わせは、深い夜空の下で描かれた野の花のようです。植物画やノートカバー、季節のコレクションなど、手作り感を求めるシーンによく合います。影にはスレートブルーとインディゴ、花びらやハイライトにはコーラルとサンドを使いましょう。ヒント：ウォーム系アクセントがクールなベースに映えるよう、エッジは柔らかく重ね塗りします。
media.io を使用して生成されたコズミックフローラルの画像例
スレートブルーに合う色は？
スレートブルーは、オフホワイトやライトグレー、チャコールのようなシャープなニュートラルとの相性が自然で、モダンで読みやすい印象に仕上がります。これらの組み合わせは、ウェブサイトやダッシュボード、ブランドシステムなど、クリーンな階層が必要なときに特に効果的です。
より暖かいコントラストが欲しい場合は、テラコッタ・ブラッシュ・サンド・ゴールドなどを合わせてみましょう。ブルー基調のレイアウトの「冷たさ」を和らげ、親しみやすい印象になります。もっと大胆なエネルギーが必要な場合は、ネオンピンクや明るいグリーンが短いアクセントとして機能します。
ラベンダーやインディゴのような類似色は、統一感あるプレミアムな印象を生みます。派手なコントラストよりも一貫性が重視されるプレゼンや製品ブランディングでは、安全な選択肢です。
実際のデザインでスレートブルーカラーパレットを使う方法
まず、スレートブルーをプライマリ（ボタン・主要見出し用）またはサポートカラー（背景パネルやイラストの影用）どちらにするか決めましょう。その後、デザインに温かみ（クレイ・ブラッシュ・ゴールドを追加）か、明快さ（白やグレー、黒に近い色を追加）が要るか選びます。
UIでは、最も濃い色をナビゲーションや本文テキストに使い、スレートブルーをインタラクティブな要素用とすることでユーザーがシステムをすぐに学べるようにします。ブランド用途なら、ライト・ダークどちらのアプリケーション（ロゴ、SNSテンプレ、ウェブヒーロー）でも配色をテストし、一貫性を保ちましょう。
インテリアの場合は、温かみある木材やリネンホワイト、柔らかいグレーなどのテクスチャーニュートラルと合わせ、落ち着いた空間を演出します。
AIでスレートブルーパレットのビジュアルを作成する
こうしたスレートブルー配色を実際のレイアウトで確認したい場合は、クイックモックアップの生成が意思決定を速めます。各パレットのプロンプトを参考に、ヒーローセクションやポスター、パッケージ、オンボーディング画面などを作成してみてください。
Media.io のテキスト→画像生成なら、ミニマル・エディトリアル・レトロ・シネマチック等、スタイルを変えつつ HEX パレットを保てます。本格的なデザイン制作前に選択肢を比較できるのも魅力です。
スレートブルーカラーパレットよくある質問
-
スレートブルーのHEXコードは？
よく使われるスレートブルーのHEX値は#6A5ACDです。控えめで柔らかなバイオレットのアンダートーンを持つブルーなので、落ち着きがありながら独自性も感じさせます。 -
スレートブルーは暖色？寒色？
スレートブルーは一般的に寒色ですが、紫のアンダートーンがあるため、純粋なブルーほど冷たく感じません。クリームやサンドなどの暖かみあるニュートラルと組み合わせると、より親しみやすい印象になります。 -
スレートブルーに最適な組み合わせ色は？
おすすめの組み合わせはテラコッタ、ブラッシュ、ゴールド、クリーム、チャコールより遊び心のあるコントラストを出すには、ダークな背景にネオンピンクや鮮やかなグリーンのアクセントを少し加えると良いです。 -
ウェブサイトのUIやボタンにスレートブルーは使えますか？
はい。スレートブルーは主要なボタンやリンクに適しており、目立ちながらも派手すぎません。アクセシビリティのためには背景とのコントラストを確認し、本文テキストにはほぼ黒を使うことも検討してください。 -
スレートブルーのパレットが冷たく感じすぎないようにするには？
温かみのあるアクセント（ブラッシュやテラコッタ、ゴールドなど）を1つ加え、純白ではなくクリーミーなオフホワイトを使いましょう。また、テクスチャ（グレイン、紙、柔らかな影など）を取り入れると、パレットがより温かみのある印象になります。 -
モノクロームのスレートブルー配色を作る一番簡単な方法は？
ダークアンカー（タイトル用）、ミッドスレートブルー（主要UI用）、ライトラベンダー（背景用）を1色ずつ選びます。チャートやハイライトには一貫したアクセントスタイルを繰り返し使用し、全体の統一感を保ちましょう。 -
デザイン前にスレートブルーのカラーパレットをプレビューするには？
AIプロンプトを使ってランディングページやポスター、パッケージのモックアップなどのビジュアルを素早く生成しましょう。これにより、ブランドやUIキットを確定する前に、スレートブルーが実際の構成でどう見えるかをテストできます。
