クールグレーは、シャープさと心地よさの間に位置しています：UIに十分モダン、印刷物にもニュートラル、そしてインテリアにも穏やかな印象を与えます。純粋な黒と白の強さを避けて明確さを求めるときに最適な選択肢です。
下記はHEXコード付きの厳選された20のクールグレーカラーパレットアイデアと、アクセントの組み合わせやデザイン実務での活用のヒントです。
この記事の内容
なぜクールグレーの配色がこれほど優れているのか
クールグレーの配色は、注目を集めずに構造をもたらすため、信頼できます。タイポグラフィやUI要素、レイアウトにきれいな階層を作りつつ、全体のトーンは控えめです。
暖色系のグレーがベージュ寄りになることがあるのに対し、クールグレーはシャープでコンテンポラリー。これはテック系ブランディングやデータ中心のダッシュボード、ミニマルな編集デザインに特に強みです。
また、柔軟性もあり：純粋にニュートラルなままで高級感を出せるし、単一アクセント（ティール、ブルー、カッパー、ブラッシュなど）を加えれば全体を再設計せずに雰囲気をコントロールできます。
20以上のクールグレーカラーパレットアイデア（HEXコード付）
1）アークティックコンクリート
HEX： #f2f4f7 #d7dde4 #aab3bf #6b7480 #2f343b
雰囲気： クリーン、穏やか、プロフェッショナル
おすすめ用途： SaaSダッシュボードUI
朝の光がコンクリートに差すような清潔感と落ち着き。これらのクールグレーは静かで自信を感じさせます。スクリーン上でシャープに映り、チャートやナビ、状態の深みも十分。仕上がりを磨くなら、アクセントとしてティールやアイスブルーを1色追加し、タイポグラフィは純黒ではなくチャコールで。使用のコツ：#2f343bは見出しや重要な数字に使い、全体を軽やかに。データ中心レイアウトにもクールグレー配色として適応性があります。
media.ioで生成されたアークティックコンクリートの画像例
Media.ioは、ブラウザ上で動画・画像・音声の作成・編集ができるオンラインAIスタジオです。
2）スチールミスト
HEX： #eef1f4 #cbd2da #9aa3ad #59616b #1f2328
雰囲気： シャープ、インダストリアル、モダン
おすすめ用途： テック系ブランドアイデンティティ
シャープでややインダストリアルなクールグレー配色セットは、研磨されたスチールや雨の歩道を想起させます。強いコントラストがありつつも、きつくは感じないのでロゴやワードマークが洗練された印象に。アクション用にエレクトリックなアクセントを1色追加するか、純ニュートラルで高級感を保つのも◎。使用のコツ：#1f2328がロゴの軸となり、#eef1f4は十分な余白として。
media.ioで生成されたスチールミストの画像例
3）グレイシャーオフィス
HEX： #f6f8fb #dfe6ee #b8c2ce #7a8796 #3b4450
雰囲気： 明るい、整理された、ミニマル
おすすめ用途： プレゼンテーションテンプレート
明るく整理されたこのクールグレーは、ガラスの氷河を彷彿させるシャープなエッジ。スライドを広く見せると同時に、見出しやチャート、コールアウトの階層も明確。強調にはミュート調のネイビーやスレートを合わせ、温かいオレンジ系はクールな基調とぶつかるので避ける。使用のコツ：#dfe6eeをセクションの区切りに使えば、重たい区切り線無しでもスライド全体がまとまります。
media.ioで生成されたグレイシャーオフィスの画像例
4）シルバーセージ
HEX： #f3f5f6 #d2d9d8 #a9b5b0 #6f817a #2e3a35
雰囲気： ナチュラル、癒し、洗練
おすすめ用途： スパ・ウェルネスパッケージ
ソフトでボタニカル、シルバーをまぶしたセージリーフを思わせるクールグレー。穏やかなグリーングレーのニュアンスでパッケージは落ち着き・清潔感・信頼感を演出。マットな白や控えめなエンボス加工と組み合わせるか、上品にしたい場合はミュート調のゴールド箔を加える。使用のコツ：成分表示は#2e3a35で読解性を高めつつ、安らぎある印象を損なわないように。
media.ioで生成されたシルバーセージの画像例
5）ハーバーモーニング
HEX： #f0f3f7 #c8d2e0 #8ea2bb #4e647a #26313b
雰囲気： コースタル、安定、フレッシュ
おすすめ用途： ウェブサイトヒーローセクション
涼しげで海辺風、ブルー×グレーの組み合わせは、港の霧が晴れるようなイメージ。中間色で親しみやすさもあり、プロフェッショナルにも見えます。クールグレー配色でフレンドリーさも求めるなら、ボタンは#8ea2bb、背景は#f0f3f7を使いましょう。使用のコツ：#c8d2e0から#f0f3f7までのグラデーションでヒーローエリアが平坦にならないように。
media.ioで生成されたハーバーモーニングの画像例
6）グラファイト＆クラウド
HEX： #f7f7f8 #d9dadd #b1b3b8 #575a61 #222327
雰囲気： ミニマル、大胆、時代を超えた
おすすめ用途： 編集マガジンのレイアウト
大胆かつタイムレス、グラファイトのスケッチを明るい紙に描いたようなニュートラル。雲白からほぼ黒まで幅広く、タイポグラフィやグリッドは意図的な印象が強まります。印刷物で高級感が欲しい時は見出しに#222327、余白は#d9dadd。使用のコツ：グレーはコート紙だと柔らかく見えるので普段より文字のウェイトを1段重く。
media.ioで生成されたグラファイト＆クラウドの画像例
7）フロスティデニム
HEX： #f4f7fb #d3dbe6 #9fb0c6 #5a6f8a #2b3644
雰囲気： カジュアル、シャープ、親しみやすい
おすすめ用途： アプリオンボーディング画面
シャープでカジュアル、冬空の下で洗いざらしのデニムのようなクールグレー配色。ソフトなブルーは、視覚的なプレッシャーなしにガイドしたいオンボーディングフローに最適。余白や丸みのあるカードを合わせ、ステップタイトルには#2b3644を。使用のコツ：イラストは#9fb0c6と#5a6f8aの2色で揃えれば画面間の一貫性を保てます。
media.ioで生成されたフロスティデニムの画像例
8）クワイエットラベンダー
HEX： #f5f3f8 #d9d3e3 #b2a9c5 #6f6588 #2e2a3a
雰囲気： ソフト、夢幻、エレガント
おすすめ用途： 結婚式招待状セット
ソフトで夢のようなクールグレー、ラベンダーの夕暮れやサテンリボンを感じさせる色合い。バイオレットグレーのミックスは甘すぎず、現代的なステーショナリーにぴったり。温かみのあるホワイトペーパーと繊細なセリフ体を合わせ、装飾は最小限で色を活かす。使用のコツ：大きな塊は#f5f3f8で印刷し、名前や重要なディテールは#2e2a3aにしてコントラストを鮮明に。
media.ioで生成されたクワイエットラベンダーの画像例
9）ポーラーピーチ
HEX： #f7f4f3 #dad6d6 #a9a3a6 #5c5960 #f2b7a6
雰囲気： 温冷バランス、優しい、現代的
おすすめ用途： SNS用引用テンプレート
優しく現代的、柔らかなニットにブラッシュハイライトを添えたようなクールグレー。ピーチのアクセントで冷た過ぎず、親しみやすさが映えるSNSコンテンツに最適。シンプルな幾何学形と組み合わせ、テキストは#5c5960で読解性を確保。使用のコツ：ピーチは強調ワードやアイコンだけに使って、フィード全体の一貫性を保ちましょう。
media.ioで生成されたポーラーピーチの画像例
10）スレートティール
HEX： #f1f4f5 #cfd7db #95a7ad #4b666f #1f3c42
雰囲気：自信、爽やか、構造的
おすすめ用途：B2Bランディングページ
自信があり爽やかなこれらのクールグレーカラーの組み合わせは、スレートストーンと深い水を思わせます。ティール寄りのグレーが個性を加えつつ、ビジネス向けの雰囲気を保ちます。シャープなラインアイコンと十分なスペースを組み合わせ、CTAや固定ヘッダーには #1f3c42 を使いましょう。使用のコツ：入力フォームは #cfd7db に設定し、濃いアウトラインなしで見やすくしましょう。
media.ioで生成されたスレートティールの画像例
11）ウィンターモス
HEX： #f3f6f4 #d7dfdb #aabbb1 #667a70 #2f3d37
雰囲気：ナチュラル、静か、落ち着き
おすすめ用途：エコプロダクトラベルデザイン
ナチュラルで静かなこのクールグレーカラーパレットは、霜の下の苔や陰影のある松を思わせます。自然らしさを演出したいサステナブルブランドに最適です。リサイクル紙の質感とミニマルなアイコンを組み合わせ、コピーは #2f3d37 で仕上げると安定感が出ます。使用のコツ：純粋な黒は避け、ストロークには #667a70 を使って柔らかさを保ちましょう。
media.ioで生成されたウィンターモスの画像例
12）ムーンリットカッパー
HEX： #f6f5f4 #d8d6d4 #a5a2a0 #555352 #b46a52
雰囲気：上品、居心地良い、洗練
おすすめ用途：プロダクト広告クリエイティブ
上品で居心地良いこれらのクールグレーの色調は、金属に月光が差し込む暖かい銅の輝きを思わせます。温かいアクセントが奥行きを加え、ベースは現代的です。ラグジュアリーな感覚を求めるなら、#b46a52 をバッジや価格タグなど小さなハイライトで使いましょう。使用のコツ：シャドウはニュートラルに（#555352）、銅色が画面によってオレンジに寄りすぎるのを防ぎます。
media.ioで生成されたムーンリットカッパーの画像例
13）ストーミーミニマル
HEX： #fafafa #e1e2e5 #b9bbc1 #70737c #2b2d33
雰囲気：シャープ、ミニマル、ハイコントラスト
おすすめ用途：ポートフォリオサイト
シャープでミニマルなこのクールグレー配色は、嵐雲が晴れてクリーンな昼間になる印象です。ギャラリーやケーススタディに十分なコントラストを持ちながら、純粋な白黒よりも柔らかく見えます。リンクにはシグネチャーのアクセントカラーを合わせ、イメージはリアル感を保ってニュートラルが主張し過ぎないようにしましょう。使用のコツ：セクションバンドは #e1e2e5 で設定し、重いボーダーなしでスクロールを誘導します。
media.ioで生成されたストーミーミニマルの画像例
14）インクアンドアイス
HEX： #f2f6f8 #cbd7dd #8da0aa #41545e #0f1a22
雰囲気：クリスプ、真面目、編集的
おすすめ用途：年次報告書デザイン
クリスプで真面目なこれらのクールグレーは、氷の紙にインクが映える様子やクリーンなインフォグラフィックを連想させます。深いネイビーブラックがチャートやテーブル、引用を含む大きな資料の構造を支えます。写真は控えめにし、細いルールには #8da0aa を使うとページが軽快に。使用のコツ：本文は #41545e で設定すると、純粋な黒より眩しさが抑えられます。
media.ioで生成されたインクアンドアイスの画像例
15）アーバンブラッシュ
HEX： #f6f2f4 #ded5da #b7a4ac #6e5b63 #c07b8f
雰囲気：シック、ソフト、都市的
おすすめ用途：ファッションルックブック
シックで都市的なこのクールグレーパレットは、ピンクがかったコンクリートやサテンの裏地のよう。ダスティローズのアクセントが個性を加えつつ、ニュートラルなベースを邪魔しません。ミニマルな写真ブロックと細いラインのタイポグラフィで、ランウェイ編集の雰囲気を演出。使用のコツ：#c07b8f は小見出しやセクションタブに限ると、レイアウトが洗練されたままになります。
media.ioで生成されたアーバンブラッシュの画像例
16）モダンモノクローム
HEX： #ffffff #e5e6e8 #b9bbbf #6c6f76 #101114
雰囲気：クラシック、自信、ウルトラクリーン
おすすめ用途：ロゴとアイコンシステム
クラシックでウルトラクリーンなクールグレー配色は、完璧な照明のギャラリー壁のような印象です。白から黒に向かう段階的な色が、アイコンやマーク、UIコンポーネントの標準化を容易にします。さまざまなサイズにスケールするパレットが必要な場合、#b9bbbf をセカンダリーストロークに、#101114 を重要な形状に使いましょう。使用のコツ：無効状態専用のグレー（#6c6f76）をひとつ定義すると、システムが予測可能に保てます。
media.ioで生成されたモダンモノクロームの画像例
17）ノルディックサンド
HEX： #f6f3ef #ded9d2 #b4aea6 #7a746d #3a3835
雰囲気：暖かいニュートラル、穏やか、暮らし感
おすすめ用途：インテリアデザインムードボード
穏やかで暮らし感のあるニュートラルは、淡い砂、石、柔らかなウールを思わせます。わずかな温かみが部屋を親しみやすくし、同時に現代的ですっきりした雰囲気も保ちます。ライトオークやブラッシュニッケル、質感のあるリネンと組み合わせて深みをプラス。使用のコツ：フレームや部品には#3a3835の深い色をひとつ強調すると、空間がベージュ方向へ偏りすぎません。
media.ioで生成されたノルディックサンドの画像例
18）ブルーアワースレート
HEX： #eef2f7 #c3cedd #7d91ab #3a4f67 #141b26
雰囲気：ムーディー、現代的、シネマティック
おすすめ用途：ミュージックポスターデザイン
ムーディーでシネマティックなクールグレーは、ブルーアワーが都市のスカイラインに訪れる印象です。深いネイビーの基調がポスターの読みやすさを強固にし、明るい色合いは滑らかなグラデーションを保ちます。大胆なサンセリフ書体とミニマルな形を合わせ、暖色系イエローは意図的な緊張を求める場合以外避けましょう。使用のコツ：背景は#141b26から#3a4f67へのグラデーションで奥行きを演出し、無駄な装飾を省きます。
media.ioで生成されたブルーアワースレートの画像例
19）ライラッククローム
HEX： #f4f2f7 #d6d2df #a59db6 #5d556f #26222f
雰囲気：未来的、ソフト、磨き上げられた
おすすめ用途：ビューティーアプリUI
未来的でありながらソフトなクールグレーは、ライラックがかったクロームやベルベットの影を思わせます。パープルグレー系は、ビューティーやライフスタイル向けUIに優雅な印象を与えます。ミニマルなプロダクト写真や微妙なグラデーションを合わせ、ラベルには#26222fを使いましょう。使用のコツ：ボタンは#5d556f、テキストは#f4f2f7で、コントラストを保ちつつ強過ぎない仕上がりに。
media.ioで生成されたライラッククロームの画像例
20）クリスプミントグレー
HEX： #f1f6f5 #d0dfdb #9fbdb4 #5b7f77 #2a3c38
雰囲気：フレッシュ、クリーン、静かにエネルギッシュ
おすすめ用途：コーヒーショップメニューデザイン
フレッシュで静かにエネルギッシュなこのクールグレー配色は、ミントの葉が冷たい石に置かれているような印象です。グリーングレー系の色がメニューをクリーンに保ちながら個性を加えます。現代的なプリントに合う配色なら、見出しには #2a3c38、カテゴリ強調に #9fbdb4 を使用すると良いです。使用のコツ：背景は #f1f6f5、アクセントブロックは制限し、アイテムが見やすいようにしましょう。
media.ioで生成されたクリスプミントグレーの画像例
クールグレーに合う色は？
クールグレーは、ティールやスレートブルー、アイシーシアン、ディープネイビーなどクールなアクセントと自然に組み合わせられます。これらは温度を一定に保ち、UIやレイアウトが「デフォルト」ではなく意図的に感じられます。
コントラストと温かみを加えるなら、銅やブラッシュ、ソフトピーチなど控えめなハイライトが効果的です。ボタンやバッジ、見出し、重要データの強調には少量使うだけで十分です。
全てをニュートラルに保ちたい場合は、複数のグレーを重ねて、純粋な黒ではなくネアブラックやブルーブラックで支えると、静かで現代的な印象を守りつつ読みやすさが向上します。
クールグレーのカラーパレットを実際のデザインに活用する方法
色見本ではなく役割から始めましょう：明るい背景、カードやセクション用の表面グレー、境界やセカンダリテキスト用のミドルグレー、見出しやUIコントロール用の深いアンカーグレーを一つずつ選ぶことで、スケーラブルなシステムができます。
プリントやブランドでは、クールグレーは広い余白と強いタイポグラフィ階層と相性が良いです。グレーは紙上で柔らかく見えるため、コントラストは意図的に設定しましょう—特に本文や細いラインの場合。
インテリアではリネンやウール、石などの質感と組み合わせて、空間が単調にならないようにします。アクセント素材はひとつ—ブラッシュメタルやダークウッド、静かな色味—を加えれば、パレットが過度に無機質になるのを防げます。
AIでクールグレーパレットのビジュアルを作成する
クールグレー配色をダッシュボードやポスター、パッケージモックアップ、ムードボードで試したい場合、AIビジュアルでコントラストや雰囲気の事前チェックが可能です。
Media.ioのテキストから画像ツールなら、プロンプトを貼り付けてアスペクト比を指定し、ブランドやUIフロー向けの一貫したサンプルが作れます—HEXカラーをそのままガイドとして使用できます。
複数のクールグレー配色をスピーディーに比較して、自分やターゲット、媒体に最適なものを選ぶことができます。
クールグレーカラーパレット FAQ
-
「クールグレー」とはどんな色ですか？
クールグレーは、ベージュやイエローではなく、微妙な青や緑、紫の下地があるグレーです。特にUIや現代的なブランドで、クリスプでモダン、クリーンな印象になります。 -
クールグレーと相性の良いアクセントカラーは？
ティールやスレートブルー、アイシーシアン、ディープネイビーはパレットを統一します。温かみを加えたい場合は銅やブラッシュ、ソフトピーチをCTAやタグ、重要要素のワンポイントとして使いましょう。 -
クールグレーデザインが冷たく感じる場合の対策は？
余白を増やし、純粋な黒ではなくソフトなグレーを使用し、銅やピーチなど温かいアクセントをひとつ加えましょう。テクスチャ（粒子、紙、細かな影）も効果的です。 -
ウェブサイトやアプリUIにクールグレーは向いていますか？
はい—SaaSやプロダクトUIでは文字やアイコンの階層が明確になり人気です。ただし、テキストやアイコン、インタラクティブ状態は十分なコントラストでアクセシビリティに配慮しましょう。 -
クールグレーと組み合わせるのに「純粋な黒」以外で最適なダークカラーは？
チャコールやブルーブラック、ディープスレート（例：#1f2328 または #0f1a22）がおすすめです。これらは全体の温度を一定に保ちつつ、純粋な黒よりも強さや眩しさを抑えます。 -
クールグレーは印刷に適していますか？
はい、その通りですが、グレーは用紙やインクの種類によって変化することがあります。印刷用には、思っているよりもコントラストを強く保ち、可能であれば必ずプルーフを取りましょう。特に、淡いグレーのテキストや細い線には注意が必要です。 -
デザインを始める前にクールグレーパレットをどうやってイメージできますか？
AI画像ツールを使って、すぐにモックアップ（UI、ポスター、パッケージ、ムードボードなど）を作成しましょう。ご自身のHEXカラーを指定するプロンプトを利用することで、いろいろなバリエーションを比較し、最適なクールグレーカラースキームをすばやく選ぶことができます。
