ホームへ

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

2021年10月23日

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

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

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

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

black
#000000
dimgray
#696969
gray
#808080
darkgray
#a9a9a9
silver
#c0c0c0
lightgray
#d3d3d3
gainsboro
#dcdcdc
whitesmoke
#f5f5f5
white
#ffffff

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

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

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

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

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

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

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

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

1桁のカラーコード

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

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

#000000
#111111
#222222
#333333
#444444
#555555
#666666
#777777
#888888
#999999
#AAAAAA
#BBBBBB
#CCCCCC
#DDDDDD
#EEEEEE
#FFFFFF

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」は似ていますが全然違います。

#0F0F0F
#F0F0F0

「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ほど薄い。

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

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ