くすみカラーコード一覧:HEX・RGB・CMYKと3色配色例

くすみカラーを使うなら、まずはスモーキーピンク #CFA5A0、セージグリーン #A8B5A2、ブルーグレー #8FA3AD、モーブ #B9A1B8のように、彩度を抑えて灰みを含む色から選ぶと失敗しにくくなります。この記事では、Web・SNS・資料・印刷で扱いやすいくすみカラーをHEX・RGB・CMYKで整理し、3色配色、文字色、パステルカラーとの使い分けまで実務向けにまとめます。

まず使いやすいくすみカラーはこの6色

くすみカラーは、鮮やかな色にグレーを混ぜたような低彩度の色です。かわいい印象だけでなく、落ち着き、上品さ、ナチュラル感を出しやすいため、コスメ、ファッション、インテリア、カフェ、ライフスタイル系のデザインでよく使われます。最初に選ぶなら、下の6色を基準にすると配色を組みやすくなります。

色彩では、色相だけでなく明度と彩度を合わせた「トーン」で印象が変わります。トーンの考え方は、武蔵野美術大学 造形ファイルの色調解説のように、明度・彩度の関係で整理すると理解しやすいです。くすみカラーは、パステルのように白っぽく明るいだけでなく、灰みを足して彩度を落とす点が特徴です。

くすみカラーの低彩度カラーパレットと色見本
くすみカラーは「少し灰みを足す」だけで、ビビッドカラーより大人っぽく、パステルカラーより落ち着いた印象になります。
#CFA5A0
スモーキーピンク
#A8B5A2
セージ
#8FA3AD
ブルーグレー
#B9A1B8
モーブ
#B7A99A
トープ
#D8C6B5
ダスティベージュ

くすみカラーコード一覧表

下の表は、実務で使いやすい代表的なくすみカラーをまとめたものです。HEXとRGBはWeb・アプリ・資料向け、CMYKは印刷用の近似値です。くすみカラーは彩度が低いため、紙や画面の環境差でさらに沈んで見えることがあります。重要なブランドカラーでは、画面上の数値だけで決めず、実際の表示や校正で確認してください。

表1:くすみカラーのHEX・RGB・CMYK一覧
色名 色見本 HEX RGB CMYK目安 向いている用途
スモーキーピンク
#CFA5A0207, 165, 160C0 M20 Y23 K19美容、ギフト、やわらかい強調
ダスティローズ
#B9868F185, 134, 143C0 M28 Y23 K27上品な見出し、秋冬配色
くすみレッド
#A86464168, 100, 100C0 M40 Y40 K34落ち着いた注意色、アクセント
モーブ
#B9A1B8185, 161, 184C0 M13 Y1 K27コスメ、上品な背景
くすみラベンダー
#AFA4C8175, 164, 200C13 M18 Y0 K22癒やし、余白、淡い装飾
ブルーグレー
#8FA3AD143, 163, 173C17 M6 Y0 K32SaaS、資料、信頼感
ダスティブルー
#7895A8120, 149, 168C29 M11 Y0 K34クールな見出し、情報整理
セージグリーン
#A8B5A2168, 181, 162C7 M0 Y10 K29自然、インテリア、ヘルスケア
オリーブグレー
#8F9779143, 151, 121C5 M0 Y20 K41落ち着いた自然系アクセント
ダスティミント
#A9C5B0169, 197, 176C14 M0 Y11 K23清潔感、軽い成功状態
トープ
#B7A99A183, 169, 154C0 M8 Y16 K28背景、紙面、ファッション
ダスティベージュ
#D8C6B5216, 198, 181C0 M8 Y16 K15LP背景、カード、余白
グレージュ
#C8BFB3200, 191, 179C0 M5 Y11 K22上品な中間色、本文背景
くすみブラウン
#9A7B6F154, 123, 111C0 M20 Y28 K40カフェ、クラフト、秋色

パステルカラー・ベージュとの違い

くすみカラーとパステルカラーは、どちらも強すぎない色として扱われますが、印象はかなり違います。パステルカラーは白を混ぜたように明るく、軽く、かわいい印象になりやすい色です。一方でくすみカラーは、鮮やかさを抑えて灰みを足すため、明るすぎず、落ち着いた大人っぽい印象になります。

ベージュ系カラーは黄みや茶みを含む中間色が中心です。くすみカラーの中にもトープやダスティベージュのようにベージュ寄りの色はありますが、スモーキーピンク、ブルーグレー、セージグリーンのように、赤・青・緑・紫を灰みで落ち着かせる色まで含める点が違います。

表2:くすみカラー、パステルカラー、ベージュの違い
色タイプ 特徴 向いている印象 注意点
くすみカラー 彩度を下げ、灰みを含む 上品、落ち着き、ナチュラル、大人っぽさ 全体を暗くしすぎると沈んで見える
パステルカラー 明度が高く、白っぽい淡色 かわいい、軽い、明るい、親しみやすい 白文字や薄い文字と合わせると読みにくい
ベージュ 黄み・茶みを含む中間色 自然、紙面感、温かみ、余白の柔らかさ 白との差が小さくなると面の区切りが弱い

3色配色パターン例

くすみカラーは、似た明度の色だけを並べると全体がぼやけることがあります。3色で組む場合は、背景色、主役色、締め色の役割を分けると扱いやすくなります。背景は明るめ、主役は中明度、締め色は濃いグレーやブラウンにすると、やわらかさと可読性を両立できます。

表3:目的別くすみカラー3色配色例
目的 おすすめ3色 使い方
美容・ギフト #CFA5A0 + #D8C6B5 + #5A4742 スモーキーピンクを主役にし、ダスティベージュを背景、濃いブラウンを文字に使う
ナチュラル系LP #A8B5A2 + #D8C6B5 + #3E463B セージをアクセント、ベージュを広い背景、深いオリーブを見出しにする
SaaS・資料 #8FA3AD + #C8BFB3 + #243047 ブルーグレーで情報感を出し、グレージュで余白を柔らかく、ネイビーで締める
コスメ・上品 #B9A1B8 + #CFA5A0 + #4A3F4C モーブとスモーキーピンクを近いトーンでまとめ、濃い紫グレーを文字に使う
カフェ・クラフト #9A7B6F + #D8C6B5 + #6D5C4D くすみブラウンを小さな強調にし、広い面は明るいベージュで軽くする
実務メモ:配色を増やしたい場合でも、最初は3色に絞るのがおすすめです。候補色を広げるときは Adobe Color のようなカラーホイールで類似色や補色を確認し、最後に本文・ボタン・リンクのコントラストを確認してください。

文字色とCMYK印刷の注意点

くすみカラー背景に白文字を置くと、雰囲気は柔らかく見えますが、色によっては読みづらくなります。背景がスモーキーピンクやダスティベージュのように明るい場合は、白文字ではなく濃いブラウン #5A4742、チャコール #333333、ネイビー #243047 を使う方が安全です。背景がブルーグレーやくすみブラウンのように中暗度の場合だけ、白文字やアイボリー文字を検討します。

Webで本文やボタンを作る場合は、WCAG 2.2のコントラスト基準も確認しておくと、淡い色や低彩度色でも読みやすさを保ちやすくなります。くすみカラーは「おしゃれに見えるか」だけでなく、「小さい文字でも読めるか」を必ず分けて判断してください。

印刷では、RGBのくすみカラーをCMYKに変換すると、画面よりさらに沈んで見えることがあります。特に青み、紫み、緑みを含むくすみカラーは、紙やプロファイルの影響で濁りが強く出る場合があります。入稿前には RGB⇔CMYK変換ツールで目安値を確認し、重要な色は校正紙や印刷会社の指定条件を優先してください。

よくある質問

くすみカラーは、鮮やかな色の彩度を落とし、灰みを含ませたような落ち着いた色です。スモーキーピンク、セージグリーン、ブルーグレー、モーブなどが代表例です。

使いやすいスモーキーピンクは #CFA5A0 です。より落ち着いたローズ寄りにしたい場合は #B9868F、強めのくすみレッドなら #A86464 も候補になります。

明るいくすみカラー背景には、濃いブラウン #5A4742、チャコール #333333、ネイビー #243047 が合わせやすいです。白文字は背景が十分に暗い場合だけ使うと安全です。

完全に同じ色になるとは限りません。くすみカラーは低彩度のため、CMYK変換や紙色の影響で画面より暗く、濁って見えることがあります。重要な印刷物では校正で確認してください。