イエローグレー配色20選｜おすすめパレットとHEXコード一覧

黄色とグレーは、現代的な配色の中でも特に使いやすい組み合わせの一つです。黄色はエネルギーや親しみやすさをもたらし、グレーは構造、バランス、高級感のある「テック中立」な雰囲気を加えます。

以下に、HEXコード付きの20種類の黄色×グレーカラーパレットと、UIやブランディング、印刷、インテリアでの実用的な活用ポイントをまとめました。雰囲気を選んで、すぐに応用できます。

なぜ黄色とグレーの配色はこんなにうまくいくのか

黄色は自然と目を引くため、ハイライト（ボタン、バッジ、アイコン、小さなインテリアアクセント）に最適です。一方、グレーは落ち着いた土台を提供し、コンテンツの邪魔をしません。

2色を組み合わせることで明快な階層が作れます：グレーは読みやすさやレイアウト構造を担当し、黄色は目線を重要なポイントへ導きます。UIデザイン、ポスター、ダッシュボードなど、明瞭さが重要な場面で特に役立ちます。

黄色×グレーパレットは、ミニマルから大胆なデザインまで幅広く対応できます。ライトグレーと淡い黄色で爽やかに、チャコールとほぼ黒、鮮やかな黄色で最大限のインパクトに仕上げることも可能です。

20以上の黄色×グレーカラーパレットアイデア（HEXコード付き）

1）日差しコンクリート

HEX： #F6C945 #D9D9D6 #8A8D8F #2E2F33 #FFF6E0

雰囲気： 明るい・モダン・安定感

おすすめ用途： SaaSダッシュボードUI

朝の光が都市の歩道で跳ね返るように明るく爽やかな配色で、自信がありつつも主張しすぎません。オフホワイトはメインキャンバスに、黄色は重要アクションやハイライトに。ミディアムグレーは表やチャートの可読性を高め、ほぼ黒は階層をシャープにします。コツ：黄色は小さなUI要素に使ってアクセシビリティも確保しましょう。

media.ioで生成された日差しコンクリートの画像例

Media.io

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

今すぐ無料で試す

2）マスタードスレート

HEX： #C9A227 #6E7074 #2C2D30 #E7E2D3 #F3EFE6

雰囲気： 濃厚・居心地よい・上品

おすすめ用途： ブティック系コーヒーショップのブランディング

温かみのあるややレトロな印象で、トーストグレイン、ダークロースト、スレートの黒板を思わせます。この黄色とグレーの組み合わせは、クラフト感と高級感を両立したいロゴやラベル、メニューヘッダーに最適です。テクスチャ付き用紙やシンプルなセリフ体と合わせてアルチザンな雰囲気を演出しましょう。コツ：マスタードはアクセントに、スレートは読みやすさを重視して使い分けて。

media.ioで生成されたマスタードスレートの画像例

3）レモンフォグ

HEX： #FFE36E #F2F2F0 #B9BCC1 #5A5D63 #1F2024

雰囲気： 柔らかい・清新・穏やか

おすすめ用途： モバイルアプリのオンボーディング画面

優しく前向きな印象で、霧の朝のレモンティーのような雰囲気です。淡いニュートラルは画面を明るく保ち、濃いグレーはテキストのコントラストを確保。黄色は進捗インジケーターや親しみやすいアイコン、マイクロアニメーションに。コツ：角の丸いパーツや余裕のある空間で全体を柔らかくまとめましょう。

media.ioで生成されたレモンフォグの画像例

4）タクシーアスファルト

HEX： #FFD100 #A8AAAD #3B3D42 #121316 #F5F5F5

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

おすすめ用途： テック系ミートアップポスター

インパクト大でストリート感があり、ネオンの反射や夜の都市の移動を思わせます。強いコントラストを活かし、黒でタイポ、鮮やかな黄色で見出し、グレーで副情報を配置するのがベスト。レイアウトはシンプルにして、配色が主役になるように。コツ：明るい背景にはグレーのブロックを小テキストの下に敷いて読みやすくしましょう。

media.ioで生成されたタクシーアスファルトの画像例

5）ゴールデンデューン

HEX： #E7B93C #CFC8B8 #9A9C9F #4A4D52 #FFF1D1

雰囲気： あたたかい・リラックス・自然体

おすすめ用途： 居心地のよい寝室インテリアパレットガイド

太陽に温められたアースカラーで、砂丘、リネン、午後の柔らかな光を思い起こさせます。ウォールやベッドリネンはクリーミーなオフホワイトで、グレーはテキスタイルや家具でバランスよく。ゴールドはブランケット、ランプシェード、アートのアクセントに最適で、控えめに温かさをプラスします。コツ：マット仕上げを選び、ニュートラルな色合いで落ち着きを。

media.ioで生成されたゴールデンデューンの画像例

6）ソフトマイカ

HEX： #F2D06B #E5E6E8 #B3B6BB #70737A #2B2D31

雰囲気： 清潔・優しい・上質

おすすめ用途： スキンケアパッケージデザイン

なめらかで控えめ、ミネラルのきらめきやスパタオルのような雰囲気。ライトグレーでクリニカルな清潔感、黄色はハイライトとシーリングにさりげない輝きを。サンセリフや余白多めのモダンなレイアウトもおすすめ。コツ：最も濃い色は成分表示や使用方法など小さな文字用に留めましょう。

media.ioで生成されたソフトマイカの画像例

7）インダストリアルハニー

HEX： #F5B800 #D0D2D4 #8E9196 #3A3C40 #0F1012

雰囲気： スマート・構造的・自信に満ちた

おすすめ用途： ECサイトホームページUI

シャープで理知的、磨かれた金属に蜂蜜色の光を感じさせます。信頼感とスピード感が必要なECサイトに最適：ニュートラルグレーは商品グリッド、ほぼ黒でテキスト、黄色でアクションボタンに。クリーンな商品写真と一貫性あるスペース設計で見やすく。コツ：ホバーステートには薄い黄色のアクセントを試し、統一感を。

media.ioで生成されたインダストリアルハニーの画像例

8）レトロスクールバス

HEX： #FFCC00 #7A7D81 #4B4E53 #1C1D20 #FFF8D8

雰囲気： ポップ・大胆・懐かしい

おすすめ用途： スポーツチームのフライヤー

エネルギッシュでどこか懐かしさのある配色。ジムの床やスクールバス、クラシックユニフォームを思い出させます。鮮やかな黄色はチーム名や日付に、チャコール系はレイアウトの安定感に。ブロック体やシンプルなアイコンと合わせてレトロな雰囲気を強調。コツ：淡いクリーム色の余白を上手く使い、重くなりすぎないデザインに。

media.ioで生成されたレトロスクールバスの画像例

9）スプリングヘイズ

HEX： #F9D77A #E9E7E1 #BFC2C7 #6B6E75 #2E3035

雰囲気： ロマンチック・爽やか・やさしい

おすすめ用途： 植物モチーフの結婚式招待状セット

軽やかで夢のような印象。春の花と霞んだ空を想起させます。暖かい黄色はモノグラムや境界線の繊細なアクセントに。柔らかなニュートラルは背景用。水彩フラワーや優雅なスクリプト体を組み合わせるとタイムレスに。コツ：グレーの文字は思ったより濃く印刷すると、テクスチャ入り用紙でも読みやすくなります。

media.ioで生成された春霞の画像例

10) シトリン グラファイト

HEX： #F4C83A #C9CBD0 #9EA1A8 #3C3E45 #15161A

雰囲気： シャープ、エディトリアル、コンテンポラリー

おすすめ用途： 雑誌の特集レイアウト

洗練されモダンで、グロッシーな印刷物やグラファイト鉛筆、シトリンのハイライトのような印象です。見出しや引用にはブラックとダークグレーを使い、黄色でセクションのマーカーやデータポイントに目線を誘導しましょう。強い写真とグリッドレイアウトで高級感を保ちます。ヒント：黄色はページの5〜10％に抑え、エディトリアルな雰囲気を壊さないようにしましょう。

media.ioで生成されたシトリン グラファイトの画像例

11) ハーベスト スチール

HEX： #DFAF2B #D8D4CA #A2A4A7 #5D6066 #2A2B2F

雰囲気： 安定、暖かい、プロフェッショナル

おすすめ用途： プレゼンテーションスライドデッキテンプレート

バランスがよくビジネス向けで、ハーベストゴールドとブラッシュドスチールの組み合わせのよう。暖色の黄色はセクション区切りや重要な数値に、グレーはチャートやキャプション、脚注に使います。シンプルなアイコンと一貫した余白で自信と信頼感を！ヒント：スライドの背景は明るく、タイトルにのみ一番暗いグレーを使いましょう。

media.ioで生成されたハーベスト スチールの画像例

12) アーバン マリーゴールド

HEX： #FFC93C #BFC1C4 #7C7F86 #34363B #FAFAF7

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

おすすめ用途： レストランメニューデザイン

マリーゴールドがコンクリートに映えるように、親しみやすくて現代的、見やすい配色です。メニューでは、料理名にニアブラック、説明文にミッドグレー、黄色はおすすめや辛口のマーカーなどに。クリーンな区切りと余白たっぷりで、上質なカジュアル感が生まれます。ヒント：本文の黄色文字は避け、ラベルやアイコンだけに使うと明快。

media.ioで生成されたアーバン マリーゴールドの画像例

13) バターストーン

HEX： #F7DA7C #F4F1E8 #C6C7C9 #8A8C90 #3E4045

雰囲気： ソフト、安心感、家族向き

おすすめ用途： 子供部屋インテリアムードボード

安心感があり落ち着いた雰囲気。バタークッキーや柔らかいブランケット、静かな昼寝をイメージさせます。壁や大きな家具には明るいクリーム色、グレーはラグや収納、カーテンで穏やかな印象に。黄色はアートやぬいぐるみなど小物で取り入れるのがおすすめ。ヒント：暖色系の電球を選ぶと、全体が冷たくならず暖かい印象になります。

media.ioで生成されたバターストーンの画像例

14) ブラス ペブル

HEX： #D8B34B #D4D5D7 #9A9DA3 #585B61 #1B1C20

雰囲気： スリーク、テクノロジー感、高級

おすすめ用途： スマートウォッチ製品広告

スリークで控えめ、磨かれたブラスと滑らかな小石のような質感。背景にグレーを主に使って高級感を演出し、暖かな黄色をコールアウトや特長バッジなどブランドアクセントとして活用します。シャープなライティングとミニマルなコピーでモダンな印象に。ヒント：印刷で黄色を使いすぎず、アクセントとしてポイントで使いましょう。

media.ioで生成されたブラス ペブルの画像例

15) ネオンセーフティ

HEX： #FFEA00 #B7B9BC #6C6F75 #2D2F34 #0B0C0E

雰囲気： アラート、高コントラスト、実用的

おすすめ用途： 建設用安全サインセット

直接的で目立ちやすい配色は、高視認ベストや新たに塗られた警告ラインを想起させます。コントラスト重視ならこの配色が最適：アイコンは黒、警告は黄色、補足情報にはニュートラルグレーを。ゴシック体やシンプルな形状で遠目からもメッセージが明確に。ヒント：サインの可読性を保つため、余白を広く確保しましょう。

media.ioで生成されたネオンセーフティの画像例

16) コージーウール

HEX： #E6C15A #E2E0DA #B0B1B4 #6A6C71 #2F3034

雰囲気： 暖かい、落ち着き、触感的

おすすめ用途： ニットウェアのルックブックカバー

触感的で心地よい、ウールのセーターと暖かいカフェの灯りのような雰囲気です。ソフトなニュートラルカラーで写真を引き立て、黄色はタイトルや細いグラフィック線など季節感のアクセントに。エディトリアルなタイポグラフィと広い余白でプレミアムなルックブックに。ヒント：カバーの文字はコントラストを高くして、サムネイルでも読みやすく。

media.ioで生成されたコージーウールの画像例

17) モダン バウハウス

HEX： #F3C300 #E6E6E6 #9C9FA6 #2E3036 #111214

雰囲気： グラフィック、クリーン、モダニスト

おすすめ用途： 幾何学アートプリント

グラフィックで統制が取れ、モダニストポスターや整った幾何学形状を思わせます。黄色は太い図形に、構図全体はチャコールとバランスのとれたグレーでまとめましょう。シンプルな円や直線、アシンメトリーなレイアウトでギャラリー風に。ヒント：額装時に意図が伝わるよう、十分に余白を取ります。

media.ioで生成されたモダン バウハウスの画像例

18) デザートロード

HEX： #EAC24A #D6D2C7 #9B9DA1 #4E5056 #1E1F23

雰囲気： シネマティック、陽に焼かれた、冒険的

おすすめ用途： 旅行ブログのヒーローバナー

シネマティックで日差しに焼かれた長い道を想起させます。砂のようなオフホワイトと薄いグレーで背景を作り、黄色でボタンやカテゴリタグにアクセントを。ワイドな風景写真とミニマルなテキストで現代のトラベル感を。ヒント：写真に薄いグレーのオーバーレイを施し、白い見出し文字を読みやすくしましょう。

media.ioで生成されたデザートロードの画像例

19) サフラン スモーク

HEX： #F1B12C #D3D4D6 #A1A3A8 #61646B #202227

雰囲気： ムーディ、ドラマティック、スタイリッシュ

おすすめ用途： ノワールスリラー映画ポスター

ムーディでスタイリッシュ、煙る光や街灯、暗闇に光るサフランイエローを思わせます。ベースと文字はニアブラック、黄色はタイトルやグラフィックの焦点に。粒子感のあるテクスチャと強いコントラストの写真で映画的な仕上がりに。ヒント：補足テキストはライトグレーで目立ちすぎず可読性を保って。

media.ioで生成されたサフラン スモークの画像例

20) 黄ばみ新聞紙

HEX： #F0D46A #E8E3D6 #B5B7BB #6E7177 #26282D

雰囲気： 思慮深い、ビンテージ、信頼感

おすすめ用途： サステナビリティレポート用インフォグラフィック

考え抜かれ、どこか懐かしさを感じる配色は、アーカイブされた紙やインクのようです。ページのベースは淡いベージュ、構成やグラフにはクールグレー。黄色は重要指標やコールアウト、プログレスバーのアクセントに最適で、企業色が強すぎません。ヒント：データ色は2色までに絞り、グレーで全体を支えましょう。

media.ioで生成された黄ばみ新聞紙の画像例

黄色とグレーに合う他の色は？

イエロー×グレーは、白やニアブラックのようなシャキッとしたニュートラルと組み合わせるとコントラストが強調され、レイアウトの可読性が高まります。UIでは、黄色をCTA専用にし、グレーを面・区切り・補助テキストに使うことで、役割分担がはっきりします。

あたたかみを出したい場合はベージュ・クリーム・タンを追加してインテリアにも馴染む柔らかい雰囲気に。逆にクールでモダンな方向ならブルーグレーやスチール系も合わせ、クリーンで先進的な印象に。

黄色以外で目立つアクセントがほしい時は、ティールやコバルト、ブラッシュなどを少量—アイコンやタグ、グラフのハイライトに散らすと、黄色が主役のまま視認性をキープできます。

黄色×グレーパレットを実際のデザインで使う方法

「色」だけでなく「役割」から配色を考えましょう。背景は明るいニュートラル、面には中間グレー、文字はダークグレーまたはニアブラック、黄色は“アクション”色。これだけでも、ページやパーツに一貫性が生まれます。

アクセシビリティのため長文の本文には黄色を使わず、ボタンやラベルのコントラストも十分に確保してください。一般的な方法は、明るい面＋濃色文字、アイコンやハイライト・塗りつぶしボタンに黄色を使い、ダークタイプと組み合わせてコントラスト基準を満たすことです。

印刷とインテリアでは、グレーは「静かなベース」（壁・大きな面・余白）として使い、黄色は見出し・サイン・クッションや照明アクセントなど“注目ポイント”に配置します。

AIで黄色×グレービジュアルを作成する

パレットが決まったら、ダッシュボードやポスター、パッケージ、部屋シーンなど実際のコンテキストで検証すると最も早くイメージがつかめます。AIのモックアップなら、レイアウトや照明のバリエーションを簡単に試せて便利です。

HEXコードを手がかりに、「どんなデザイン・雰囲気・構成か」（例：“ミニマルなオンボーディング画面”“エディトリアルグリッド”“暖かい寝室インテリア” など）を言語化し、いくつかバリエーションを作成。階層やコントラストが一番きれいなものを選びましょう。

media.ioなら、こうした配色のアイデアをクライアントやチームと簡単にビジュアル化・共有できます。

次へ： ブラックピンクカラーパレット