カラーコードとは？
状態:-
閲覧数:5,706
投稿日:2016-05-02
更新日:2016-05-03
HTML、CSS、SVGやその他のアプリケーションで色を表すのに使用
・色を表現するために用いられる、文字の羅列からなる符号
・色を表示するため、そのRGB値を16進法で表記した文字列
・ハッシュ記号（#）が先頭に付与される
16個の数字を使用
・0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
※A から F は、それぞれ10進での 10 から 15 を表す
16進数に大文字小文字の区別はない
→ 01213456789abcdefABCDEF
・色を表現するために用いられる、文字の羅列からなる符号
・色を表示するため、そのRGB値を16進法で表記した文字列
・ハッシュ記号（#）が先頭に付与される
16進数
16個の数字を使用
・0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
※A から F は、それぞれ10進での 10 から 15 を表す
16進数に大文字小文字の区別はない
→ 01213456789abcdefABCDEF
16進数カラーコード
16進トリプレット
RGB3組の16進数形式で色指定
・16進数6桁、3バイト(24ビット)の数値
・それぞれのバイトが色の赤・緑・青の成分を表す
トリプレットとは？
・3つの組み合わせ
例
赤/緑/青の各値は10進数
・赤33、緑150、青243
赤/緑/青の各値を16進数で表す
・赤21、緑96、青F3
16進トリプレットで表す
・2196F3
#(ハッシュマーク)から始まる6桁の16進数で色を表現
・「色を赤・緑・青の3色で表すRGB形式の各パラメータ」を2桁の16進数へ変換後、連結
→ 6桁の16進数
#2196F3
・上記カラーコードの場合、21が赤色、96が緑色、F3が青色を表している6桁未満の例
「10進数で16未満」、「16進数で10未満」の値の場合
・ゼロを前置してトリプレットを常に6桁に保つ必要がある
10進数
・4、8、16
16進数
・04、08、10
16進トリプレット
・040810
16進数3桁
16進トリプレットを短縮し、16進3桁で表現する方式もある
・このフォーマットを通常の16進トリプレットへ変換するためには、各桁を繰り返す
3桁フォーマット
・CSS仕様
※HTMLの色指定では規格外
09C
・0099CC
カラーコード → RGB ／ 16進数 → 10進数
RGB → カラーコード ／ 10進数 → 16進数
10進数
赤33、緑150、青243
計算式
10進数を「16」で割る
・商が15以下になるまで割り続ける
・商と余りを求める
R
・33÷16=2余り1
→ 21
2
-----
16 / 33
32
----
1
G
・150÷16=9余り6
→ 96
9
-----
16 / 150
144
----
6
B
・243÷16=15余り3
→ F3
15
-----
16 / 243
16
----
83
80
----
3
16進数
#2196F3
・あまり電卓
16進数カラーコード ／ 2進数
色指定具体例
16進数カラーコード
#2196F3
2進数
1000011001011011110011
ビット ／ バイト
ビット(bit)
・2進数の単位（桁）
バイト(byte)
・1バイト＝8ビット
1バイト＝8ビット
・16進数で00からFFまでの数値を表す
| - | R | G | B |
|---|---|---|---|
| バイト | 1byte | 1byte | 1byte |
| ビット | 8bit | 8bit | 8bit |
| 16進数 | 21 | 96 | F3 |
| 2進数 | 100001 | 10010110 | 11110011 |
・16進数で0からFまでの数値を表す
| - | R | R | G | G | B | B |
|---|---|---|---|---|---|---|
| バイト | 0.5byte | 0.5byte | 0.5byte | 0.5byte | 0.5byte | 0.5byte |
| ビット | 4bit | 4bit | 4bit | 4bit | 4bit | 4bit |
| 16進数 | 2 | 1 | 9 | 6 | F | 3 |
| 2進数 | 0010 | 0001 | 1001 | 0110 | 1111 | 0011 |
・それぞれの成分の強さを最小（0）から最大（255）の範囲で表す
配置順序
・1バイト目 - 赤の値
・2バイト目 - 緑の値
・3バイト目 - 青の値
16進数カラーコード → 2進数bit
ビットの名前
1桁目
・bit0
・最右ビット(最下位ビット(LSB))
・十進数に当てはめれば、「一の位」に相当
2桁目
・bit1
3桁目
・bit2
Red
2進数
100001
| bit7 | bit6 | bit5 | bit4 | bit3 | bit2 | bit1 | bit0 |
|---|---|---|---|---|---|---|---|
| 0 | 0 | 1 | 0 | 0 | 0 | 0 | 1 |
Green
2進数
10010110
| bit7 | bit6 | bit5 | bit4 | bit3 | bit2 | bit1 | bit0 |
|---|---|---|---|---|---|---|---|
| 1 | 0 | 0 | 1 | 0 | 1 | 1 | 0 |
Blue
2進数
11110011
| bit7 | bit6 | bit5 | bit4 | bit3 | bit2 | bit1 | bit0 |
|---|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 1 | 0 | 0 | 1 | 1 |