color

colorはテキストの色を指定するCSSプロパティである。次の方法で色を指定できる。

名前で指定

色を名前で指定する。

<div style="color: red;">red</div>
red

RGBで指定

光の三原色(赤、緑および青)を16進数で指定する。

<div style="color: #ff0000;">#ff0000</div>
#ff0000

RGB関数で指定

色を光の三原色(赤、緑および青)で指定する。

color: rgb(red, green, blue);
red
赤を0から255までの整数で指定する。
green
緑を0から255までの整数で指定する。
blue
青を0から255までの整数で指定する。
<div style="color: rgb(255, 0, 0)">rgb(255, 0, 0)</div>
rgb(255, 0, 0)

RGB関数と不透明度で指定

色を光の三原色(赤、緑および青)と不透明度で指定する。

color: rbg(red, blue, green, a);
red
赤を0から255までの整数で指定する。
green
緑を0から255までの整数で指定する。
blue
青を0から255までの整数で指定する。
a
不透明度を0から1までの数値かパーセント単位で指定する。

RGBの不透明度を0から1までの数値で指定する例を次に示す。

<div style="color: rgba(0, 0, 0, .1)">0.1</div>
<div style="color: rgba(0, 0, 0, .2)">0.2</div>
<div style="color: rgba(0, 0, 0, .3)">0.3</div>
<div style="color: rgba(0, 0, 0, .4)">0.4</div>
<div style="color: rgba(0, 0, 0, .5)">0.5</div>
<div style="color: rgba(0, 0, 0, .6)">0.6</div>
<div style="color: rgba(0, 0, 0, .7)">0.7</div>
<div style="color: rgba(0, 0, 0, .8)">0.8</div>
<div style="color: rgba(0, 0, 0, .9)">0.9</div>
<div style="color: rgba(0, 0, 0, 1)">1.0</div>
0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9
1.0

RGBの不透明度をパーセンテージで指定する例を次に示す。

<div style="color: rgba(0, 0, 0, 10%)">10%</div>
<div style="color: rgba(0, 0, 0, 20%)">20%</div>
<div style="color: rgba(0, 0, 0, 30%)">30%</div>
<div style="color: rgba(0, 0, 0, 40%)">40%</div>
<div style="color: rgba(0, 0, 0, 50%)">50%</div>
<div style="color: rgba(0, 0, 0, 60%)">60%</div>
<div style="color: rgba(0, 0, 0, 70%)">70%</div>
<div style="color: rgba(0, 0, 0, 80%)">80%</div>
<div style="color: rgba(0, 0, 0, 90%)">90%</div>
<div style="color: rgba(0, 0, 0, 100%)">100%</div>
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

カラーチャート

HTML color
名前 カラーコード サンプル
black #000000
gray, grey #808080
silver #c0c0c0
white #ffffff
maroon #800000
red #ff0000
purple #800080
fuchsia, magenta #ff00ff
green #008000
lime #00ff00
olive #808000
yellow #ffff00
navy #000080
blue #0000ff
teal #008080
aqua, cyan #00ffff
orange #ffa500
aliceblue #f0f8ff
antiquewhite #faebd7
aquamarine #7fffd4
azure #f0ffff
beige #f5f5dc
bisque #ffe4c4
blanchedalmond #ffebcd
blueviolet #8a2be2
brown #a52a2a
burlywood #deb887
cadetblue #5f9ea0
chartreuse #7fff00
chocolate #d2691e
coral #ff7f50
cornflowerblue #6495ed
cornsilk #fff8dc
crimson #dc143c
darkblue #00008b
darkcyan #008b8b
darkgoldenrod #b8860b
darkgray, darkgrey #a9a9a9
darkgreen #006400
darkkhaki #bdb76b
darkmagenta #8b008b
darkolivegreen #556b2f
darkorange #ff8c00
darkorchid #9932cc
darkred #8b0000
darksalmon #e9967a
darkseagreen #8fbc8f
darkslateblue #483d8b
darkslategray, darkslategrey #2f4f4f
darkturquoise #00ced1
darkviolet #9400d3
deeppink #ff1493
deepskyblue #00bfff
dimgray / dimgrey #696969
dodgerblue #1e90ff
firebrickfirebrick #b22222
floralwhite #fffaf0
forestgreen #228b22
gainsboro #dcdcdc
ghostwhite #f8f8ff
gold #ffd700
goldenrod #daa520
greenyellow #adff2f
honeydew #f0fff0
hotpink #ff69b4
indianred #cd5c5c
indigo #4b0082
ivory #fffff0
khaki #f0e68c
lavender #e6e6fa
lavenderblush #fff0f5
lawngreen #7cfc00
lemonchiffon #fffacd
lightblue #add8e6
lightcoral #f08080
lightcyan #e0ffff
lightgoldenrodyellow #fafad2
lightgray, lightgrey #d3d3d3
lightgreen #90ee90
lightpink #ffb6c1
lightsalmon #ffa07a
lightseagreen #20b2aa
lightskyblue #87cefa
lightslategray, lightslategrey #778899
lightsteelblue #b0c4de
lightyellow #ffffe0
limegreen #32cd32
linen #faf0e6
mediumaquamarine #66cdaa
mediumblue #0000cd
mediumorchid #ba55d3
mediumpurple #9370db
mediumseagreen #3cb371
mediumslateblue #7b68ee
mediumspringgreen #00fa9a
mediumturquoise #48d1cc
mediumvioletred #c71585
midnightblue #191970
mintcream #f5fffa
mistyrose #ffe4e1
moccasin #ffe4b5
navajowhite #ffdead
oldlace #fdf5e6
olivedrab #6b8e23
orangered #ff4500
orchid #da70d6
palegoldenrod #eee8aa
palegreen #98fb98
paleturquoise #afeeee
palevioletred #db7093
papayawhip #ffefd5
peachpuff #ffdab9
peru #cd853f
pink #ffc0cb
plum #dda0dd
powderblue #b0e0e6
rosybrown #bc8f8f
royalblue #4169e1
saddlebrown #8b4513
salmon #fa8072
sandybrown #f4a460
seagreen #2e8b57
seashell #fff5ee
sienna #a0522d
skyblue #87ceeb
slateblue #6a5acd
slategray, slategrey #708090
snow #fffafa
springgreen #00ff7f
steelblue #4682b4
tan #d2b48c
thistle #d8bfd8
tomato #ff6347
turquoise #40e0d0
violet #ee82ee
wheat #f5deb3
whitesmoke #f5f5f5
yellowgreen #9acd32
rebeccapurple #663399

aquaとcyanのように、同じ色に複数の名前がついていることがあります。

カラーユニバーサルデザイン推奨配色セット

カラーユニバーサルデザイン推奨配色セットとは、色覚の多様性に配慮し、色で情報を伝えるための実用的なカラーパレットである。カラーユニバーサルデザイン推奨配色セットは、カラーユニバーサルデザイン推奨配色セット製作委員会が作成している。

カラーユニバーサルデザイン推奨配色
色名 カラーコード サンプル
#ff4b00
黄色 #fff100
#03af7a
#005aff
空色 #4dc4ff
ピンク #ff8082
オレンジ #f6aa00
#990099
茶色 #804000
明るいピンク #ffcabf
クリーム #ffff80
明るい黄緑 #d8f255
明るい空色 #bfe4ff
ベージュ #ffca80
明るい緑 #77d9a8
明るい紫 #c9ace6
#ffffff
明るいグレー #c8c8cb
グレー #84919e
#000000

参考文献

W3C. (2021). CSS Color Module Level 3

カラーユニバーサルデザイン推奨配色セット製作委員会. (2018). カラーユニバーサルデザイン推奨配色セットガイドブック第2版