XDでカラーコードが8桁なんだけどどういう事？
今回はそんな疑問にお答えしていきます。
カラーコードといえば通常6桁かRGBだと思いますが、XDのカンプでは8桁表示の時もあるので「？？」となる人もいるでしょう。
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
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%）にしたい場合は、
color: #ff000080;となります。
以下はデモになります（透過率100%は当然見えません）
See the Pen
8桁のカラーコード by junpei (@junpei-sugiyama)
on CodePen.
8桁だと透過率がイメージしにくいですね・・・
より細かい数値は以下のページで確認出来ます。
まとめ
今回は8桁のカラーコードの見方と一覧を解説しました。
この記事は自分で意外なほどアクセスされているので、これで『8桁ってどういう意味？』というモヤモヤがこれで晴れればと思います。
以上になります。
