16進法プラスアルファで濃度の指定を！透過カラーの作成方法！白背景なら自由度増加

ブログの基本カラーや記事内の装飾で色を決めるのは悩みどころです。

DTPに慣れていればCMYKの数値で大体の色は想像がつきます。
WEBのコーディングに慣れていれば16進法の色が想像できます。

映像に慣れていればRGBの数値で色が分かるのかは不明ですが、
各分野で使用している言語や単位なら得意分野かもしれませんが、全く触れた事がなければさっぱり分かりません。

ブログ等のカスタマイズをしていると16進法は切っても切れない縁があります。

最近は微妙な色作りはGoogle上でもできます。
DTPの経験が長いと色の濃度は％で指定したい気持ちが大きい。

今回は16進法の濃度指定についてご紹介します。

Contents

16進法の濃度

webで使用される16進法による色数は無限に広がります。

webセーフカラーだけを使用しているとどうしても限界があります。
そのような場合は、好きな色を探して反映します。

webカラーを紹介してくれるサイトはとても便利です。
パステルカラーや原色カラー、和の色や洋の色等、好みの色を探せます。

グラデーションで並べて表示してくれると好みの色も見つけやすい。

画像の上にボタンを付けたり、文字を挿入する際、半透明にしたい事もあります。
そのような場合は載せる色を色を透過すれば良い。

例えばリンクなどのブロックで色が薄くなったりする場合があります。
ボタンを透過してリンクできるボタンだと意思表示しています。

当ブログでも各所で透過色を使用しています。
特に画像の上の窓や文字などが、それに当たります。

下記の表は実際の16進法での指定後、それぞれ％指定で色を出したものです。
この記事欄の背景が白では無い為、白の背景ボックスに挿入しています。

背景が白であれば上記のように%で指定された色が忠実に再現できます。
これらの％で指定された色の下に画像や他の色が重なると透過した色になります。

下記の表はボックスの背景を「#EDFFDB」（薄いグリーン）にしたものです。
上段は白（#FFFFFF）の％になります。
したがって数値が少なくなると背景の色が出てくる為濃くなります。

主にCSSでの記載になりますが、上記の表組のように投稿内でも%指定できます。

上記の紺色#164A84の80%の場合、
RGBの指定に置き換えると「rgba(22, 74, 132, 0.5)」になります。
60％の場合は「rgba(22, 74, 132, 0.376)」

各色の指定はそれぞれに置き換える事ができます。
CMYKやRGB・HEX等、それぞれの数値が同じ色になって再現されます。
CMYKに関しては若干異なりますが、概ね似たような感じになります。
変換によっては極端に異なる事もありますが…

前述のように16進法の色指定をCSSなどで指定する場合は、とても簡単です。

6桁の16進法の数値の後ろに％指定の数値を入れるだけです。

例えば上記の「#164a84」を80％指定にしたいなら「#164a8480」という具合です。

ブラックのリンクボタンをホバー時に薄く透過させたい場合は、「#00000050」など半透明にすれば良い。
写真の画像の上に白窓を挿入する際、透けて見えるようにする場合などに有効です。

更に、記事欄の背景が白の場合なら、そのまま％指定で実際の％の色で再現できます。
あくまでも透過する為の数値なのでお間違えなく。

16進法プラスアルファの数値の記入で、色の再現が増えるかもしれません。

指定色を％で濃度を調節して出力した後、その色をRGBでの数値を確認すれば濃度を落とした16進法での数値も知る事ができます。

指定色の色の濃度は「大体」なのか「数値」なのか？というだけですが…
即座に変換してくれると便利なような気もします。

ちなみに表を作るに当たって、ブロックエディタだとプラグインを入れないと各項目の色指定ができないらしい。
サクッとできるブロックエディタですが、できない事も多いようです。
仕方がないから、表組だけをクラシックエディタで作成しました。