• 要点
  • イメージ
  • 数式
  • コード

Webカラー(Hex)とは

学習の道標

目次
  • 要点:ポイントまとめ
  • イメージ《文系》:さまざまな色を見ます
  • 数式:表記の仕組みを理解します
  • コード:CSSコードを知ります

Webカラー

Web上の色はRGBカラーで指定される。それぞれ0〜255までの256段階で表記される。

$0$, $1$, $2$, $\cdots$, $9$, $a$, $b$, $c$, $d$, $e$, $f$ を利用した16進数表記によって,RGBを6桁で表す方法を16進数カラー表記(Hex)という。

チェックテスト

線分の内分点

Webカラーのイメージ

RGB表記とは光の3原色と呼ばれる「赤」「緑」「青」色のことです。

Hex表記

(R, G, B) = (0, 0, 0)
Hex:#000000

(R, G, B) = (255, 255, 255)
Hex:#ffffff

白色

(R, G, B) = (255, 0, 0)
Hex:#ff0000

赤色

(R, G, B) = (0, 241, 0)
Hex:#00f100

緑色

(R, G, B) = (0, 0, 250)
Hex:#0000fa

(R, G, B) = (255, 255, 0)
Hex:#ffff00

黄色

(R, G, B) = (0, 255, 255)
Hex:#00ffff

水色

(R, G, B) = (111, 59, 78)
Hex:#6f3b4e

赤色の種類

#010000から#ff0000までの変遷を見てみましょう。

#010000

STEP
1

#090000

STEP
2

#0a0000

STEP
3

#0b0000

STEP
4

#0f0000

STEP
5

#100000

STEP
6

#110000

STEP
7

#1f0000

STEP
8

#200000

0

STEP
9

#300000

STEP
10

#400000

STEP
11

#500000

STEP
12

#600000

STEP
13

#700000

STEP
14

#800000

STEP
15

#900000

STEP
16

#a00000

STEP
17

#b00000

STEP
18

#c00000

STEP
19

#d00000

STEP
20

#e00000

STEP
21

#f00000

STEP
22

#ff0000

STEP
23

WebカラーのHexの理解

主張

0〜255の256個の数は,16進数では2桁で表すことができる。

$0$, $1$, $2$, $\cdots$, $9$, $a$, $b$, $c$, $d$, $e$, $f$ の記号を利用する。

記号を用意する

通常の0から15までの数字を次の記号と対応させる。

$0$, $1$, $2$, $\cdots$, $9$, $a$, $b$, $c$, $d$, $e$, $f$.

Hex通常
a10
b11
c12
d13
e14
f15
繰り上がる

通常の数字で16以上の値は,Hexでは2桁で表示できる。

Hex通常
1016
1117
1218
1319
1420
1521
1622
1723
1824
1925
1a26
1b27
1c28
1d29
1e30
1f31
2032
16ずつ増加させる

Hex表記では最上位の位が1大きくなると,通常の数値では16だけ大きくなることを表す。

Hex通常
2032
3048
4064
5080
6096
70112
80128
90144
a0160
b0176
c0192
d0208
e0224
f0240
255まで対応させる

通常の値で240から255までの対応を見ましょう。

Hex通常
f0240
f1241
f2242
f3243
f4244
f5245
f6246
f7247
f8248
f9249
fa250
fb251
fc252
fd253
fe254
ff255

WebカラーのCSSコード

虹色のCSSコード

HTMLで記述したタグには、CSSで着色することができます。

p {
  background: linear-gradient(45deg, #9400D3, #4B0082, #0000FF, #00FF00, #FFFF00, #FFA500, #FF0000);
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

コメントをどうぞ