カラー定義
目次
色指定
- RGB指定 (赤：Red / 緑：Green / 青：Blue)
(各色が0x00・0x33・0x66・0x99・0xCC・0xFF のみの使用：Web Safe カラー (216色))- 16進 (00 ～ ff)：#RRGGBB (大文字・小文字の区別なし)
- 16進 (0 ～ f)：#RGB (大文字・小文字の区別なし) #RRGGBB と同等
- 10進 (0～255)：rgb(R, G, B)
- パーセント指定 (0%～100%)：rgb(R%, G%, B%)
- RGBA指定 ( 赤：Red / 緑：Green / 青：Blue / 透明度：Alpha )
- RGB 10進 (0～255)：rgba(R, G, B, A) (A:0.0 ～ 1.0)
- RGB パーセント (0%～100%)：rgba(R%, G%, B%, A) (A:0.0 ～ 1.0)
- HSL指定：hsl(H, S%, L%)
色相：Hue (0～360)
彩度：Saturation (0～100%)
輝度：Ligntness (0～100%) - HSLA指定：hsla(H, S%, L%, A)
- 色名指定：(大文字・小文字の区別なし)
- 特殊色指定
- 透過色：transparent
- 文字色 (color)と同色：currentColor
外部リンク
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 | #00ffff | Black | #000000 | Blue | #0000ff | Fuchsia | #ff00ff | ||||
| Gray | #808080 | Green | #008000 | Lime | #00ff00 | Maroon | #800000 | ||||
| Navy | #000080 | Olive | #808000 | Purple | #800080 | Red | #ff0000 | ||||
| Silver | #c0c0c0 | Teal | #008080 | White | #ffffff | Yellow | #ffff00 | ||||
| Orange | #ffa500 | ||||||||||
拡張色名 (147色・重複9色＋1色)
- 基本色名 (16＋1色)を全て含む
- 大文字・小文字の区別なし
- CyanとAqua(#00ffff)・MagentaとFuchsia(#ff00ff) は同色
- DarkGray・DarkSlateGray・DimGray・Gray ・LightGray・LightSlateGray・SlateGray は ～Grey と同色 (アメリカ英語 と イギリス英語)
- CSS4 (ドラフト) で RebeccaPurple (#663399) 追加
前景色・背景色 テスト 下記表の色部分クリックで背景色、文字部分クリックで前景色 変更
前景色 ( )背景色 ( )
| AliceBlue | #f0f8ff | AntiqueWhite | #faebd7 | Aqua | #00ffff | |||
| Aquamarine | #7fffd4 | Azure | #f0ffff | Beige | #f5f5dc | |||
| Bisque | #ffe4c4 | Black | #000000 | BlanchedAlmond | #ffebcd | |||
| Blue | #0000ff | BlueViolet | #8a2be2 | Brown | #a52a2a | |||
| BurlyWood | #deb887 | CadetBlue | #5f9ea0 | Chartreuse | #7fff00 | |||
| Chocolate | #d2691e | Coral | #ff7f50 | CornflowerBlue | #6495ed | |||
| Cornsilk | #fff8dc | Crimson | #dc143c | Cyan | #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 | |||
| Fuchsia | #ff00ff | Gainsboro | #dcdcdc | GhostWhite | #f8f8ff | |||
| Gold | #ffd700 | Goldenrod | #daa520 | Gray | #808080 | |||
| Green | #008000 | 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 | Lime | #00ff00 | LimeGreen | #32cd32 | |||
| Linen | #faf0e6 | Magenta | #ff00ff | Maroon | #800000 | |||
| 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 | Navy | #000080 | |||
| OldLace | #fdf5e6 | Olive | #808000 | OliveDrab | #6b8e23 | |||
| Orange | #ffa500 | OrangeRed | #ff4500 | Orchid | #da70d6 | |||
| PaleGoldenrod | #eee8aa | PaleGreen | #98fb98 | PaleTurquoise | #afeeee | |||
| PaleVioletRed | #db7093 | PapayaWhip | #ffefd5 | PeachPuff | #ffdab9 | |||
| Peru | #cd853f | Pink | #ffc0cb | Plum | #dda0dd | |||
| PowderBlue | #b0e0e6 | Purple | #800080 | Red | #ff0000 | |||
| RosyBrown | #bc8f8f | RoyalBlue | #4169e1 | SaddleBrown | #8b4513 | |||
| Salmon | #fa8072 | SandyBrown | #f4a460 | SeaGreen | #2e8b57 | |||
| Seashell | #fff5ee | Sienna | #a0522d | Silver | #c0c0c0 | |||
| SkyBlue | #87ceeb | SlateBlue | #6a5acd | SlateGray | #708090 | |||
| SlateGrey | #708090 | Snow | #fffafa | SpringGreen | #00ff7f | |||
| SteelBlue | #4682b4 | Tan | #d2b48c | Teal | #008080 | |||
| Thistle | #d8bfd8 | Tomato | #ff6347 | Turquoise | #40e0d0 | |||
| Violet | #ee82ee | Wheat | #f5deb3 | White | #ffffff | |||
| WhiteSmoke | #f5f5f5 | Yellow | #ffff00 | YellowGreen | #9acd32 | |||
| RebeccaPurple | #663399 |
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 | |||||||