【CSS】薄いグレー･濃いグレーのカラーコードと名前

「薄いグレーを使いたいけど名前、カラーコードなんだっけ？」

薄いグレーは何の色にも合いやすいため使いやすい色です。

グレーの名前とカラーコードの覚え方を解説します。

グレー(無彩色)の名前とカラーコード

グレーも色の名前があります。

ただしグレーの場合はカラーコードのほうが覚えやすいため、カラーコードで覚えることをオススメします。

グレーのカラーコードの覚え方

カラーコードとはシャープから始まり、0～9,A～Fの16の英数字が6個並ぶ、色の指定方法です。「#F15A37」←こんなやつです。

赤や青などの有彩色は覚えにくいのですが、グレーは覚えるのがカンタンです。

カラーコードは2個ずつそれぞれRGB、赤緑青を指しています。

そしてこの赤緑青が同じ数値のときグレーになります。

つまりグレーなら1桁か2桁だけ覚えればいいのです。

1桁のカラーコード

まずは1桁だけ覚えましょう。

同じ英数字が6個並んでいるだけです。

0ほど濃く、Fほど薄いですね。7，8の境目が中心と覚えれば、英数字とだいたいの濃さはイメージしやすいでしょう。

また、カラーコードは前半の3桁と後半の3桁が同じ場合省略することができます。

#000000は#000と記載できます。

ちなみに私はよく3の倍数で使います。

いったんこれらを指定してみて、徐々に調整するのがオススメです。

2桁のカラーコード

「#EEEじゃ濃い！もっと薄くしたい！」というときは2桁までいきましょう。

1桁目は基準となる濃さです。0なら濃いですしFなら薄いです。

2桁目は1桁目の濃さをさらに16分割した濃さです。

「0F」と「F0」は似ていますが全然違います。

「0F」は0(黒)の中で一番白に近い色で、「F0」はF(白)の中で一番黒に近い色です。

グレーは16桁×16桁で256色あるためすべて表記するのは難しいのですが、薄いグレー付近の色の濃さは下記の順になります。

…>DC>DD>DE>DF>E0>E1>…>EC>ED>EE>EF>F0>F1>F2>…FD>FE>FF

2桁がわかれば、それを3回書いて6桁にして指定するだけです。

ここの説明では2桁のカラーコードを省略していましたが、実際は省略できません。

薄いグレーが合う色

無彩色でかつ明度が高い（白に近い）という「薄いグレー」と合う色はなんでしょうか。

薄いグレーは他の色を邪魔しにくいため、基本的にどの色とも合うでしょう。

彩度が高く色相がまったく異なる色が隣り合うと「ハレーション」といって境界に違和感を感じる現象が起きます。

薄いグレーならハレーションが起きにくいためどの色とも合いやすいと言えるでしょう。

一色だけ選ぶならば、彩度が最高でも明度が低い（黒っぽい）「青」でしょうか。

赤と薄いグレーを合わせるなら薄いグレーを少しだけ赤に寄せると合いやすいでしょう。

薄いグレーは優しい色

紙で印刷するなら、真っ白の紙に真っ黒のインクが一番見やすいですね。

Webでももちろんその通りなのですが、モニターは紙と違い自ら光を放っている光源です。

真っ白だとまぶしいため、薄いグレーにすることで少し落ち着かせることができます。

まとめ

グレーは1桁のカラーコードで覚える。0ほど濃く、Fほど薄い。

薄いグレーはだいたいどの色にも合う。

以上、グレーの名前とカラーコードの覚え方でした。