利休鼠とは？名前の由来とカラーコード
利休鼠（りきゅうねずみ）は、わずかに緑みを含んだ落ち着いた灰色です。普通のグレーとの違いや、茶人の名前が付いている理由を知ると、Webデザインでどんな色と合わせるか考えやすくなります。代表的なカラーコードを比較し、明るい背景と利休鼠の背景、それぞれの配色例を紹介します。
利休鼠の読み方・名前の由来とカラーコード
利休鼠は「りきゅうねずみ」、または「りきゅうねず」と読みます。「鼠」は灰色を表し、茶人・千利休を連想させる「利休」と組み合わされた色名です。江戸時代に好まれた、灰色に少し色みを付けた色名の一つとして説明されます。ただし、利休本人がこの色を考案した、あるいは実際に好んだと確認できるわけではありません。
画面上の利休鼠の見本には、緑みを感じる灰色#888E7Eや、少し暗い#7B8174があります。一般的な無彩色のグレー#888888と並べると、利休鼠にはわずかな緑みがあることが分かります。色名ごとに世界共通のHEX値が一つ定められているわけではないため、この記事では#888E7Eを基準色とします。HEX（ヘックス）カラーコードは「#」に続く英数字で画面上の色を指定する方法で、ここでは6桁の形式を使っています。
利休鼠を生かす2つのWeb配色例
例1：陶芸展の案内は明るい背景に利休鼠を添える
陶芸展の案内ページなら、背景を明るい生成り#F7F5ECにし、「秋の陶芸展」の見出しと本文を深い灰緑#18231Dで表示します。利休鼠#888E7Eは見出し下の短い飾り線や、会場写真の横の細い色帯に使います。開催日時をまとめるカードには薄い灰緑#E6EAE4を使い、カード内の文字は深い灰緑#18231Dにします。
カードの輪郭が情報を理解するうえで必要なら、枠をやや濃い灰緑#6E7770にして境界を示します。「展示情報を見る」ボタンは深い灰緑#18231Dで塗り、文字は生成り#F7F5ECにします。利休鼠を大きく使わず、作品写真と見出しを主役にする例です。
例2：茶道具の紹介では利休鼠を広い背景にする
茶道具の新作を紹介するバナーでは、背景の大部分を利休鼠#888E7Eに変えます。商品名と短い説明は深い灰緑#18231Dとし、商品写真の横に置く価格・素材の情報欄は生成り#F7F5ECにして、欄内の文字も深い灰緑#18231Dで統一します。「商品を見る」ボタンには深い灰緑#18231Dを使い、文字を生成り#F7F5ECにします。
例1と比べると利休鼠の面積が増えますが、見出しからボタンまで同じ中間色でまとめるのではなく、文字と操作部分に濃い色を割り当てます。明るい情報欄は広げすぎず、落ち着いた背景と商品写真の対比を生かすのがポイントです。
利休鼠を文字や境界線に使うときの注意点
文字と背景など隣り合う色の明るさの差を表す値がコントラスト比です。Webコンテンツのアクセシビリティ指針「WCAG 2.2」のAA基準では、通常サイズの文字に4.5:1以上、大きな文字に3:1以上が必要です。
基準色の利休鼠#888E7Eと生成り#F7F5ECは約3.09:1、白#FFFFFFとは約3.38:1です。大きな文字の数値基準には届きますが、通常サイズの本文の基準は満たしません。利休鼠を文字として重ねる代わりに、深い灰緑#18231Dを選ぶと、利休鼠#888E7Eの背景との比は約4.79:1、生成り#F7F5ECとは約14.82:1になり、どちらも通常文字のAA基準を満たします。
また、薄い灰緑#E6EAE4のカードと生成り#F7F5ECの背景は約1.11:1で、色の差だけでは境界を示しにくい組み合わせです。必要な枠に使う灰緑#6E7770と薄い灰緑#E6EAE4の比は約3.80:1です。操作に必要な枠やアイコンなど、意味のある文字以外の要素は隣接色に対して原則3:1以上を確認しましょう。純粋な飾り線には同じ基準が一律に適用されるわけではありません。
HueRollでは選んだ色と白・黒とのコントラストを確認できますが、利休鼠と生成りのような任意の2色の比較やAAの自動判定には対応していません。見本のHEX値を変更した場合も、実際に接する色同士を別途計算して確認してください。