16進数、HEXのカラーコードで透明度を指定したい場合。

16進数のカラーコード。

CSSで色を指定する際、#からはじまる6桁の英数字、16進数のカラーコードを使うことが多い。

カラーピッカーで感覚的に作った色でも、ロゴやイメージカラーと合わせるために厳密に一致させたい場合でも、デザインツールですぐに数値化ができる。

16進数、16進法とは？

16進数は、「（0〜9） + (a〜f) = 16」の英数字の組み合わせ。

約1,670万色を6桁の英数字で指定でき、いわゆるフルカラーを表現させられる。

とても便利なものだが、6桁では「透明度、不透明度（アルファチャンネル）」の指定ができない。

16進数で透明度の指定をしたいときは、8桁にすると良い。

16進数、6桁 + 2桁での透明度の指定方法。

#ではじまる6桁のカラーコードに、2桁を足して、合計8桁で透明度の指定ができる。

HTML

例） 緑の文字を半透明にしたい場合。

<p class="green">半透明の緑のテキスト</p>

CSS

.green {
 color: #00ff0080;
}

実際の表示。

半透明の緑のテキスト

となる。

最後の２桁が透明度の指定部分。ffが最大の100%、80が半分の50%（半透明）、00が最小の0%（透明）となる。

（※16進数なので、半分は「5」ではなく「8」。）

数値を細かく刻み、様々な透明度を表現することも、もちろん可能。

10進数、rgbaでの透明度の指定方法。

16進数のカラーコードでの指定が逆にちょっと面倒だ、という場合は10進数のrgbaで指定することもできる。

HTML

例） 青の文字を半透明にしたい場合。

<p class="blue">半透明の青のテキスト</p>

CSS

.blue {
 color: rgba(0, 0, 255, 0.5);
}

実際の表示。

半透明の青のテキスト

となる。

最後の値が透明度の指定部分。1が最大の100%、0.5が半分の50%（半透明）、0が最小の0%（透明）となる。

数値を細かく刻むことも可能。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。