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
Hexの理解
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 |
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の「段落」に虹を作るコードです！
きれいに作れました！
