グレーのカラーコード（グレー系の色）

グレーはインターフェースの骨格です。文字、枠線、背景、無効状態に使われます。このページでは、gray、silver、gainsboro、slategray、dimgrayといったCSSの色名のグレー10色に、アッシュ、バトルシップ、チャコール、ガンメタル、プラチナ、トープグレーなど、涼しい色と暖かい色を加えた31色を、HEX・RGB・HSL・HSV・CMYK・OKLCHのコードとともに紹介し、明度10%刻みの無彩色グレーの表も用意しています。CSSではgrayとgreyのどちらの綴りも同じ色です。

使い方

1. リストからグレー系の色を選びます。
2. HEX、RGB、HSL、またはCMYKのコードをコピーします。
3. 10%刻みの表で、等間隔のグレースケールを作ります。
4. グレーを背景に使う前に、読みやすい文字色を確認します。

計算式

HSLの明度L%の無彩色グレー = 3つのチャンネルすべてがround(L × 2.55)

無彩色のグレーはR = G = Bです。青がわずかに多いグレー（スレート、カデット）は涼しく、赤と黄が多いグレー（グレージュ、シネリアス）は暖かく感じられます。HSLの段階は数値上は均等ですが、知覚上は均等ではなく、OKLCHの列に各段階の知覚される明度を示しています。

計算例

スレートグレー（slategray）は #708090 = rgb(112, 128, 144)、hsl(210, 12.6%, 50.2%) で、赤から青まで32段階ぶん青みに傾いたグレーです。10%刻みの表では、明度50%は127.5 → #808080、つまりCSSのgrayで、30%は76.5 → #4D4D4D です。