【CSS】不透明度をカラーコードで指定する便利な方法

CSSで不透明度80％に指定するとき、

opacityプロパティか、HEX(16進数)か、RGBAの3通りがあります。

例えば背景色に指定する場合は以下のようになります。

CSS

/* opacityプロパティで指定 */
.A{
    background-color: #000; /* ← rgb(0,0,0);でもOK */
    opacity: 0.8;
}

/* HEXで指定 */
.B{
    background-color: #000000CC;
}

/* RGBAで指定 */
.C{
    background-color: rgba(0,0,0,0.8);
}

実際に3通りを比べてみても全く同じ不透明度で表示されています。

DEMO

See the Pen opacity by とりとん (@darakerutoriton) on CodePen.

今回は、HEXとRGBを使用した不透明度の指定方法をまとめてみました。

この記事の内容は・・

不透明度をHEX(16進数)で指定する方法
不透明度をRGBAで指定する方法
まとめ：不透明度をカラーコードで指定する方法

不透明度をHEX(16進数)で指定する方法

HEX(16進数)は「#000000」のような6桁のよく見かけるカラーコードですが、

この6桁に下2桁追加することで不透明度を指定することができます。

「#000000CC」のように任意のカラーコードの後ろにそのまま2桁付け加えるだけでOK！

個人的に1番便利だと思うのは、このHEXで指定する方法ですが、何度も使う機会がないと数値を覚えておくのは大変なので、備忘録としてまとめました。

※1％毎の細かい数値が知りたい方は「もっと細かく見る」に0％～100％の数値を載せているので、参考にしてください。

不透明度	カラーコード+〇〇
100%(濃)	FF
90%	E6
80%	CC
70%	B3
60%	99
50%	80
40%	66
30%	4D
20%	33
10%	1A
0%(薄)	00

もっと細かく見る

100%	99%	98%	97%	96%	95%	94%	93%	92%	91%
FF	FC	FA	F7	F5	F2	F0	ED	EB	E8
90%	89%	88%	87%	86%	85%	84%	83%	82%	81%
E6	E3	E0	DE	DB	D9	D6	D4	D1	CF
80%	79%	78%	77%	76%	75%	74%	73%	72%	71%
CC	C9	C7	C4	C2	BF	BD	BA	B8	B5
70%	69%	68%	67%	66%	65%	64%	63%	62%	61%
B3	B0	AD	AB	A8	A6	A3	A1	9E	9C
60%	59%	58%	57%	56%	55%	54%	53%	52%	51%
99	96	94	91	8F	8C	8A	87	85	82
50%	49%	48%	47%	46%	45%	44%	43%	42%	41%
80	7D	7A	78	75	73	70	6E	6B	69
40%	39%	38%	37%	36%	35%	34%	33%	32%	31%
66	63	61	5E	5C	59	57	54	52	4F
30%	29%	28%	27%	26%	25%	24%	23%	22%	21%
4D	4A	47	45	42	40	3D	3B	38	36
20%	19%	18%	17%	16%	15%	14%	13%	12%	11%
33	30	2E	2B	29	26	24	21	1F	1C
10%	9%	8%	7%	6%	5%	4%	3%	2%	1%
1A	17	14	12	0F	0D	0A	08	05	03
0%
00

不透明度をRGBAで指定する方法

RGBは、赤・緑・青の三原色でカラーを指定する方法です。

これにA(アルファ値)を追加することで不透明度の指定ができます。

アルファ値では透明度を指定できるので、数値が大きいほど濃く、数値が小さいほど透明になります。

「rgba(255,255,255,0.8)」のように任意のRGBの後ろに0～1の数値で指定！

RGBの基本色は以下の通りです。

※ちなみに基本色は「background-color: #red;」というように指定することも可能です。

色	カラー	RGB
赤	red	rgb(255,0,0)
橙	orange	rgb(255,165,0)
黄	yellow	rgb(255,255,0)
緑	green	rgb(0,128,0)
青	blue	rgb(0,0,255)
紫	purple	rgb(128,0,128)
桃	pink	rgb(255,192,203)
灰	gray	rgb(128,128,128)
白	white	rgb(255,255,255)
黒	black	rgb(0,0,0)