【CSS】#fffと#eee、#111と#000 の間はどのくらいグラデーションになるか

CSSで色を指定するときによく使う#fff、#eeeなどの3桁コード。便利だけど色の差が若干激しい？16進数ではどのくらいのグラデーションになるか調べてみた。

※参考：【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 - クモのようにコツコツと

【目次】

CSSの色指定方法
16進数カラーコードとは
16進数カラーコードの3桁表示！
#fff→#000の階調（3桁）
#fffと#eeeの間（6桁）
#000と#111の間（6桁）
まとめ

CSSの色指定方法

CSSでは16進数のカラーコードをよく使います。カラーモードはRGB（レッド、グリーン、ブルー）の3色です。

このような形です。

/*16進数*/
color: #ff0000;

頭にハッシュ#が付き、そのあとに6桁の英数字が続く。ff0000と打つと真っ赤（一番濃いレッド）な色になります。

色の指定、他にはこんな書き方もあります。（全て同じ色を表しています）

/*10進数*/
color: rgb(255, 0, 0);

/*パーセント*/
color: rgb(100%, 0%, 0%);

/*カラーネーム*/
color: red;

10進数は見慣れていますね。RGBの三色をカンマで区切り、最大値は255です。一色目のRが最大値ということ。
パーセントもわかりやすいですね。RGBの一色目のRが100%で最大値。
色の名前を直接指定することもできる。ただし、中間的な色名はあまり用意されていないため微妙なニュアンスが指定しにくい。

RGBモードの階調は一色あたり256階調です。パーセントだと1%あたり2.56階調に相当し、若干刻みが荒いため、10進数の方が細かい指定ができます。（最大値は255。1足りないのは0からカウントするためです）

16進数カラーコードとは

さて、この256という数字は一体どこかきたのでしょう。正解は16進数の二乗（10進数で書くと16×16=256）です。

では16進数は一体どう表現するのか。最初の例にあったようにローマ字の力を借ります。0〜9の10個の数字に加え、A〜Fの6つのローマ字を加えた合計16（最大値はF）。

10進数と16進数を比較するとこうなる（太字は桁の変わり目）。

10進数	16進数	（2進数）
0	0	0
1	1	1
2	2	10
3	3	11
4	4	100
5	5	101
6	6	110
7	7	111
8	8	1000
9	9	1001
10	A	1010
11	B	1011
12	C	1100
13	D	1101
14	E	1110
15	F	1111
16	10	10000

10進数は9を超えると2桁目に入る
16進数はローマ字応援団のお陰で10進数での16でようやく2桁目に入る
（おまけ）2進数はさらに激しいペースで桁が増えていくのがわかる*1

10進数の二乗10×10は100で2桁と3桁の起点。ここから-1すると99で、2桁の最大値です。

同様に16進数の二乗10×10（10進数では16×16）も100（10進数では256）で3桁の起点。-1すると2桁の最大値FF（10進数では255）になります。

10進数の二乗10×10は100（3桁の起点）。-1すると99（2桁の最大値）
16進数の二乗10×10も100（3桁の起点）。-1するとFF（2桁の最大値）

16進数のFFは10進数では255ですが、0からカウントすると一つ増えるため、16進数の2桁のみ（0〜FF）で256階調を表現できるわけです。

そういえば最初の16進数は6桁でしたね。これはRGBの3色を16進数の2桁ずつで並べた（3色x2桁=6桁）ことを意味します。

/*16進数*/
color: #ff0000;

#＝16進数カラーコードだよ
最初の2桁はRで値はffだよ
次の2桁はGで値は00だよ
最後の2桁はBで値は00だよ

16進数カラーコードは、パーセント（100階調）よりも細かい256階調を6桁で表現できます。6桁数字を一度にコピーできてコンパクト！

16進数カラーコードの3桁表示！

さてこの6桁の16進数カラーコードですが、さらに楽な書き方があります。なんと、たったの3桁です！

/* カラーコード（6桁） */

color: #ff0000;

/* カラーコード（3桁） */
color: #f00;

この二つは同じ色になります！3桁だとCSSではff、00など1桁目と2桁目に同じ数字が並んでいると解釈されます！

ちなみに、RGBの格色を最大値fにするとこうなる。

See the Pen glay color1+ by イイダリョウ (@i_ryo) on CodePen.

RGB全てがfはホワイト
RGB全てが0はブラック
Rだけfはレッド
Gだけfはグリーン
Bだけfはブルー
GとBがfはシアン
RとBがfはマゼンタ
RとGがfはイエロー

三色が均等な数字だと白や黒などの無彩色になる。RGBを1色ずつ最大値fにすると文字通りレッド、グリーン、ブルー。RGB2色ずつ最大値fにするとシアン、マゼンタ、イエロー。

CSSはこうなる

.fff { background: #fff;}
.c000 { background: #000;}
.cf00 { background: #f00;}
.c0f0 { background: #0f0;}
.c00f { background: #00f;}
.c0ff { background: #0ff;}
.cf0f { background: #f0f;}
.cff0 { background: #ff0;}

原色は目がチカチカしますねw なお、色の三原色についてはこちらで解説しています。

※参考：【配色】色相環のH値をいろいろ測ってみた（HSB、マンセル、オストワルト、PCCS、Web配色ツール） - クモのようにコツコツと

#fff→#000の階調（3桁）

RGBの3色を均等に増やすと無彩色のグラデーション（ホワイト→グレー→ブラック）になります。カラーコード（3桁）で表すとこうなる。

See the Pen glay color1 by イイダリョウ (@i_ryo) on CodePen.

RGBの3桁を最小値0から最大値Fまで一つずつ増やしている
16進数でいうと、1桁目、2桁目とも同じ数字で00、11、22という感じで上がっていることになる
256階調でいうと、1色進むたびに16階調ずつ上がっていることになる

CSSはこうなる。

.fff { background: #fff;}
.eee { background: #eee;}
.ddd { background: #ddd;}
.ccc { background: #ccc;}
.bbb { background: #bbb;}
.aaa { background: #aaa;}
.c999 { background: #999;}
.c888 { background: #888;}
.c777 { background: #777;}
.c666 { background: #666;}
.c555 { background: #555;}
.c444 { background: #444;}
.c333 { background: #333;}
.c222 { background: #222;}
.c111 { background: #111;}
.c000 { background: #000;}

カラーコード（3桁）はとても書きやすくてよく使いますが、考えてみると一つ一つの間は16階調飛びになっているんですね。色の差が若干激しい印象。

#fffと#eeeの間（6桁）

カラーコード（3桁）の間の階調は実際のところどんな感じなんだろう。#fffと#eeeの間をカラーコード（6桁）で調べてみた。

#fff＝#ffffff、#eee＝#eeeeee
#ffffffの次は1桁目が一つ減るので#fefefe、その次は#fdfdfd
1桁目の最小値#f0f0f0までいいくと、次は2桁目が一つ減って#eeeeeeになる。

どうですか。ちゃんとグラデーションになっていますよね！

CSSはこうなった。

.ffffff { background: #ffffff;}
.fefefe { background: #fefefe;}
.fdfdfd { background: #fdfdfd;}
.fcfcfc { background: #fcfcfc;}
.fbfbfb { background: #fbfbfb;}
.fafafa { background: #fafafa;}
.f9f9f9 { background: #f9f9f9;}
.f8f8f8 { background: #f8f8f8;}
.f7f7f7 { background: #f7f7f7;}
.f6f6f6 { background: #f6f6f6;}
.f5f5f5 { background: #f5f5f5;}
.f4f4f4 { background: #f4f4f4;}
.f3f3f3 { background: #f3f3f3;}
.f2f2f2 { background: #f2f2f2;}
.f1f1f1 { background: #f1f1f1;}
.f0f0f0 { background: #f0f0f0;}
.eeeeee { background: #eeeeee;}

16進数のA〜Fは馴染みが薄いため、私はffのひとつ下がfeになるとかの認識はこれまで曖昧でした。調べてみて良かったです。

#000と#111の間（6桁）

今度はブラック寄りの方を見ていきましょうか。#000と#111の間です。こうなりました。　

See the Pen glay color3 by イイダリョウ (@i_ryo) on CodePen.

#000＝#000000、#111＝#111111
#000000の次は1桁目が一つ増えてので#010101、その次は#020202
1桁目の最大値#0f0f0fまでいいくと、次は2桁目が一つ増えて#111111になる。

方法は先ほどと同じ方法で、順番は最小値からだんだんとあげていきました。

うーむ、私の環境ではあまり階調を感じられないぁ。限りなく黒に近いグレー…

CSSはこうなります。

.c000000 {background: #000000;}
.c010101 {background: #010101;}
.c020202 {background: #020202;}
.c030303 {background: #030303;}
.c040404 {background: #040404;}
.c050505 {background: #050505;}
.c060606 {background: #060606;}
.c070707 {background: #070707;}
.c080808 {background: #080808;}
.c090909 {background: #090909;}
.c0a0a0a {background: #0a0a0a;}
.c0b0b0b {background: #0b0b0b;}
.c0c0c0c {background: #0c0c0c;}
.c0d0d0d {background: #0d0d0d;}
.c0e0e0e {background: #0e0e0e;}
.c0f0f0f {background: #0f0f0f;}
.c111111 {background: #111111;}