- 表紙
- まとめ
- イメージ
- 数学
数学のまとめ
「16進数カラーコード」とは
Web上の色を16進数を使った6桁の数で指定すること。
RGB
Web上の色は赤緑青の3色で表し, 各色は256段階で指定する.
記法
RGBの各色を2桁ずつ計6桁の数を 「#」の後に並べて色を表す.
A. 16進数で１桁の数
$0$ から $15$ までの数は, 16進数では $0$, $1$, $2$, $\cdots$, $9$, $a$, $b$, $c$, $d$, $e$, $f$ の16個の数字を使って1桁で表される.
B. 16進数で２桁の数
$16$ から $255$ までの数は, 16進数では $10$ から $ff$ までの2桁の数字で表される.
C. RGBの256段階
RGBの各色256段階は，$0$, $1$, $2$, $\cdots$, $9$, $a$, $b$, $c$, $d$, $e$, $f$ の16個の数字を使って16進数で２桁で表記することができる。
ポイント解説
● #000000：(R, G, B) = (0, 0, 0)
●#ffffff：(R, G, B) = (255, 255, 255)
●#ff0000：(R, G, B) = (255, 0, 0)
●#00f100：(R, G, B) = (0, 241, 0)
●#0000fa：(R, G, B) = (0, 0, 250)
●#ffff00：(R, G, B) = (255, 255, 0)
●#00ffff：(R, G, B) = (0, 255, 255)
●#6f3b4e：(R, G, B) = (111, 59, 78)
A
16進数と10進数の対応
| Hex | $a$ | $b$ | $c$ | $d$ | $e$ | $f$ |
| 通常 | 10 | 11 | 12 | 13 | 14 | 15 |
例
CSSで虹色を表現した.
イメージ
Web上の色は、RGBで指定します。
これは16進数の理屈で成り立っています。
今回は、Webカラーを数学的に説明して、CSSで虹色を作るコードを紹介してみました！
Webカラーのイメージ
RGBとHexのイメージ
赤色の種類
#010000から#ff0000までの変遷を見てみましょう。
#010000
#0f0000
#100000
#200000
#300000
#400000
#500000
#600000
#700000
#800000
#900000
#a00000
#b00000
#c00000
#d00000
#e00000
#f00000
#ff0000
WebカラーのCSSコード
虹色のCSSコード
HTMLのタグはCSSで着色することができます。
p {
background: linear-gradient(45deg, #9400D3, #4B0082, #0000FF, #00FF00, #FFFF00, #FFA500, #FF0000);
height: 25vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}このコードは、HTMLの「段落」に虹を作るコードです！
きれいに作れました！
数学の理解
Web上の色は、RGBで指定します。ここには16進数があります。
RGBは、例えば白色を (255, 255, 255) と表します。
これは9桁です。Web上で色を指定する際、指示する情報量は少ない方が良いです。
白色は #ffffff とも表せます。これは6桁なので情報量が少ないです。
#ffffff のはじめの2桁がRの255、真ん中の2桁がGの255、最後の2桁がRの255を表しています。
この ff =255 を理解しましょう。
Hex（16進数）の理解
Hexについて
0〜255の256個の数は，16進数では2桁で表すことができます。
実際に数えてみましょう
15まで数える（記号の用意）
0から9までは普通に数えて，10から15までは次の記号と対応させる。
| Hex | $a$ | $b$ | $c$ | $d$ | $e$ | $f$ |
| 通常 | 10 | 11 | 12 | 13 | 14 | 15 |
32まで数える（繰り上がり）
普通の数字で16以上は，Hexでは２桁で表示できる。
| Hex | $10$ | $11$ | $12$ | $13$ | $14$ | $15$ | $16$ | $17$ | $18$ |
| 通常 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| Hex | $19$ | $1a$ | $1b$ | $1c$ | $1d$ | $1e$ | $1f$ | $20$ |
| 通常 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
上の位（16ずつ増える）
Hex表記では２桁の上の位が１大きくなると，普通の数値では16だけ大きくなることを表す。
| Hex | $20$ | $30$ | $40$ | $\cdots$ | $90$ | $a0$ |
| 通常 | 32 | 48 | 64 | - | 144 | 160 |
| Hex | $b0$ | $c0$ | $d0$ | $e0$ | $f0$ |
| 通常 | 176 | 192 | 208 | 224 | 240 |
255まで数える
$f$ から始まる数字の対応を見る。通常の数では240から255までに対応する。
| Hex | $f0$ | $f1$ | $f2$ | $f3$ | $f4$ | $f5$ | $f6$ | $f7$ | $f8$ |
| 通常 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 |
| Hex | $f9$ | $fa$ | $fb$ | $fc$ | $fd$ | $fe$ | $ff$ |
| 通常 | 249 | 250 | 251 | 252 | 253 | 254 | 255 |
この数え方で ff=255 としています！
