Webデザインやグラフィック、ブランディングの現場で、上質感や落ち着きを演出する定番カラーとして定着した「グレージュ」。グレーのスタイリッシュさとベージュの温もりを併せ持つ絶妙なくすみカラーですが、実際に制作ツールやCSSで指定しようとすると「どのHEX値が最も美しく見えるのか」「印刷するとくすんで濁ってしまう」といった疑問に直面することが少なくありません。
グレージュは一歩間違えると単なる「くすんだ薄汚れ」に見えてしまう繊細な中間色です。本稿では、WebやUIデザインで失敗しない定番グレージュのHEXコードやRGB値、印刷用のCMYK一覧を網羅し、プロが実践する美しい配色パレットの黄金比まで徹底的に整理してお届けします。
【一覧表】グレージュの定番カラーコードと色見本（HEX・RGB・CMYK）
グレージュと一口に言っても、明るさ（明度）や黄み・青みのバランスによって印象が大きく変わります。デジタル制作（Web/アプリ）と印刷物（DTP）ですぐに使える、基本となるグレージュの色見本と各数値を一覧にまとめました。
| カラー名称 | HEXコード | RGB値 | CMYK値 | 主な用途・印象 |
|---|---|---|---|---|
| クラシック・グレージュ |
#C5BAAF | 197, 186, 175 | C:0 M:6 Y:11 K:23 | 王道の中間色。上質で落ち着いたメインカラー |
| ライトグレージュ |
#E8E4DF | 232, 228, 223 | C:0 M:2 Y:4 K:9 | Web背景色やカードコンポーネントに最適 |
| アッシュグレージュ |
#A39E9B | 163, 158, 155 | C:0 M:3 Y:5 K:36 | 青み・無彩色を含んだ都会的でクールな表現 |
| ウォームグレージュ |
#D4CDC5 | 212, 205, 197 | C:0 M:3 Y:7 K:17 | オーガニックコスメやインテリア系の柔らかさ |
| ディープグレージュ |
#8C857B | 140, 133, 123 | C:0 M:5 Y:12 K:45 | テキストカラーや境界線（Border）の引き締め |
印刷（CMYK）を行う場合、グレージュのような薄いくすみ色はCMYKのインキ掛け合わせで濁りが発生しやすくなります。C（シアン）を極力抑え、M（マゼンタ）とY（イエロー）をほぼ同率、K（ブラック）の網点で明度をコントロールすると、狙い通りのクリアなグレージュを再現できます。
プロが明かす「失敗しないグレージュ」のWEB用カラーコードとCSS背景色指定
Webデザインの現場において、真っ白（#FFFFFF）の背景はコントラストが強すぎて目が疲れやすい場合があります。そこで背景色にグレージュを取り入れるケースが急増していますが、濃すぎるグレージュを背景に敷くと文字の視認性が落ち、Webアクセシビリティの基準を満たせなくなるリスクがあります。
Webページの背景色としてCSSに指定する際は、わずかに色味を感じる超高明度のグレージュを選ぶのが鉄則です。
/* サイト全体の洗練された背景色用CSS /
body {
background-color: #F8F7F4; / 極めて柔らかいペールグレージュ /
color: #333230; / 純黒ではなく温かみのあるチャコール /
}
/ カードやセクションの背景アクセント /
.card-greige {
background-color: #ECE8E1;
border: 1px solid #D8D2C9;
}
/ ボタンやホバー時のマイクロインタラクション */
.btn-greige {
background-color: #C5BAAF;
color: #FFFFFF;
}
グレージュ背景色をCSSで適用する場合、テキストカラーには#111111のような真っ黒を避けるのもポイントです。わずかに黄みや赤みを含んだダークグレー（例：#2E2C2A）を組み合わせることで、画面全体のトーン＆マナーが劇的に整い、プロフェッショナルな空気感が生まれます。
ライト・アッシュ・ダーク別！ニュアンスで選ぶグレージュの派生カラー見本
トレンドの「くすみカラー グレージュ 見本」を制作する際、ターゲット層やブランドイメージに合わせて3つの方向性から最適なニュアンスを選択します。
1. 透明感と抜け感を生む「ライトグレージュ」
カラーコード：#EDE8E1（RGB: 237, 232, 225）
白に近い開放感を保ちながら、温かみのある余白を作りたいときに重宝します。ミニマルなECサイトの余白や、コスメブランドのランディングページで多用されるカラーです。
2. モードで洗練された「アッシュグレージュ」
カラーコード：#A8A4A0（RGB: 168, 164, 160）
通常のグレージュよりも黄みを抑え、無機質なグレーの比率を高めたカラーコードです。ヘアカラーのトレンドからデザイン領域にも波及し、メンズコスメや建築・ポートフォリオサイトなど、シックで知的な雰囲気を狙う際に抜群の効果を発揮します。
3. 重厚感と落ち着きを兼ね備える「ダークグレージュ」
カラーコード：#706B65（RGB: 112, 107, 101）
単なる黒や濃いグレーでは出せない、クラシカルな深みを持つダークトーン。ラグジュアリーブランドのサブテキストやフッター背景に配置することで、空間を上品に引き締めます。
似ているようで全く違う？「グレージュ」と「トープ」の違い＆近似色一覧
カラーパレット作成時によく混同されるのが「グレージュ」と「トープ（Taupe）」です。どちらも上品なくすみ系ニュートラルカラーですが、色彩学的なルーツと色相のベースが異なります。
トープはフランス語で「モグラ（Taupe）」を意味し、茶色（ブラウン）にグレーとわずかな紫色が混ざり合った、より深みのある濃い中間色を指します。一方のグレージュは「グレー＋ベージュ」であり、明度が高く、軽やかで明るいニュアンスを持ちます。
| カラー名 | HEXコード | 色相の特徴と違い |
|---|---|---|
| グレージュ | #C5BAAF | グレー＋ベージュ。明るくナチュラルな中明度 |
| トープ（Taupe） | #87786F | ブラウン＋紫＋グレー。重厚感と影のあるダークニュアンス |
| エクリュ（Ecru） | #EFEBD9 | 生成り色。グレージュよりも黄み・白みが強い |
| サンドベージュ | #D3C4B3 | 砂浜の砂色。グレージュよりもベージュ（暖色）寄りで温かい |
| ウォームグレー | #BDB6B0 | グレーの無彩色寄りにわずかな赤みを足したクールなトーン |
このように近似色一覧を並べて比較すると、「明るさと柔らかさを求めるならグレージュ」「落ち着きや陰影を強調するならトープ」という明確な使い分けの判断がつきます。
洗練されたデザインを作る！グレージュの配色パレットと黄金比率
グレージュを使ったデザインが垢抜けるかどうかは、他のカラーとの面積比率によって決まります。デザインの現場で鉄板とされる「ベースカラー70%：メインカラー25%：アクセントカラー5%」の比率をもとに、相性抜群の配色パレットを3パターン紹介します。
【パターン1：ミニマル・モダン配色（最も汎用性の高い構成）】
- ベース（70%）： オフホワイト（#FAF9F6）
- メイン（25%）： スタンダード・グレージュ（#C5BAAF）
- アクセント（5%）： チャコールブラック（#222222）
清潔感と洗練された現代的な美しさを両立できるパレットです。コーポレートサイト、建築設計事務所、ライフスタイルマガジンのUIに適しています。
【パターン2：オーガニック・フェミニン配色（コスメ・サロン向け）】
- ベース（70%）： ライトグレージュ（#F3EFEA）
- メイン（25%）： くすみダスティピンク（#D2A9A1）
- アクセント（5%）： カフェモカブラウン（#5D4A42）
グレージュの持つグレーの要素が、ピンクの甘さを程よく抑え、大人っぽく上品なトーンへと昇華させます。
【パターン3：ハイエンド・ラグジュアリー配色（ホテル・高級物件向け）】
- ベース（70%）： ダークグレージュ（#6D665F）
- メイン（25%）： トープグレージュ（#4A443E）
- アクセント（5%）： シャンパンゴールド（#C9A86A）
深いグレージュのグラデーションに、ゴールドの繊細な光沢をアクセントとして差し込むことで、圧倒的な上質感と品格を醸成できます。
【グレージュのカラーコード】に関するよくある質問（FAQ）
Q1：IllustratorやPhotoshopで印刷用のグレージュを作る時、最も失敗しないCMYK値は？
A1：C: 15% / M: 18% / Y: 22% / K: 0% または C: 0% / M: 5% / Y: 10% / K: 20% を目安にしてください。シアン（C）が高すぎると濁った緑青色になり、マゼンタ（M）が高すぎると紫がかって見えます。イエローとマゼンタをほぼ同量にし、明るさはK版のパーセンテージで調整するのが綺麗な仕上がりの秘訣です。
Q2：グレージュの背景に白い文字を置いても大丈夫ですか？
A2：標準的なグレージュ（#C5BAAF）に白文字（#FFFFFF）を載せると、コントラスト比が約1.6:1となり、Webアクセシビリティのガイドライン（WCAG AA基準の4.5:1）を大幅に下回ります。白文字を載せる場合は、#6E675F以下の「ディープグレージュ」まで明度を落とすか、背景にライトグレージュを敷いて文字側を濃色（#2B2927など）にする設計を推奨します。
Q3：Web制作ツール（FigmaやCanva）で素早く呼び出せるおすすめのグレージュは？
A3：汎用性を重視するなら、FigmaのカラースタイルやCanvaのカスタムカラーに#D8D2C9（中間色）と#F5F3EF（背景用）の2種類をトークンとして登録しておくのがおすすめです。この2つのコードがあれば、大半のUIやバナー制作で困ることはありません。
グレージュは、無機質な静けさと温かみのある心地よさを同時に表現できる唯一無二の中間色です。WEB用カラーコードとしての#C5BAAFや#E8E4DFといった数値を基本軸に据えつつ、明度やアクセントカラーの比率を意識してコントロールすることで、Webサイトやデザインのクオリティは一段上のレベルへと引き上がります。
媒体や目的に適した正確なカラーコードとCSS指定、そして黄金比配色を活用して、ユーザーの目を引きつける洗練されたデザイン表現を形作ってください。
