グローディアのサービス一覧はこちら
 

HTMLカラーコードについて

カラーコードとはなんぞや?

HTMLとかCSSを触ったことがある人なら一度は見たことがある#から始まる6桁コードのこと。

例:#FF00FF#008000

ちなみにWikipediaには

HTMLなどのコンピュータ言語において、色を表示するためにそのRGB値を十六進法で表記した文字列。

とある。(カラーコード – Wikipediaより)

普段はなんとなく「この色がいいかな~」と中身を知らないまま使っていたりしていたので真面目に調べることにした。

24ビットカラーについて

現在主に使われているカラーコードは24ビットカラーであり、16777216色となる。
24ビットカラーのことをトゥルーカラー、フルカラーなどと呼んだりする。 RGB値をそれぞれ8ビットずつ、16進数2桁ずつで表している。(10進数でいうと0~255)
#の後ろにR→G→Bの順に繋げるだけで表せられる。

例:RGBが(255,128,0)の色のカラーコード
・R:255の場合→16進数ではFF
・G:128の場合→16進数では80
・B:0の場合→16進数では00
これらを合わせて#FF8000となる。

ちなみにRGB各色の値が同じだった場合はモノクロの色となる。

また、一部の色にはカラー名がついており、HTMLやCSSでカラーコードではなくカラー名で色が指定できる。
例:Purple(#800080)Indigo(#4B0082)など
参考ページ:W3Schools Online Web Tutorials / HTML Color Names

32ビットカラーについて

32ビットカラーは24ビットカラーに8ビット分の情報が付加されている。
基本的に追加された8ビットにはアルファ値(透明度)が追加される。
RGBにAlpha(アルファ)が追加されるためRGBAとも呼ぶ。

16進数のため、
00→透明度0%
FF→透明度100%
80(10進数で128)→透明度50%(128/256=0.5)

透明度分の8ビットは24ビットカラーの末尾につけて#FF800080のように扱う。

ちなみに30ビットカラー(ディープカラー)やさらにビット数が大きいカラーがあるが32ビットカラーは24ビットカラーに透明度を足しただけのものであって他のものと違って色数が増えているわけではない。

短縮カラーコード

稀にCSSでは#の後ろに3桁だけのカラーコードがある。
それは短縮カラーコードであり、上記24ビットカラーを短縮しているものである。

通常の6桁のカラーコードに戻すためにはRGBそれぞれでコードを繰り返せばよい。

例えば#F00の場合は#FF0000となる。

Webセーフカラー

フルカラーに対応していない環境下でも同じ色に使えるように制定された216色のことである。
昔のOSなどは色数が限られていたため、216色のセーフカラーと40色のシステムのカラーを合わせた8ビットカラー(256色)しか使えないということがあった。

・0 (0%)
・3 (20%)
・6 (40%)
・9 (60%)
・C(12) (80%)
・F(15) (100%)

の6つのキーを使い3桁で表示される。(6×6×6=216色)

昔はどの環境でも同じ様に見えるようにWebセーフカラー考慮して色を付けなければいけなかった。
しかし現在ではほとんどフルカラーのため、特に考慮する必要はない。
また、蛍光色などが多いため現在のデザインには合わないようである。

調べてみて

カラーコードは結構単純にできていて、RGBの数値さえわかれば簡単に手計算でも出せることがわかった。
(正直もっと複雑なものかと思っていた)
3桁の短縮カラーコードの変換も簡単だし中身を知ってしまえばアッサリであった。

データ量からフルカラーを256色に変換することがあったことは知っていたが、
256色のうちの216色が決まっているということも初耳だった。

※記事の内容は保証はしておりません(執筆時期や実施環境により挙動が変わるものがある為)。
別途検証してご利用いただくことをおすすめいたします。

グローディアのサービス一覧はこちら