【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進数)で指定する方法

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%
FFFCFAF7F5F2F0EDEBE8
90%89%88%87%86%85%84%83%82%81%
E6E3E0DEDBD9D6D4D1CF
80%79% 78%77%76%75%74%73%72%71%
CCC9C7C4C2BFBDBAB8B5
70%69%68%67%66%65%64%63%62%61%
B3B0ADABA8A6A3A19E9C
60%59%58%57%56%55%54%53%52%51%
999694918F8C8A878582
50%49%48%47%46%45%44%43%42%41%
807D7A787573706E6B69
40%39%38%37%36%35%34%33%32%31%
6663615E5C595754524F
30%29%28%27%26%25%24%23%22%21%
4D4A474542403D3B3836
20%19%18%17%16%15%14%13%12%11%
33302E2B292624211F1C
10%9%8%7%6%5%4%3%2%1%
1A1714120F0D0A080503
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)
yellowrgb(255,255,0)
green rgb(0,128,0)
blue rgb(0,0,255)
purplergb(128,0,128)
pinkrgb(255,192,203)
grayrgb(128,128,128)
whitergb(255,255,255)
black rgb(0,0,0)

まとめ:不透明度をカラーコードで指定する方法

HEXカラーコードの後ろに2桁付け加えるか、RGBカラーコードの後ろにアルファ値を付け加えることで簡単に不透明度を指定することができます!

コーディング時は、素早くデザイン通りの不透明度を指定できるように、1番使いやすい方法を試してみてください。

コーディング用の別記事もよかったら読んでみてくださいね!

⬇️Photoshopのフォントウェイトをコーディング用に変換

とりとん
とりとん

最後まで読んでいただきありがとうございました!


\ ぽちっと応援お願いします♪ /
ブログランキング・にほんブログ村へ人気ブログランキングへ
タイトルとURLをコピーしました