XDでカラーコードが8桁なんだけど、どういう事？
今回は、そんな疑問にお答えしていきます。
カラーコードといえば通常6桁かRGBだと思いますが、XDのカンプでは8桁表示の時もあるので「？？」となる人もいるでしょう。
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇♂️）
（有料になっていたらすいません🙇♂️）
XDなどで良くある8桁のカラーコードの見方と一覧
カラーコードは、6桁が一般的かと思います。
なので、まず最初に6桁のカラーコードから見てみましょう。
6桁のカラーコード
まずは、赤を通常のカラーコードで表したいと思います。
| 6桁（16進数） | color: #ff0000; |
| RGB | color: rgb(255, 0, 0); |
| RGBA（透過） | color: rgba(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%）にしたい場合は、CSSの書き方はこちらになります。
color: #ff000080;そしてこちらがサンプル（デモ）になります（透過率100%は当然見えません）。
See the Pen
8桁のカラーコード by junpei (@junpei-sugiyama)
on CodePen.
8桁だと、透過率がイメージしにくいですね・・・
より細かい数値は、以下のページで確認出来ます。
まとめ
今回は、8桁のカラーコードの見方と一覧を解説しました。
この記事は自分で意外なほどアクセスされているので、これで『8桁ってどういう意味？』というモヤモヤがこれで晴れればと思います。
以上になります。
この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！
