
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大無料特典あり🎁