ダスティローズのカラーコード｜くすみ具合を色見本で比較

ダスティローズは、灰色を帯びたような落ち着いたローズ系の色ですが、カラーコードは資料によって異なります。同じ名前でも、黄みのあるピンク、赤みを感じるピンク、さらに彩度を抑えたグレイッシュな色があります。今回は3つの資料のHEXコードを並べ、数字で「くすみ」の違いを比べながら、Webの文字・背景・ボタンに取り入れる例を紹介します。

ダスティローズの3つのコードを彩度と色みで比較する

PicMonkeyの色ガイドは■#DCAE96、Figmaの色ガイドは■#DCA1A1、HTML Color Codesは■#C9A9A6を「Dusty Rose」の見本として掲載しています。どれか一つが唯一の正解というわけではありません。HEX（ヘックス）は「#」と6桁の英数字によるWebカラーの指定方法です。RGBは赤・緑・青の光の成分、HSLは色相（何色寄りか）・彩度（鮮やかさ）・明度（数式上の明るさ）で色を表す方式です。

表中のHSLは各HEXから計算して整数に丸めた参考値です。3色のHSL明度は約72〜75％と近い一方、彩度は約50％・46％・24％と違います。特にHTML Color Codesの■#C9A9A6は、この3つでは彩度が最も低く、灰色寄りに見えやすい見本です。PicMonkeyの■#DCAE96は黄みを含み、Figmaの■#DCA1A1は赤みの方向です。ただしHSLの彩度だけで人が感じる「くすみ」を完全には測れず、背景色や画面の表示環境でも印象は変わります。

低彩度の見本と温かい見本を用途で使い分ける

例A：香りアイテムの商品比較カード。商品写真と説明文の周囲は温かいオフホワイト■#FAF6F2にします。「香りの特徴」などの短い見出し帯を低彩度のダスティローズ■#C9A9A6にし、見出しと本文は濃いチャコール■#29242Cで表示します。チャコールと見出し帯のコントラスト比は約7.02：1、オフホワイト上では約14.12：1です。「香りを選ぶ」ボタンには深いプラム色■#553743と白■#FFFFFFの文字を使い、その比は約10.43：1です。低彩度の色を補助面に限ることで、商品写真を比較する余白を残します。

例B：紅茶の期間限定キャンペーンバナー。バナー背景には黄み寄りの■#DCAE96を広めに使い、「秋の紅茶セット」の見出しをチャコール■#29242Cで載せます。この文字と背景の比は約7.62：1です。ボタンはプラム色■#553743を背景に白■#FFFFFFの文字とし、詳細の案内は短くまとめます。もう少しピンク寄りにしたいときは、背景だけをFigmaの■#DCA1A1に替える案もあり、その場合のチャコール文字との比は約6.98：1です。2つのピンクの相互コントラスト比は約1.09：1なので、色の違いだけで「通常」「限定」などの状態を表す使い方は避けます。

白文字と淡い色面の境界は別に確認する

白■#FFFFFFと3種類のダスティローズとの比は、黄み寄り■#DCAE96が約1.99：1、赤み寄り■#DCA1A1が約2.17：1、灰み寄り■#C9A9A6が約2.16：1です。どれもWCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAが通常サイズの文字に求める4.5：1、大きな文字に求める3：1を下回ります。淡い背景に白文字を重ねず、濃い文字を使うことが基本です。

また、灰み寄りのダスティローズ■#C9A9A6とオフホワイト■#FAF6F2の境界は約2.01：1です。単なる装飾面なら余白で区切る方法がありますが、入力欄など操作に必要な輪郭には、深いプラム色■#553743の線を使うなどして識別可能にします。この線と灰み寄りの面は約4.82：1、オフホワイトとは約9.70：1です。操作部品の識別に必要な視覚情報は、隣り合う色と原則3：1以上が基準になります。

HueRollではHEXを入力して色を調整し、選択色と白・黒のコントラストを確認できます。ただし、任意の2色の比較やWCAGの自動合否判定には対応していません。3つのコードを比較して選んだ後も、完成した画面の文字・ボタン・枠線の組み合わせを別途計算して確認してください。