グレージュカラーコード一覧:HEX・RGB・CMYKと配色例
グレージュの代表的なカラーコードは、落ち着いた中間色なら HEX #B1A08A、RGB 177, 160, 138、Web背景で使いやすい明るめなら #D6CEC2 です。グレージュはベージュに灰みを足した色で、白背景より柔らかく、グレーより温かい印象を作れます。この記事では、すぐ使えるグレージュのHEX・RGB・CMYK一覧、ベージュやグレーとの違い、文字色、配色例、印刷時の注意点をまとめます。
まず使いやすいグレージュはこの5色
グレージュは「gray」と「beige」を合わせた色名として使われ、灰みと温かみのバランスで印象が変わります。色名サイトでも代表値は一つに固定されておらず、I-IROのグレージュは #B1A08A、color-sample.comの Grege は #AB9A86、原色大辞典のベージュグレイは #B4ADA9 として紹介されています。つまり実務では、色名だけでなく「明るさ」「赤み」「黄み」「灰み」を見て選ぶのが安全です。
Webサイトや資料の背景に使うなら、明るい #D6CEC2 や #E4DDD3 が扱いやすいです。ファッション、インテリア、ブランドトーンのアクセントには、少し濃い #B1A08A や #A89F91 が向いています。本文の文字色は白ではなく、濃いグレー、ブラウン、ネイビーを合わせると読みやすさを保てます。
ライト
定番背景
ベージュグレイ
代表色
ダーク
グレージュカラーコード一覧表
下の表は、Web制作、SNS画像、資料、印刷物で使いやすいグレージュ系カラーをまとめたものです。HEXとRGBは画面表示用、CMYKは一般的な変換式による近似値です。印刷会社のICCプロファイルや紙質で見え方は変わるため、CMYK値は入稿前の目安として扱ってください。
| 色名 | 色見本 | HEX | RGB | CMYK目安 | 向いている用途 |
|---|---|---|---|---|---|
| ペールグレージュ | #EEE8DF | 238, 232, 223 | C0 M3 Y6 K7 | 余白、記事背景、淡いカード | |
| ライトグレージュ | #E4DDD3 | 228, 221, 211 | C0 M3 Y7 K11 | Web背景、資料、LPの面色 | |
| ソフトグレージュ | #D6CEC2 | 214, 206, 194 | C0 M4 Y9 K16 | 本文背景、上品なカード | |
| ベージュグレイ | #B4ADA9 | 180, 173, 169 | C0 M4 Y6 K29 | 中間色の基準、比較用 | |
| グレージュ | #B1A08A | 177, 160, 138 | C0 M10 Y22 K31 | ファッション、インテリア、見出し帯 | |
| ウォームグレージュ | #C8BFB3 | 200, 191, 179 | C0 M5 Y11 K22 | ブランド背景、落ち着いたUI | |
| モカグレージュ | #A99A8D | 169, 154, 141 | C0 M9 Y17 K34 | カフェ、クラフト、秋色配色 | |
| トープグレージュ | #A89F91 | 168, 159, 145 | C0 M5 Y14 K34 | 大人っぽいアクセント | |
| ダークグレージュ | #8F8579 | 143, 133, 121 | C0 M7 Y15 K44 | 見出し、区切り、濃いボタン | |
| チャコールグレージュ | #6F675F | 111, 103, 95 | C0 M7 Y14 K56 | 文字色、フッター、締め色 |
ベージュ・グレーとの違い
グレージュは、ベージュより灰みがあり、グレーより黄みや茶みを感じる色です。ベージュだけだとナチュラルで温かい印象が強く、グレーだけだと無機質でクールに見えやすくなります。グレージュはその中間にあるため、余白を柔らかくしながら、甘くなりすぎないデザインに向いています。
似た低彩度色をまとめて使う場合は、くすみカラーコード一覧も参考になります。くすみカラーはピンク、グリーン、ブルーなど幅広い色相を灰みで落ち着かせる考え方で、グレージュはその中でもベージュ・グレー寄りの中間色として扱えます。
| 色タイプ | 代表コード | 印象 | 向いている場面 |
|---|---|---|---|
| ベージュ | #F5F5DC | 温かい、自然、やさしい | ナチュラル系、紙面風背景、ライフスタイル |
| グレージュ | #D6CEC2 / #B1A08A | 上品、落ち着き、柔らかい | ファッション、インテリア、EC、資料背景 |
| グレー | #7D7D7D | 中立、クール、無機質 | SaaS、管理画面、モノトーン配色 |
配色パターンと文字色
グレージュ背景では、文字色を少し濃くするのが基本です。明るいグレージュ背景なら #333333、温かい印象なら #4A3F38、きりっと締めたい場合は #243047 のようなネイビーが使いやすいです。白文字は、ダークグレージュやチャコールグレージュのように十分暗い背景でだけ使うと安全です。
| 目的 | 背景 | アクセント | 文字色 | 使い方 |
|---|---|---|---|---|
| 上品なブログ | #E4DDD3 | #B1A08A | #333333 | 背景を明るく、見出し下線や小ボタンに代表グレージュを使う |
| ファッションEC | #D6CEC2 | #8F8579 | #243047 | グレージュ背景に濃いネイビー文字で高級感を出す |
| インテリア資料 | #EEE8DF | #A89F91 | #4A3F38 | 薄い背景にトープを小さく使い、茶系文字で温かくまとめる |
| カフェ・クラフト | #C8BFB3 | #A99A8D | #3B302A | モカ寄りのグレージュで落ち着いた手触り感を作る |
CMYK・印刷で使うときの注意点
グレージュは低彩度の中間色なので、RGBからCMYKに変換すると画面より沈んで見えることがあります。特に明るい #E4DDD3 や #D6CEC2 は、用紙が黄みを帯びていると白との差が弱くなり、背景色として指定してもほとんど見えない場合があります。紙面で面の区切りを見せたいときは、少し濃い #B4ADA9 や #A89F91 を検討してください。
入稿前には RGB⇔CMYK変換ツールで目安値を確認できます。ただし、印刷用の色はプロファイル、紙、インキ、加工条件で変わります。ネット印刷のWAVEも、RGBは画面表示、CMYKは紙媒体に適したカラーモードとして整理しています。ブランドカラー、パッケージ、名刺など色の差が重要な案件では、画面上のHEX値だけで確定せず、印刷会社の指定条件と校正を優先してください。
よくある質問
#B1A08A、RGB 177, 160, 138 が使えます。Web背景で使いやすい明るめのグレージュなら #D6CEC2 も扱いやすいです。
#333333、ブラウン #4A3F38、ネイビー #243047 が合わせやすいです。白文字は背景が十分に暗い場合だけ使うと安全です。