カラー定義

目次

色指定

関連

RGB 16進 (00 ~ ff) 指定:#RRGGBB・rgb(R, G, B) (16,777,216色)

#RRGGBB (0x00 ~ 0xff):256 × 256 × 256 = 16,777,216 (色)
rgb(R, G, B) (0~255)

前景色・背景色 テスト 下記 RGB値変更で前景色・背景色 変更

Red (0~255) / Green (0~255) / Blue (0~255)
前景色 : R  G  B
背景色 : R  G  B

RGB 16進 (0 ~ f) 指定:#RGB

#RGB (0x0 ~ 0xf):16 × 16 × 16 = 4,096 (色)
(#RRGGBB と同等)

前景色・背景色 テスト 下記 RGB値変更で前景色・背景色 変更

Red (0~15) / Green (0~15) / Blue (0~15)
前景色 : R  G  B
背景色 : R  G  B

RGB パーセント指定:rgb(R%, G%, B%)

前景色・背景色 テスト 下記 RGB (%)値変更で前景色・背景色 変更

Red (0~100%) / Green (0~100%) / Blue (0~100%)
前景色 : R %  G %  B %
背景色 : R %  G %  B %

RGBA指定:rgba(R, G, B, A)

前景色・背景色 テスト 下記 RGBA値変更で前景色・背景色 変更

Red (0~255) / Green (0~255) / Blue (0~255) / 透明度:Alpha (0.0~1.0)
前景色 : R  G  B  A
背景色 : R  G  B  A

RGBA パーセント指定:rgba(R%, G%, B%, A)

前景色・背景色 テスト 下記 RGB (%)値変更で前景色・背景色 変更

Red (0~100%) / Green (0~100%) / Blue (0~100%) / 透明度:Alpha (0.0~1.0)
前景色 : R %  G %  B %  A
背景色 : R %  G %  B %  A

HSL指定:hsl(H, S, L)

前景色・背景色 テスト 下記 HSL値変更で前景色・背景色 変更

色相 (Hue 0~360) / 彩度 (Saturation 0~100%) / 輝度 (Ligntness 0~100%)
前景色 : H   S %   L %
背景色 : H   S %   L %

HSLA指定:hsla(H, S, L, A)

前景色・背景色 テスト 下記 HSLA値変更で前景色・背景色 変更

色相 (Hue 0~360) / 彩度 (Saturation 0~100%) / 輝度 (Ligntness 0~100%) / 透明度 (Alpha 0.0~1.0)
前景色 : H   S %   L %   A
背景色 : H   S %   L %   A

基本色名 (16+1色)

大文字・小文字の区別なし
CSS 2.1 で Orange (#ffa500) 追加

前景色・背景色 テスト 下記表の色部分クリックで背景色、文字部分クリックで前景色 変更

前景色 ( )
背景色 ( )
Aqua#00ffffBlack#000000Blue#0000ffFuchsia#ff00ff
Gray#808080Green#008000Lime#00ff00Maroon#800000
Navy#000080Olive#808000Purple#800080Red#ff0000
Silver#c0c0c0Teal#008080White#ffffffYellow#ffff00
Orange#ffa500

拡張色名 (147色・重複9色)

基本色名 (16色)を全て含む
大文字・小文字の区別なし
CyanとAqua(#00ffff)・MagentaとFuchsia(#ff00ff) は同色
DarkGray・DarkSlateGray・DimGray・Gray ・LightGray・LightSlateGray・SlateGray は ~Grey と同色 (アメリカ英語 と イギリス英語)

前景色・背景色 テスト 下記表の色部分クリックで背景色、文字部分クリックで前景色 変更

前景色 ( )
背景色 ( )
AliceBlue#f0f8ffAntiqueWhite#faebd7Aqua#00ffff
Aquamarine#7fffd4Azure#f0ffffBeige#f5f5dc
Bisque#ffe4c4Black#000000BlanchedAlmond#ffebcd
Blue#0000ffBlueViolet#8a2be2Brown#a52a2a
BurlyWood#deb887CadetBlue#5f9ea0Chartreuse#7fff00
Chocolate#d2691eCoral#ff7f50CornflowerBlue#6495ed
Cornsilk#fff8dcCrimson#dc143cCyan#00ffff
DarkBlue#00008bDarkCyan#008b8bDarkGoldenrod#b8860b
DarkGray#a9a9a9DarkGreen#006400DarkGrey#a9a9a9
DarkKhaki#bdb76bDarkMagenta#8b008bDarkOliveGreen#556b2f
DarkOrange#ff8c00DarkOrchid#9932ccDarkRed#8b0000
DarkSalmon#e9967aDarkSeaGreen#8fbc8fDarkSlateBlue#483d8b
DarkSlateGray#2f4f4fDarkSlateGrey#2f4f4fDarkTurquoise#00ced1
DarkViolet#9400d3DeepPink#ff1493DeepSkyBlue#00bfff
DimGray#696969DimGrey#696969DodgerBlue#1e90ff
Firebrick#b22222FloralWhite#fffaf0ForestGreen#228b22
Fuchsia#ff00ffGainsboro#dcdcdcGhostWhite#f8f8ff
Gold#ffd700Goldenrod#daa520Gray#808080
Green#008000GreenYellow#adff2fGrey#808080
Honeydew#f0fff0HotPink#ff69b4IndianRed#cd5c5c
Indigo#4b0082Ivory#fffff0Khaki#f0e68c
Lavender#e6e6faLavenderBlush#fff0f5LawnGreen#7cfc00
LemonChiffon#fffacdLightBlue#add8e6LightCoral#f08080
LightCyan#e0ffffLightGoldenrodYellow#fafad2LightGray#d3d3d3
LightGreen#90ee90LightGrey#d3d3d3LightPink#ffb6c1
LightSalmon#ffa07aLightSeaGreen#20b2aaLightSkyBlue#87cefa
LightSlateGray#778899LightSlateGrey#778899LightSteelBlue#b0c4de
LightYellow#ffffe0Lime#00ff00LimeGreen#32cd32
Linen#faf0e6Magenta#ff00ffMaroon#800000
MediumAquamarine#66cdaaMediumBlue#0000cdMediumOrchid#ba55d3
MediumPurple#9370dbMediumSeaGreen#3cb371MediumSlateBlue#7b68ee
MediumSpringGreen#00fa9aMediumTurquoise#48d1ccMediumVioletRed#c71585
MidnightBlue#191970MintCream#f5fffaMistyRose#ffe4e1
Moccasin#ffe4b5NavajoWhite#ffdeadNavy#000080
OldLace#fdf5e6Olive#808000OliveDrab#6b8e23
Orange#ffa500OrangeRed#ff4500Orchid#da70d6
PaleGoldenrod#eee8aaPaleGreen#98fb98PaleTurquoise#afeeee
PaleVioletRed#db7093PapayaWhip#ffefd5PeachPuff#ffdab9
Peru#cd853fPink#ffc0cbPlum#dda0dd
PowderBlue#b0e0e6Purple#800080Red#ff0000
RosyBrown#bc8f8fRoyalBlue#4169e1SaddleBrown#8b4513
Salmon#fa8072SandyBrown#f4a460SeaGreen#2e8b57
Seashell#fff5eeSienna#a0522dSilver#c0c0c0
SkyBlue#87ceebSlateBlue#6a5acdSlateGray#708090
SlateGrey#708090Snow#fffafaSpringGreen#00ff7f
SteelBlue#4682b4Tan#d2b48cTeal#008080
Thistle#d8bfd8Tomato#ff6347Turquoise#40e0d0
Violet#ee82eeWheat#f5deb3White#ffffff
WhiteSmoke#f5f5f5Yellow#ffff00YellowGreen#9acd32

Web Safe カラー (216色)

0x00・0x33・0x66・0x99・0xcc・0xff の組み合わせ (6色×6色×6色=216色)
大文字・小文字の区別なし

前景色・背景色 テスト 下記表の色部分クリックで背景色、文字部分クリックで前景色 変更

前景色
背景色
#rrggbb#__00__#__33__#__66__ #__99__#__cc__#__ff__
#00__ __ #000000 #003300 #006600 #009900 #00cc00 #00ff00
#000033#003333 #006633#009933 #00cc33#00ff33
#000066#003366 #006666#009966 #00cc66#00ff66
#000099#003399 #006699#009999 #00cc99#00ff99
#0000cc#0033cc #0066cc#0099cc #00cccc#00ffcc
#0000ff#0033ff #0066ff#0099ff #00ccff#00ffff
#33__ __ #330000#333300 #336600#339900 #33cc00#33ff00
#330033#333333 #336633#339933 #33cc33#33ff33
#330066#333366 #336666#339966 #33cc66#33ff66
#330099#333399 #336699#339999 #33cc99#33ff99
#3300cc#3333cc #3366cc#3399cc #33cccc#33ffcc
#3300ff#3333ff #3366ff#3399ff #33ccff#33ffff
#66__ __ #660000#663300 #666600#669900 #66cc00#66ff00
#660033#663333 #666633#669933 #66cc33#66ff33
#660066#663366 #666666#669966 #66cc66#66ff66
#660099#663399 #666699#669999 #66cc99#66ff99
#6600cc#6633cc #6666cc#6699cc #66cccc#66ffcc
#6600ff#6633ff #6666ff#6699ff #66ccff#66ffff
#99__ __ #990000#993300 #996600#999900 #99cc00#99ff00
#990033#993333 #996633#999933 #99cc33#99ff33
#990066#993366 #996666#999966 #99cc66#99ff66
#990099#993399 #996699#999999 #99cc99#99ff99
#9900cc#9933cc #9966cc#9999cc #99cccc#99ffcc
#9900ff#9933ff #9966ff#9999ff #99ccff#99ffff
#cc__ __ #cc0000#cc3300 #cc6600#cc9900 #cccc00#ccff00
#cc0033#cc3333 #cc6633#cc9933 #cccc33#ccff33
#cc0066#cc3366 #cc6666#cc9966 #cccc66#ccff66
#cc0099#cc3399 #cc6699#cc9999 #cccc99#ccff99
#cc00cc#cc33cc #cc66cc#cc99cc #cccccc#ccffcc
#cc00ff#cc33ff #cc66ff#cc99ff #ccccff#ccffff
#ff__ __ #ff0000#ff3300 #ff6600#ff9900 #ffcc00#ffff00
#ff0033#ff3333 #ff6633#ff9933 #ffcc33#ffff33
#ff0066#ff3366 #ff6666#ff9966 #ffcc66#ffff66
#ff0099#ff3399 #ff6699#ff9999 #ffcc99#ffff99
#ff00cc#ff33cc #ff66cc#ff99cc #ffcccc#ffffcc
#ff00ff#ff33ff #ff66ff#ff99ff #ffccff#ffffff