カラーコードで透明度を指定したいとき。(16進数6桁+2桁で。)|デザイナー、コーチ、ディレクターズメモ|井川

igawa design.

Memo

カラーコードで透明度を指定視したいとき。(16進数+2桁で。)

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

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

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

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

約1670万色を6桁で指定でき、いわゆるフルカラーを表現させる、とても便利なものだ。

ただし、6桁では「透明度(アルファチャンネル)」の指定ができない。

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


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

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

HTML

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

<p class="green">半透明の緑のテキスト</p>
CSS
.green {
 color: #00ff0080;
}

半透明の緑のテキスト

となる。

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

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


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

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

HTML

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

<p class="blue">半透明の青のテキスト</p>
CSS
.blue {
 color: rgb(0, 0, 255, 0.5);
}

半透明の青のテキスト

となる。

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

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

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


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

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。