よく使うCSSのカラーコードについて

■ はじめに

普段、何気なく使っているCSSのカラーコードについて、記事にしましたのでご覧下さい。
この記事について得られる事は以下の通りです。

・カラーコードの構成・仕組み
・カラーコードの記述（短縮方法）

■ 16進数のカラーコード構成

.test {
  color: ＃112233;
}

最初の2桁(11):赤
次の2桁(22):青
最後の2桁(33):緑
で構成し、16進数で表現されている

16進数 → 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

・何故、10進数ではないのか

→ １０進数では色の情報量が不足し色を表現しきれない為。

10進数 → 10*10*10*10*10*10 = 1,000,000
16進数 → 16*16*16*16*16*16 = 16,777,216

■ 色の指定方法について

- 16進数
#112233

→ 最も使用頻度が高い

- 16進数の短縮した書き方
#ffffff　→　#fff
#112233　→　#123
#ff0000　→　#f00

→ 赤青緑の2桁が同じであれば短縮できる


- キーワードで指定する
red

→ 要素に色をつけて分かりやすくする等。一時的に使用する

コードを短縮することで、素早くスッキリした形で書けて修正も簡単。
但し、会社やチーム等で指定がある場合は指示に従う。

ただ、16進数とキーワードは混同させず、どちらを使うか事前に決めておいた方が良い。
チーム開発で書いたコードを後から見直すと、ごっちゃになっていました。

他にもRGBやHSLといった、色の他に透過度も指定した方法もありますが、ここでは割愛します。