CSS color

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

書式

以下に示すいずれかの方法で色を指定できる。

名前で指定
RGBで指定
RGBを関数で指定
RGBと不透明度を関数で指定

color: name

color: #rrggbb

color: rgb(red, green, blue)

color: rbg(red, blue, green, a)

name

色を名前で指定する。

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のように、同じ色に複数の名前がついていることがあります。

<div style="color: red">red</div>
<div style="color: green">green</div>
<div style="color: blue">blue</div>

red

green

blue

#rrggbb

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

<div style="color: #0000ff">#000000</div>
<div style="color: #0000ff">#0000ff</div>
<div style="color: #00ff00">#00ff00</div>
<div style="color: #00ffff">#00ffff</div>
<div style="color: #ff0000">#ff0000</div>
<div style="color: #ff00ff">#ff00ff</div>
<div style="color: #ffff00">#ffff00</div>

#000000

#0000ff

#00ff00

#00ffff

#ff0000

#ff00ff

#ffff00

rgb(red, green, blue)

光の三原色（赤、緑および青）を0から255までの整数で指定する。

<div style="color: rgb(255, 0, 0)">rgb(255, 0, 0)</div>
<div style="color: rgb(0, 255, 0)">rgb(0, 255, 0)</div>
<div style="color: rgb(0, 0, 255)">rgb(0, 0, 255)</div>

rgb(255, 0, 0)

rgb(0, 255, 0)

rgb(0, 0, 255)

rbg(red, blue, green, a)

光の三原色（赤、緑および青）を0から255までの整数で指定し、不透明度を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%

CSS border-right-color property

参考文献

World Wide Web Consortium (2021) CSS Color Module Level 3

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

CSS color

書式

関連記事

参考文献