XDでカラーコードが8桁なんだけどどういう事？
今回はそんな疑問にお答えしていきます。
カラーコードといえば通常6桁かRGBだと思いますが、XDのカンプでは8桁表示の時もあるので「？？」となる人もいるでしょう。
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桁ってどういう意味？』というモヤモヤがこれで晴れればと思います。
以上になります。
コーディングの時給と作業効率を上げる！
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇
2023年12月31日まで！5大無料特典あり🎁
