CSS color

CSS の color プロパティは、HTML 文書で文字の色を指定するときに使われる。

書式

以下に示すいずれかの書式で文字の色を指定できる。

color : name

color : #rrggbb

color : rgb(red, green, blue)

color : rbga(red, blue, green, alpha)

color : hsl(hue, saturation, lightness)

color : hsla(hue, saturation, lightness, alpha)

値

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)

rbga(red, blue, green, alpha)

光の三原色（赤、緑および青）を0から255までの整数で指定し、不透明度を0から1までの数値かパーセント単位で指定する。

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

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

0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0

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

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

10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

hsl(hue, saturation, lightness)

色相（Hue）、彩度（Saturation）および輝度（Lightness）でテキストの色を指定する。

色相は0度から360度までの角度で表現され、色の種類を特定する。例えば、0度または360度は赤、60度は黄、120度は緑、180度はシアン、240度は青、300度はマゼンタを意味する。

<span style="color: hsl(0, 100%, 50%)">0</span>
<span style="color: hsl(30, 100%, 50%)">30</span>
<span style="color: hsl(60, 100%, 50%)">60</span>
<span style="color: hsl(90, 100%, 50%)">90</span>
<span style="color: hsl(120, 100%, 50%)">120</span>
<span style="color: hsl(150, 100%, 50%)">150</span>
<span style="color: hsl(180, 100%, 50%)">180</span>
<span style="color: hsl(210, 100%, 50%)">210</span>
<span style="color: hsl(240, 100%, 50%)">240</span>
<span style="color: hsl(270, 100%, 50%)">270</span>
<span style="color: hsl(300, 100%, 50%)">300</span>
<span style="color: hsl(330, 100%, 50%)">330</span>

0 30 30 90 120 150 180 210 240 270 300 330

彩度は 0% から 100% で表現され、色の濃さや鮮やかさを表す。高いほど色が濃く、低いほど色味が薄れて灰色に近づく。

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

0 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

輝度は 0% から 100% で表現され、色の明るさを表す。高いほど明るく、低いほど暗くなる。

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

0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

hsla(hue, saturation, lightness, alpha)

色相（Hue）、彩度（Saturation）、輝度（Lightness）および透明度（alpha）でテキストの色を指定する。

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

0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

適用対象

すべての要素およびテキストに対して color プロパティを適用できる。

ダークモード

スマホやWindowsではOSの設定でダークモードにすることができる。OSのダークモードが設定されているときに文字の色を変えるには、次のようにする。

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white
  }
}

JavaScript

文字の色を JavaScript で切り替える例を以下に示す。

<label for="color">color:</label>
<select id="color" onchange="changeColor()">
  <option>black</option>
  <option>red</option>
  <option>green</option>
  <option>blue</option>
</select>
<p id="text">The quick brown fox jumps over the lazy dog.</p>
<script>
  function changeColor() {
    const element = document.getElementById("text");
    const color = document.getElementById("color");
    const index = color.selectedIndex;
    element.style.color = color.options[index].text;
  }
</script>

color:

The quick brown fox jumps over the lazy dog.

参考文献

World Wide Web Consortium (2025) CSS Color Module Level 4

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

CSS color

書式

値

適用対象

ダークモード

JavaScript

関連記事

参考文献