【CSS】薄いグレー･濃いグレーのカラーコードと名前
「薄いグレーを使いたいけど名前、カラーコードなんだっけ？」
薄いグレーは何の色にも合いやすいため使いやすい色です。
グレーの名前とカラーコードの覚え方を解説します。
グレーも色の名前があります。
ただしグレーの場合はカラーコードのほうが覚えやすいため、カラーコードで覚えることをオススメします。
グレーのカラーコードの覚え方
カラーコードとはシャープから始まり、0～9,A～Fの16の英数字が6個並ぶ、色の指定方法です。「#F15A37」←こんなやつです。
赤や青などの有彩色は覚えにくいのですが、グレーは覚えるのがカンタンです。
カラーコードは2個ずつそれぞれRGB、赤緑青を指しています。
そしてこの赤緑青が同じ数値のときグレーになります。
つまりグレーなら1桁か2桁だけ覚えればいいのです。
0ほど濃く、Fほど薄いですね。7，8の境目が中心と覚えれば、英数字とだいたいの濃さはイメージしやすいでしょう。
また、カラーコードは前半の3桁と後半の3桁が同じ場合省略することができます。
#000000は#000と記載できます。
ちなみに私はよく3の倍数で使います。
#000 ,#333,#666,#999,#CCC,#FFF
いったんこれらを指定してみて、徐々に調整するのがオススメです。
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ほど薄い。
薄いグレーはだいたいどの色にも合う。
以上、グレーの名前とカラーコードの覚え方でした。
今回の記事は、こちらを参考にさせていただきました！
思い通りのグレーを見つけるために、ぜひ活用してみてください！！