仕様書	キーワード	RGB 16 進表記
{{SpecName("CSS1")}}	`black`	`#000000`
`silver`	`#c0c0c0`
`gray`	`#808080`
`white`	`#ffffff`
`maroon`	`#800000`
`red`	`#ff0000`
`purple`	`#800080`
`fuchsia`	`#ff00ff`
`green`	`#008000`
`lime`	`#00ff00`
`olive`	`#808000`
`yellow`	`#ffff00`
`navy`	`#000080`
`blue`	`#0000ff`
`teal`	`#008080`
`aqua`	`#00ffff`
{{SpecName("CSS2.1")}}	`orange`	`#ffa500`
{{SpecName("CSS3 Colors")}}	`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`
`cyan` (`aqua` の同義語)	`#00ffff`
`darkblue`	`#00008b`
`darkcyan`	`#008b8b`
`darkgoldenrod`	`#b8860b`
`darkgray`	`#a9a9a9`
`darkgreen`	`#006400`
`darkgrey`	`#a9a9a9`
`darkkhaki`	`#bdb76b`
`darkmagenta`	`#8b008b`
`darkolivegreen`	`#556b2f`
`darkorange`	`#ff8c00`
`darkorchid`	`#9932cc`
`darkred`	`#8b0000`
`darksalmon`	`#e9967a`
`darkseagreen`	`#8fbc8f`
`darkslateblue`	`#483d8b`
`darkslategray`	`#2f4f4f`
`darkslategrey`	`#2f4f4f`
`darkturquoise`	`#00ced1`
`darkviolet`	`#9400d3`
`deeppink`	`#ff1493`
`deepskyblue`	`#00bfff`
`dimgray`	`#696969`
`dimgrey`	`#696969`
`dodgerblue`	`#1e90ff`
`firebrick`	`#b22222`
`floralwhite`	`#fffaf0`
`forestgreen`	`#228b22`
`gainsboro`	`#dcdcdc`
`ghostwhite`	`#f8f8ff`
`gold`	`#ffd700`
`goldenrod`	`#daa520`
`greenyellow`	`#adff2f`
`grey`	`#808080`
`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`	`#d3d3d3`
`lightgreen`	`#90ee90`
`lightgrey`	`#d3d3d3`
`lightpink`	`#ffb6c1`
`lightsalmon`	`#ffa07a`
`lightseagreen`	`#20b2aa`
`lightskyblue`	`#87cefa`
`lightslategray`	`#778899`
`lightslategrey`	`#778899`
`lightsteelblue`	`#b0c4de`
`lightyellow`	`#ffffe0`
`limegreen`	`#32cd32`
`linen`	`#faf0e6`
`magenta` (`fuchsia` の同義語)	`#ff00ff`
`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`	`#708090`
`slategrey`	`#708090`
`snow`	`#fffafa`
`springgreen`	`#00ff7f`
`steelblue`	`#4682b4`
`tan`	`#d2b48c`
`thistle`	`#d8bfd8`
`tomato`	`#ff6347`
`turquoise`	`#40e0d0`
`violet`	`#ee82ee`
`wheat`	`#f5deb3`
`whitesmoke`	`#f5f5f5`
`yellowgreen`	`#9acd32`
{{SpecName("CSS4 Colors")}}	`rebeccapurple`	`#663399`

仕様書

キーワード

RGB 16 進表記

例

black

#000000

silver

#c0c0c0

gray

#808080

white

#ffffff

maroon

#800000

red

#ff0000

purple

#800080

fuchsia

#ff00ff

green

#008000

lime

#00ff00

olive

#808000

yellow

#ffff00

navy

#000080

blue

#0000ff

teal

#008080

aqua

#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

cyan
(aqua の同義語)

#00ffff

darkblue

#00008b

darkcyan

#008b8b

darkgoldenrod

#b8860b

darkgray

#a9a9a9

darkgreen

#006400

darkgrey

#a9a9a9

darkkhaki

#bdb76b

darkmagenta

#8b008b

darkolivegreen

#556b2f

darkorange

#ff8c00

darkorchid

#9932cc

darkred

#8b0000

darksalmon

#e9967a

darkseagreen

#8fbc8f

darkslateblue

#483d8b

darkslategray

#2f4f4f

darkslategrey

#2f4f4f

darkturquoise

#00ced1

darkviolet

#9400d3

deeppink

#ff1493

deepskyblue

#00bfff

dimgray

#696969

dimgrey

#696969

dodgerblue

#1e90ff

firebrick

#b22222

floralwhite

#fffaf0

forestgreen

#228b22

gainsboro

#dcdcdc

ghostwhite

#f8f8ff

gold

#ffd700

goldenrod

#daa520

greenyellow

#adff2f

grey

#808080

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

#d3d3d3

lightgreen

#90ee90

lightgrey

#d3d3d3

lightpink

#ffb6c1

lightsalmon

#ffa07a

lightseagreen

#20b2aa

lightskyblue

#87cefa

lightslategray

#778899

lightslategrey

#778899

lightsteelblue

#b0c4de

lightyellow

#ffffe0

limegreen

#32cd32

linen

#faf0e6

magenta
(fuchsia の同義語)

#ff00ff

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

#708090

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

` とテキスト入力を用意しています。入力欄に有効な色を入力すると、`

` にその色が採用され、色の値をテストすることができます。 #### HTML ```html

有効な色の値を入力してください: ``` #### CSS ```css div { width: 100%; height: 200px; } ``` ```js hidden const inputElem = document.querySelector('input'); const divElem = document.querySelector('div'); function validTextColor(stringToTest) { if (stringToTest === "") { return false; } if (stringToTest === "inherit") { return false; } if (stringToTest === "transparent") { return false; } const image = document.createElement("img"); image.style.color = "rgb(0, 0, 0)"; image.style.color = stringToTest; if (image.style.color !== "rgb(0, 0, 0)") { return true; } image.style.color = "rgb(255, 255, 255)"; image.style.color = stringToTest; return image.style.color !== "rgb(255, 255, 255)"; } inputElem.addEventListener('change', () => { if(validTextColor(inputElem.value)) { divElem.style.backgroundColor = inputElem.value; divElem.textContent = ''; } else { divElem.style.backgroundColor = 'white'; divElem.textContent = 'Invalid color value'; } }); ``` #### 結果 {{EmbedLiveSample('Color_value_tester','100%', 300)}} ### 様々な RGB 構文この例は、一つの色を RGB 色構文で生成することができる様々な方法を示しています。 /* これらの様々な構文は、すべて同じ色、不透明な濃いピンク色を指定します。 */ /* 16進表記 */ #f09 #F09 #ff0099 #FF0099 /* 関数表記 */ rgb(255,0,153) rgb(255, 0, 153) rgb(255, 0, 153.0) rgb(100%,0%,60%) rgb(100%, 0%, 60%) rgb(100%, 0, 60%) /* ERROR! 数値とパーセントを混ぜないでください */ rgb(255 0 153) /* アルファ値付き16進表記 */ #f09f #F09F #ff0099ff #FF0099FF /* アルファ値付き関数表記 */ rgb(255, 0, 153, 1) rgb(255, 0, 153, 100%) /* 空白区切りの構文 */ rgb(255 0 153 / 1) rgb(255 0 153 / 100%) /* 浮動小数点値による実数表記 */ rgb(255, 0, 153.6, 1) rgb(1e2, .5e1, .5e0, +.25e2%) ### RGB の様々な透過性 /* 16進表記 */ #3a30 /* 完全に透明な緑 */ #3A3F /* 完全に不透明な緑 */ #33aa3300 /* 完全に透明な緑 */ #33AA3380 /* 50% 半透明な緑 */ /* 関数表記 */ rgba(51, 170, 51, .1) /* 10% 半透明の緑 */ rgba(51, 170, 51, .4) /* 40% 半透明の緑 */ rgba(51, 170, 51, .7) /* 70% 半透明の緑 */ rgba(51, 170, 51, 1) /* 完全に不透明の緑 */ /* ホワイトスペース区切りの構文 */ rgba(51 170 51 / 0.4) /* 40% 半透明の緑 */ rgba(51 170 51 / 40%) /* 40% 半透明の緑 */ /* 実数値の関数構文 */ rgba(51, 170, 51.6, 1) rgba(5.1e1, 1.7e2, 5.1e1, 1e2%) ### 様々な HSL の構文 /* これらの例はすべて同じ色、ラベンダーを指定します。 */ hsl(270,60%,70%) hsl(270, 60%, 70%) hsl(270 60% 70%) hsl(270deg, 60%, 70%) hsl(4.71239rad, 60%, 70%) hsl(.75turn, 60%, 70%) /* これらの例はすべて同じ色、15%半透明のラベンダーを指定します。 */ hsl(270, 60%, 50%, .15) hsl(270, 60%, 50%, 15%) hsl(270 60% 50% / .15) hsl(270 60% 50% / 15%) ### 彩度 100% の色

表記	説明	例
`hsl(0, 100%, 50%)`	red
`hsl(30, 100%, 50%)`	orange
`hsl(60, 100%, 50%)`	yellow
`hsl(90, 100%, 50%)`	lime green
`hsl(120, 100%, 50%)`	green
`hsl(150, 100%, 50%)`	blue-green
`hsl(180, 100%, 50%)`	cyan
`hsl(210, 100%, 50%)`	sky blue
`hsl(240, 100%, 50%)`	blue
`hsl(270, 100%, 50%)`	purple
`hsl(300, 100%, 50%)`	magenta
`hsl(330, 100%, 50%)`	pink
`hsl(360, 100%, 50%)`	red

### 様々な明度の緑

表記	説明	例
`hsl(120, 100%, 0%)`	black
`hsl(120, 100%, 20%)`
`hsl(120, 100%, 40%)`
`hsl(120, 100%, 60%)`
`hsl(120, 100%, 80%)`
`hsl(120, 100%, 100%)`	white

### 様々な彩度の緑

表記	説明	例
`hsl(120, 100%, 50%)`	green
`hsl(120, 80%, 50%)`
`hsl(120, 60%, 50%)`
`hsl(120, 40%, 50%)`
`hsl(120, 20%, 50%)`
`hsl(120, 0%, 50%)`	gray

### HSL の様々な透過性 hsla(240, 100%, 50%, .05) /* 5% 半透明の青 */ hsla(240, 100%, 50%, .4) /* 40% 半透明の青 */ hsla(240, 100%, 50%, .7) /* 70% 半透明の青 */ hsla(240, 100%, 50%, 1) /* 完全に不透明の青 */ /* ホワイトスペース構文 */ hsla(240 100% 50% / .05) /* 5% 半透明の青 */ /* アルファのパーセント表記 */ hsla(240 100% 50% / 5%) /* 5% 半透明の青 */ ## 仕様書

仕様書	状態	備考
{{SpecName('CSS4 Colors', '#changes-from-3')}}	{{Spec2('CSS4 Colors')}}	LCH および Lab の色、`color()` 関数表記、`rebeccapurple`、4 桁 (`#RGBA`) および 8 桁 (`#RRGGBBAA`) の 16 進表記を追加し、`rgba()` および `hsla()` を `rgb()` および `hsl()` の別名とし (引数の構文を共通化)、関数の空白区切りの引数をカンマの代替とし、アルファ値にパーセント値を追加し、`hsl()` 色の色相の角度表記を追加。
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}	{{Spec2('CSS3 Colors')}}	システム色を非推奨化。 SVG 色を追加。`rgba()`, `hsl()`, `hsla()` 関数表記を追加。
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}	{{Spec2('CSS2.1')}}	`orange` キーワードとシステム色を追加。
{{SpecName('CSS1', '#color-units', '<color>')}}	{{Spec2('CSS1')}}	初回定義。基本 16 色のキーワードを含む。

## ブラウザーの互換性 {{Compat}} ## 関連情報 - {{Cssxref("opacity")}} プロパティは要素レベルで色の透明度を定義できます。 - このデータ型を使用するよく使われるプロパティ: {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("box-shadow")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}} - [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color)

currentcolor の例

色の値のテスター