![見出し画像](https://assets.st-note.com/production/uploads/images/135164617/rectangle_large_type_2_e79456f8165d94ce8e3f49af892b06f5.png?width=1200)
【CSS】薄いグレー・濃いグレーのカラーコードと名前
「薄いグレーを使いたいけど名前、カラーコードなんだっけ?」
薄いグレーは何の色にも合いやすいため使いやすい色です。
グレーの名前とカラーコードの覚え方を解説します。
![](https://assets.st-note.com/img/1690960741227-ZGJ1PWRrTP.png?width=1200)
グレーも色の名前があります。
ただしグレーの場合はカラーコードのほうが覚えやすいため、カラーコードで覚えることをオススメします。
グレーのカラーコードの覚え方
カラーコードとはシャープから始まり、0~9,A~Fの16の英数字が6個並ぶ、色の指定方法です。「#F15A37」←こんなやつです。
赤や青などの有彩色は覚えにくいのですが、グレーは覚えるのがカンタンです。
カラーコードは2個ずつそれぞれRGB、赤緑青を指しています。
そしてこの赤緑青が同じ数値のときグレーになります。
つまりグレーなら1桁か2桁だけ覚えればいいのです。
![](https://assets.st-note.com/img/1690960808857-WIwItfiVg2.png?width=1200)
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ほど薄い。
薄いグレーはだいたいどの色にも合う。
以上、グレーの名前とカラーコードの覚え方でした。
今回の記事は、こちらを参考にさせていただきました!
思い通りのグレーを見つけるために、ぜひ活用してみてください!!
この記事が気に入ったらサポートをしてみませんか?