ピンク × グレー配色20選｜カラーパレットとHEXコードまとめ

ピンクとグレーは、柔らかさと構造感を同時に感じさせる、珍しい組み合わせのひとつです。ピンクから暖かみ、グレーから明快さが加わることで、レイアウトが甘くなりすぎず、意図的なデザインに見えます。

以下に、HEXコード付きの20種類のモダンなピンク×グレーカラーパレットアイデアと、ブランド、UI、パッケージ、インテリアでの使い方の実践的なコツをご紹介します。

なぜピンク×グレーのパレットがこれほどまでに機能するのか

ピンクは親しみやすく感情的なトーン（優しい、落ち着く、ロマンティック、または鮮やか）を、彩度によってさまざまに演出します。グレーは抑制と構造を与え、全体が子供っぽくならずモダンな印象に。

このバランスは特にデジタルデザインで役立ちます。ピンクはアクションや状態の強調に、グレーはレイアウト、タイポグラフィ、UIのクローム部分を担います。白黒の強いコントラストに頼らずに明確な階層が作れます。

印刷物やインテリアでは、ピンクが硬質な素材（石、金属、コンクリート）を柔らかく見せ、グレーが全体を引き締めます。結果、“計算された中立色”として穏やかなのに個性を保てます。

20種類以上のピンク×グレーカラーパレットアイデア（HEXコード付き）

1）ブラッシュコンクリート

HEX： #F2B6C6 #E9DDE1 #B9B1B5 #6F6A70 #2E2C31

雰囲気： 穏やか、都会的、洗練された

おすすめ用途： ビューティー・ウェルネス系のブランディング、ミニマルなSNS投稿

落ち着きと都会的な洗練さを持つこの組み合わせは、ブラッシュリップと滑らかなコンクリートのような雰囲気。淡いピンクやウォームな白は余白に、ミッドグレーはタイポや構造に活躍します。チャコールはロゴや見出しに最適。コツ：ピンク色は小さく効果的なアクセントに限定し、上品で洗練された印象を保ちましょう。

media.ioを使用して生成したブラッシュコンクリートの画像例

Media.io

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

今すぐ無料で試す

2）ローズクォーツミスト

HEX： #F7C8D0 #F4EFF1 #CFC8CD #8D8890 #4B474F

雰囲気：透明感、柔らかい、ロマンティック

おすすめ用途： 結婚式の招待状、スキンケアのLPなど

透明感あるロマンティックな印象は、朝もやに光るローズクォーツのよう。ほぼ白とブラッシュは背景に、ソフトグレーは区切り線やアイコン、サブテキスト用に。深みのあるグラファイトはCTAや見出しに使うと引き締まります。コツ：暖かいセリフ体と細身サンセリフを合わせて、柔らかさを計算的に演出すると◎。

media.ioを使って生成したローズクォーツミストの画像例

3）ピオニースレート

HEX： #EFA2B5 #D9C6CD #A9A2A9 #5C5960 #2B2A2F

雰囲気：モダン、自信、エディトリアル

おすすめ用途： 雑誌のレイアウト、ファッションルックブック

モダンでエディトリアルな印象は、芍薬の花びらがクールなスレートに映えるイメージ。ミッドグレーはレイアウトの軸に、明るいピンクは引用やボタン、強調箇所に。ソフトなニュートラルは写真の肌色もきれいに見せます。コツ：最も濃い色はテキスト専用に、ピンクで物語性を演出しましょう。

media.ioを使って生成したピオニースレートの画像例

4）バレエスモーク

HEX： #F6B2C1 #F2DEE3 #BEB3B8 #7C757B #3A363C

雰囲気：優雅、落ち着いた、エレガント

おすすめ用途： ダンススタジオのブランディング、フェミニンなUIテーマ

優雅で落ち着いた印象は、サテンのバレエシューズがステージの煙に溶け込むよう。ブラッシュをメインカラー、スモーキーグレーはナビや枠線、説明文に。ほぼ白を背景に使うと重たくなりません。コツ：濃い色は主要テキストに使い、アクセシビリティも確保しましょう。

media.ioで生成したバレエスモークの画像例

5）ラズベリーグラファイト

HEX： #D94B72 #F2B8C7 #C9C2C7 #6E6A70 #1F1F24

雰囲気：力強い、シック、ハイコントラスト

おすすめ用途： 商品広告、プロモーションバナー

華やかでシック、ラズベリーラッカーがグラファイト調のデスクに塗られたような印象。濃いピンクはCTAや値札、キーバッジなどの強調アクセントに少量だけ使いましょう。柔らかなブラッシュは背景やグラデーションに、グレーで構造とコントラストを。コツ：真っ黒に近い色はテキストやシルエットだけに使い、色の濁りを防ぎます。

media.io生成のラズベリーグラファイト画像例

6）モーヴミニマル

HEX： #C88A9B #F3E7EA #D0C7CB #9A9297 #544E55

雰囲気：ミニマル、心地よい、控えめ

おすすめ用途： ポートフォリオサイト、ステーショナリーセット

控えめで心地よい印象は、モーヴのニットと滑らかな石のようなイメージ。クリーミーなピンクを背景に使い、明るい・中間グレーでカードやボーダーの控えめな装飾に。モーヴはアイコンやホバー、ポイントの強調に最適。コツ：一番濃いグレーは大きめテキストの見出し専用に使い、コントラストを確保しましょう。

media.io生成のモーヴミニマル画像例

7）ヴィンテージピンクセメント

HEX： #E3A7B1 #EAD8DB #B8AEB1 #80797D #3E3A3E

雰囲気：ヴィンテージ、暖かみ、落ち着き

おすすめ用途： カフェのメニュー、ライフスタイル系ブランディング

ヴィンテージ感と安定感のある印象は、セメント壁に色褪せたリップが塗られたよう。暖色系のブラッシュはメニューやラベルを歓迎的に見せ、グレーは全体をスッキリ・読みやすくします。本文は中間グレー、見出しやスタンプは濃い色で。コツ：余白をたっぷりとり、テクスチャ追加せずパレット自体でノスタルジーを演出しましょう。

media.io生成のヴィンテージピンクセメント画像例

8）サクラ・スチール

HEX： #F4AFC0 #F6EDF0 #C6C8CE #7A7F8A #2E3340

雰囲気：フレッシュ、クール、現代的

おすすめ用途： SaaSダッシュボード、テック系ブランディング

フレッシュで現代的、サクラの花が磨かれたスチールに映えるような配色。データ重視のUIに最適で、淡い色はパネル、スチールグレーはグラフやラベルに使います。ダークなブルーグレーはモダンな文字色にも◎。コツ：ピンクはアラートやタグ、選択時だけなど、目立たせたい所に限定して使いましょう。

media.io生成のサクラ・スチール画像例

9）ピンククレイフォグ

HEX： #DFA1A9 #F1E4E5 #C8BDBE #8C8586 #4A4345

雰囲気：アーシー、穏やか、質感

おすすめ用途： インテリアムードボード、陶器ショップ

アーシーで穏やかな配色は、静かなアトリエで乾いたピンク粘土を思わせます。ダスティなピンクは広い面に最適、もやのようなニュートラルが脇役を担います。濃いグレーはフレームやラベル、商品名用で引き締め感をプラス。コツ：リネンやオーク、マットストーンなど自然素材と組み合わせると、誠実で手触り感のある仕上がりに。

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

10) ベリーアッシュ

HEX： #B84B67 #F0BBC8 #D7D0D3 #9D959B #2C2A2F

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

おすすめ用途： 夜のイベントポスター、ブティックキャンペーン

ムーディーでスタイリッシュ、ベリーワインがクールなアッシュに注がれるような印象です。ディープベリーは見出しやアイコン、キーモチーフの目を引くポイントとして活用しましょう。柔らかいピンクは滑らかなグラデーションにも最適、アッシュグレーは忙しいデザインを整理します。コツ：ほぼブラックは文字や細ラインのみに使用し、ベリーの印象を邪魔しないようにしましょう。

media.ioで生成されたベリーアッシュの画像例

11) ダスティローズピューター

HEX： #D6A0AC #F3E6E9 #C9C1C6 #7E7A80 #3B3940

雰囲気： タイムレス、やさしい、バランス

おすすめ用途： 編集ブログ、パッケージラベル

タイムレスでバランスの取れた配色は、ドライローズと優しくくすんだピューターを思わせます。淡いピンクは商品写真映えする背景に最適、ピューターグレーは可読性と落ち着きを保ちます。本文には中間グレー、ブランドマークには最も濃い色を。コツ：セパレーターやアイコンに微量のピンクを加えてページに一体感を。

media.ioで生成されたダスティローズピューターの画像例

12) フラミンゴチャコール

HEX： #FF6F91 #F7C3D1 #D5CED3 #6A646B #1E1C22

雰囲気： 遊び心、パンチ、モダン

おすすめ用途： SNS広告、アプリのオンボーディング画面

遊び心がありパンチの効いた雰囲気は、フラミンゴの羽根がチャコールに触れる感じです。このピンクグレーのカラーパレットは、ネオン過剰でなくエネルギーをプラスしたい時に最適です。ホットピンクは重要なタイミングに使い、淡いピンクは柔らかなつなぎ役に。グレーは一貫性を保ちます。コツ：ホットピンクは1画面1アクションに制限し、階層性を明確にしましょう。

media.ioで生成されたフラミンゴチャコールの画像例

13) コットンキャンディストーン

HEX： #F8AFC6 #FCE8EF #D8D0D5 #A29AA0 #565058

雰囲気： 甘い、軽やか、フレンドリー

おすすめ用途： 子ども用パーティー招待状、遊び心あるブランド

甘く軽やかな配色は、コットンキャンディの柔らかさとストーンのクールさを兼ね備えています。淡いピンクは大きな背景部分に、濃いピンクはアイコンや見出しに。ストーングレーが子供っぽくなりすぎるのを防ぎ、特に文字やグリッドに使うと効果的。コツ：丸みのあるサンセリフ体やシンプルな形と組み合わせて親しみやすさを演出しましょう。

media.ioで生成されたコットンキャンディストーンの画像例

14) オーキッドアルミニウム

HEX： #D07CA2 #F2D7E6 #C9CAD0 #80838E #2E3140

雰囲気： 洗練、クリエイティブ、テック

おすすめ用途： クリエイティブツールUI、スタートアップのピッチ資料

洗練されクリエイティブ、オーキッドインクがブラッシュドアルミに重なる質感です。ラベンダーピンクはハイライトや選択状態、主要なチャートに使うと上品。アルミグレーはスライドやUIをクリーンに保ち、特にスクリーンショットや図の背面におすすめ。コツ：最も濃い色はタイトルに、オーキッドは強調に使用し、本文には使いすぎないように。

media.ioで生成されたオーキッドアルミニウムの画像例

15) アンティークローズグラナイト

HEX： #C7848D #F0DEE0 #BEB2B4 #7A7073 #3A3336

雰囲気： 伝統、上質、温かみ

おすすめ用途： ブティックホテルのブランディング、印刷ステーショナリー

伝統と洗練を感じさせる配色で、アンティークローズがグラナイトに押し花のように重なります。淡いピンクは紙色に使い、中間グレーでルールやキャプション、補足情報に階層を持たせます。グラナイトの濃色はモノグラムやエレガントな見出し向き。コツ：印刷時は、最も濃い色を純黒ではなく少し和らげて使いましょう。

media.ioで生成されたアンティークローズグラナイトの画像例

16) ピンクネオングンメタル

HEX： #FF3E7A #FFB3C8 #C9C4C8 #5E5A62 #18171C

雰囲気： エッジー、エネルギッシュ、ナイトライフ

おすすめ用途： 音楽プロモ、ストリートウェアドロップ

エッジーでエネルギッシュ、ネオンサインがガンメタルの上で光る印象。ネオンピンクは重要な文字や小さい装飾用に絞ることで、派手すぎないプレミアム感に。淡いピンクでグラデやグローを優しくし、グレーは全体レイアウトを安定させます。コツ：黒の余白を多めに取り、ネオンは短くシャープに使いましょう。

media.ioで生成されたピンクネオングンメタルの画像例

17) ソフトペタルシルバー

HEX： #F2A9B9 #F8EEF1 #D7D7DC #9B9BA3 #4A4A52

雰囲気： クリーン、癒し、明るい

おすすめ用途： メディカルスパサイト、クリーンな商品ページ

クリーンで癒される色合いは、柔らかな花びらがクールなシルバーに舞うイメージです。淡いピンクは優しい背景色に、シルバーグレーはフォームフィールドやボーダー、UIクロームに頼れます。濃いグレーはラベルや法律テキストを読みやすくかつ強すぎず表現。コツ：ピンクからオフホワイトへの控えめなグラデーションで奥行きを出しましょう。

media.ioで生成されたソフトペタルシルバーの画像例

18) ウォームブラッシュクールグレー

HEX： #E8A1AE #F5E3E7 #D0D3D9 #8A909A #313540

雰囲気： バランス、モダン、多用途

おすすめ用途： 企業リブランディング、プレゼンテーション

バランスがよく多用途、暖かみのあるピンクとクールなオフィスグレーをミックスした配色です。ソフトなピンクと青みグレーのコントラストがチャートやアイコン、コールアウトをモダンで流行に流されない印象に。背景は明るく保ち、最も濃いグレーは見出しやメイン数値用に。コツ：ピンクは全スライドでハイライトや肯定的な意味など、一貫した役割で使いましょう。

media.ioで生成されたウォームブラッシュクールグレーの画像例

19) ローズウッドシャドウ

HEX： #A24A5A #E9B7C0 #C7BEC2 #7B747A #241F24

雰囲気： リッチ、親密、ラグジュアリー

おすすめ用途： プレミアムパッケージ、ブティック写真オーバーレイ

リッチで親密な雰囲気、ローズウッドの温もりを深い影となるベースに重ねます。濃い赤みローズはラベルやシール、パターンのアクセントに最適。淡いピンクでグラデを優しく、グレーはタイポグラフィを中立かつ高級感ある仕上げに。コツ：マット仕上げやミニマルな箔演出が特に映えます。

media.ioで生成されたローズウッドシャドウの画像例

20) ピンクフロストストーム

HEX： #F7B7C7 #FBF3F6 #D7DCE4 #8B94A3 #2B313B

雰囲気： シャープ、ウィンター、モダン

おすすめ用途： シーズンキャンペーン、ニュースレターテンプレート

シャープで冬らしい印象、ピンクの霧氷がストーミースカイに重なる雰囲気。アイシーなホワイトが明るさを、青みグレーがクリーンで現代的なエッジをプラスします。メールのピンクグレー配色ではボタンやセクション見出しにピンクを使用し、本文はスレートグレーで。コツ：淡いグレーで細いボーダーを使い、モジュールを優しく区切りましょう。

media.ioで生成されたピンクフロストストームの画像例

ピンク×グレーと相性の良い色は？

ダークブルーはピンクとグレーの自然なパートナーで、パレットをハードにせず権威と奥行きを与えます。ネイビーアクセントはピンクに大人っぽさやブランド性も加えます。

クリーム、サンド、ソフトトープなどの暖色系ニュートラルは、ピンクグレー配色をさらに親しみやすくします。特にパッケージやインテリアスタイリングにおすすめ。クリーンでクールな雰囲気が欲しいなら、ホワイト＋スチール系ブルーグレーも試してください。

さらにコントラストを加えるなら、メタリック（シルバー、クローム、落ち着いたゴールド）やディープトーン（ブラックチェリー、エスプレッソ）を少量アクセントにとどめて、ベースの落ち着きを保ちましょう。

ピンク×グレーのカラーパレットを実際のデザインに使う方法

UIではグレーをシステムカラー（背景、カード、ボーダー、文字）に活用し、ピンクには1つの役割（主要CTAや選択状態、ハイライト）を割り当てて、ユーザーが全体の意味をわかりやすくなるように。

ブランディングや印刷の場合、紙色として淡いピンクかオフホワイトから始め、可読性を保つために中〜濃グレーを使いましょう。ロゴ、ラベル、レイアウトをシャープに保ちつつ、やさしい印象を残せます。

インテリアやムードボードでは、ピンクは広い柔らかい面（ペイントやテキスタイル）に使い、グレーはメタル・石・フレームなどの硬いエッジに用いましょう。これで空間が甘くなりすぎるのを防げます。

AIでピンク×グレーパレットのビジュアルを作成

ピンクグレーの配色がポスターやUIモック、招待状や商品写真でどう見えるか試したい場合は、最終デザイン前に概念イメージを生成してみましょう。

Media.ioのテキスト画像生成ツールを使えば、プロンプトをペーストしてレイアウトイメージを繰り返し調整でき、イメージやコントラストが最適になったらリファレンスとして実制作に活かせます。

次へ： ダークブルーのカラーパレット