サイトを作っていて、例えば、固定式のヘッダーなど何かの要素を表示しつつ、うっすらと重なった部分が見えるようにしたいというケースはありませんか？
要素全体を透過させるなら、opacyやtransparencyなどで指定すれば簡単！ですが、これだと、全部が透過されて、その中にある文字なども透明化されるのでちょっと具合悪いですね。
そして一番確実な方法として紹介されているのが、RGB(A)を使った方法。HEXの代わりに使えば、確実かつ簡単に背景色のみを透過させることができます（これについてはいろいろなところで紹介されているので割愛します）。
確実ならそれを使えばいいんじゃない？ではあるのですが、私が困ったのはこれをWordPressのカスタマイザー上で指定させるにはどうする？というケースです。
WordPress標準のカラーピッカーはすべてHEX値で保存されるので、RGB(A)として扱うには以下のような措置が必要なんです。
- 通常のカラーピッカーに透過度を追加する
- HEX値で保存されているデータをRGB(A)へ変換して出力する
まず1の方法ですが、通常のカラーピッカーコントロールにアルファ（透過）要素を追加する方法がGitHubなどでいくつか紹介されてはいるものの、実際に実装してみるとエラー続発でなかなかうまくいきません（私の能力の問題なのかも．．）。
続いて2の方法では、計算式によってHEXをRGB(A)には変換できるものの、透過度を示す最後の値については指定して出力するか、何等かの方法で値を与えて統合するしかないんです。しかも、いろいろ調べると全ての色について正確に変換できない場合があるようで、確実性がないことからちょっと使いにくいです。
そこで見つけたのが、本当に単純な方法。
それは、通常の6桁のHEX値に透過度を示す2桁を追加するだけというシンプルなものです。
例えば、黒色を示す「#000000」の後ろに「80」を付けて、「#00000080」とするだけで、50%透過させることができるんです。
実は、【HABONE】テーマに固定ヘッダー機能を追加していて、できれば色や透明度を自由にできるようにしたいなぁ、と思いつつどうしてもうまくいかない中、発見した方法、まさかこんなに単純だったとは．．。
ただ、この方法は、古いブラウザでは機能せず、無視されて単色として表示されてしまうのでご注意を！
I Can UseでHEXの透過設定が使用できるブラウザとバージョンの確認ができます
ちなみにHEXでの透過設定はInternet Explorer(全バージョン)では使えませんのでご注意を！
ただ、この透過度の2桁は特に法則性がなく、覚えるのは難しいようですので、以下を参考に設定するとよいでしょう。
| 透過度 | 100% | 95% | 90% | 85% |
| 2桁コード | FF | F2 | E6 | D9 |
| 透過度 | 80% | 75% | 70% | 65% |
| 2桁コード | CC | BF | B3 | A6 |
| 透過度 | 60% | 55% | 50% | 45% |
| 2桁コード | 99 | 8C | 80 | 73 |
| 透過度 | 40% | 35% | 30% | 25% |
| 2桁コード | 66 | 59 | 4D | 40 |
| 透過度 | 20% | 15% | 10% | 5% |
| 2桁コード | 33 | 26 | 1A | 0D |
