Web制作

XDなどで良くある8桁のカラーコードの見方

XDでカラーコードが8桁なんだけどどういう事?

今回はそんな疑問にお答えしていきます。

カラーコードといえば通常6桁かRGBだと思いますが、XDのカンプでは8桁表示の時もあるので「??」となる人もいるでしょう。

一般的なカラーコード

まずは赤を通常のカラーコードで表したいと思います。

6桁(16進数)color: #ff0000;
RGBcolor: rgb(255, 0, 0);
RGBA(透過)color: rgb(255, 0, 0, 0.3);

6桁とRGBは全く同じですが、RGBAは透過率も含まれています。

上記の場合は0.3の部分が透過率となり、

  • 1.0:透過率0%(透過しない)
  • 0.5:透過率50%(半透明)
  • 0.0:透過率100%(見えない)

となります。

0.3は透明寄りになりますね。

こちらがデモになります。

See the Pen
通常のカラーコード
by junpei (@junpei-sugiyama)
on CodePen.

 

8桁のカラーコード

それでは本題の8桁カラーコードの説明です。

8桁のカラーコードの場合、下2桁は透過率を表します。

下2桁が表す透過率は以下になります。

透過率下2桁
0%(透過しない)FF
5%F2
10%E6
15%D9
20%CC
25%BF
30%B3
35%A6
40%99
45%8C
50%80
55%73
60%66
65%59
70%4D
75%40
80%33
85%26
90%1A
95%0D
100%(見えない)00

つまり赤で半透明(透過率50%)にしたい場合は、

color: #ff000080;

となります。

以下はデモになります(透過率100%は当然見えません)

See the Pen
8桁のカラーコード
by junpei (@junpei-sugiyama)
on CodePen.

8桁だと透過率がイメージしにくいですね・・・

より細かい数値は以下のページで確認出来ます。

rgba変換

ただ8桁ってどういう意味?というモヤモヤがこれで晴れればと思います。

-Web制作