查看“color/颜色列表”的源代码

本页面为 CSS 颜色和 Material Design 颜色的所有列表。

斜体名称为支持但不会显示的别名。

== CSS ==
=== CSS1 ===
{| class="wikitable sortable"
! 名称 !! Hex !! 颜色
|-
|| <code>black</code> || <code>#000000</code> || style="background:#000000;" |
|-
|| <code>silver</code> || <code>#c0c0c0</code> || style="background:#c0c0c0;" |
|-
|| <code>gray</code> || <code>#808080</code> || style="background:#808080;" |
|-
|| <code>white</code> || <code>#ffffff</code> || style="background:#ffffff;" |
|-
|| <code>maroon</code> || <code>#800000</code> || style="background:#800000;" |
|-
|| <code>red</code> || <code>#ff0000</code> || style="background:#ff0000;" |
|-
|| <code>purple</code> || <code>#800080</code> || style="background:#800080;" |
|-
|| ''<code>fuchsia</code>'' || <code>#ff00ff</code> || style="background:#ff00ff;" |
|-
|| <code>green</code> || <code>#008000</code> || style="background:#008000;" |
|-
|| <code>lime</code> || <code>#00ff00</code> || style="background:#00ff00;" |
|-
|| <code>olive</code> || <code>#808000</code> || style="background:#808000;" |
|-
|| <code>yellow</code> || <code>#ffff00</code> || style="background:#ffff00;" |
|-
|| <code>navy</code> || <code>#000080</code> || style="background:#000080;" |
|-
|| <code>blue</code> || <code>#0000ff</code> || style="background:#0000ff;" |
|-
|| <code>teal</code> || <code>#008080</code> || style="background:#008080;" |
|-
|| ''<code>aqua</code>'' || <code>#00ffff</code> || style="background:#00ffff;" |
|}

=== CSS2 ===
{| class="wikitable sortable"
! 名称 !! Hex !! 颜色
|-
|| <code>orange</code> || <code>#ffa500</code> || style="background:#ffa500;" |
|}

=== CSS3 ===
{| class="wikitable sortable"
! 名称 !! Hex !! 颜色
|-
|| <code>aliceblue</code> || <code>#f0f8ff</code> || style="background:#f0f8ff;" |
|-
|| <code>antiquewhite</code> || <code>#faebd7</code> || style="background:#faebd7;" |
|-
|| <code>aquamarine</code> || <code>#7fffd4</code> || style="background:#7fffd4;" |
|-
|| <code>azure</code> || <code>#f0ffff</code> || style="background:#f0ffff;" |
|-
|| <code>beige</code> || <code>#f5f5dc</code> || style="background:#f5f5dc;" |
|-
|| <code>bisque</code> || <code>#ffe4c4</code> || style="background:#ffe4c4;" |
|-
|| <code>blanchedalmond</code> || <code>#ffebcd</code> || style="background:#ffebcd;" |
|-
|| <code>blueviolet</code> || <code>#8a2be2</code> || style="background:#8a2be2;" |
|-
|| <code>brown</code> || <code>#a52a2a</code> || style="background:#a52a2a;" | 
|-
|| <code>burlywood</code> || <code>#deb887</code> || style="background:#deb887;" |
|-
|| <code>cadetblue</code> || <code>#5f9ea0</code> || style="background:#5f9ea0;" |
|-
|| <code>chartreuse</code> || <code>#7fff00</code> || style="background:#7fff00;" |
|-
|| <code>chocolate</code> || <code>#d2691e</code> || style="background:#d2691e;" |
|-
|| <code>coral</code> || <code>#ff7f50</code> || style="background:#ff7f50;" |
|-
|| <code>cornflowerblue</code> || <code>#6495ed</code> || style="background:#6495ed;" |
|-
|| <code>cornsilk</code> || <code>#fff8dc</code> || style="background:#fff8dc;" |
|-
|| <code>cyan</code> || <code>#00ffff</code> || style="background:#00ffff;" |
|-
|| <code>darkblue</code> || <code>#00008b</code> || style="background:#00008b;" |
|-
|| <code>darkcyan</code> || <code>#008b8b</code> || style="background:#008b8b;" |
|-
|| <code>darkgoldenrod</code> || <code>#b8860b</code> || style="background:#b8860b;" |
|-
|| <code>darkgray</code> || <code>#a9a9a9</code> || style="background:#a9a9a9;" |
|-
|| <code>darkgreen</code> || <code>#006400</code> || style="background:#006400;" |
|-
|| ''<code>darkgrey</code>'' || <code>#a9a9a9</code> || style="background:#a9a9a9;" |
|-
|| <code>darkkhaki</code> || <code>#bdb76b</code> || style="background:#bdb76b;" |
|-
|| <code>darkmagenta</code> || <code>#8b008b</code> || style="background:#8b008b;" |
|-
|| <code>darkolivegreen</code> || <code>#556b2f</code> || style="background:#556b2f;" |
|-
|| <code>darkorange</code> || <code>#ff8c00</code> || style="background:#ff8c00;" |
|-
|| <code>darkorchid</code> || <code>#9932cc</code> || style="background:#9932cc;" |
|-
|| <code>darkred</code> || <code>#8b0000</code> || style="background:#8b0000;" |
|-
|| <code>darksalmon</code> || <code>#e9967a</code> || style="background:#e9967a;" |
|-
|| <code>darkseagreen</code> || <code>#8fbc8f</code> || style="background:#8fbc8f;" |
|-
|| <code>darkslateblue</code> || <code>#483d8b</code> || style="background:#483d8b;" |
|-
|| <code>darkslategray</code> || <code>#2f4f4f</code> || style="background:#2f4f4f;" |
|-
|| ''<code>darkslategrey</code>'' || <code>#2f4f4f</code> || style="background:#2f4f4f;" |
|-
|| <code>darkturquoise</code> || <code>#00ced1</code> || style="background:#00ced1;" |
|-
|| <code>darkviolet</code> || <code>#9400d3</code> || style="background:#9400d3;" |
|-
|| <code>deeppink</code> || <code>#ff1493</code> || style="background:#ff1493;" |
|-
|| <code>deepskyblue</code> || <code>#00bfff</code> || style="background:#00bfff;" |
|-
|| <code>dimgray</code> || <code>#696959</code> || style="background:#696969;" |
|-
|| ''<code>dimgrey</code>'' || <code>#696969</code> || style="background:#696969;" |
|-
|| <code>dodgerblue</code> || <code>#1e90ff</code> || style="background:#1e90ff;" |
|-
|| <code>floralwhite</code> || <code>#fffaf0</code> || style="background:#fffaf0;" |
|-
|| <code>forestgreen</code> || <code>#228b22</code> || style="background:#228b22;" |
|-
|| <code>gainsboro</code> || <code>#dcdcdc</code> || style="background:#dcdcdc;" |
|-
|| <code>ghostwhite</code> || <code>#f8f8ff</code> || style="background:#f8f8ff;" |
|-
|| <code>gold</code> || <code>#ffd700</code> || style="background:#ffd700;" |
|-
|| <code>goldenrod</code> || <code>#daa520</code> || style="background:#daa520;" |
|-
|| <code>greenyellow</code> || <code>#adff2f</code> || style="background:#adff2f;" |
|-
|| ''<code>grey</code>'' || <code>#808080</code> || style="background:#808080;" |
|-
|| <code>honeydew</code> || <code>#f0fff0</code> || style="background:#f0fff0;" |
|-
|| <code>hotpink</code> || <code>#ff69b4</code> || style="background:#ff69b4;" |
|-
|| <code>indianred</code> || <code>#cd5c5c</code> || style="background:#cd5c5c;" |
|-
|| <code>indigo</code> || <code>#4b0082</code> || style="background:#4b0082;" |
|-
|| <code>ivory</code> || <code>#fffff0</code> || style="background:#fffff0;" |
|-
|| <code>khaki</code> || <code>#f0e68c</code> || style="background:#f0e68c;" |
|-
|| <code>lavender</code> || <code>#e6e6fa</code> || style="background:#e6e6fa;" |
|-
|| <code>lavenderblush</code> || <code>#fff0f5</code> || style="background:#fff0f5;" |
|-
|| <code>lawngreen</code> || <code>#7cfc00</code> || style="background:#7cfc00;" |
|-
|| <code>lemonchiffon</code> || <code>#fffacd</code> || style="background:#fffacd;" |
|-
|| <code>lightblue</code> || <code>#add8e6</code> || style="background:#add8e6;" |
|-
|| <code>lightcoral</code> || <code>#f08080</code> || style="background:#f08080;" |
|-
|| <code>lightcyan</code> || <code>#e0ffff</code> || style="background:#e0ffff;" |
|-
|| <code>lightgoldenrodyellow</code> || <code>#fafad2</code> || style="background:#fafad2;" |
|-
|| <code>lightgray</code> || <code>#d3d3d3</code> || style="background:#d3d3d3;" |
|-
|| <code>lightgreen</code> || <code>#90ee90</code> || style="background:#90ee90;" |
|-
|| ''<code>lightgrey</code>'' || <code>#d3d3d3</code> || style="background:#d3d3d3;" |
|-
|| <code>lightpink</code> || <code>#ffb6c1</code> || style="background:#ffb6c1;" |
|-
|| <code>lightsalmon</code> || <code>#ffa07a</code> || style="background:#ffa07a;" |
|-
|| <code>lightseagreen</code> || <code>#20b2aa</code> || style="background:#20b2aa;" |
|-
|| <code>lightskyblue</code> || <code>#87cefa</code> || style="background:#87cefa;" |
|-
|| <code>lightslategray</code> || <code>#778899</code> || style="background:#778899;" |
|-
|| ''<code>lightslategrey</code>'' || <code>#778899</code> || style="background:#778899;" |
|-
|| <code>lightsteelblue</code> || <code>#b0c4be</code> || style="background:#b0c4be;" |
|-
|| <code>lightyellow</code> || <code>#ffffe0</code> || style="background:#ffffe0;" |
|-
|| <code>limegreen</code> || <code>#32cd32</code> || style="background:#32cd32;" |
|-
|| <code>linen</code> || <code>#faf0e6</code> || style="background:#faf0e6;" |
|-
|| <code>magenta</code> || <code>#ff00ff</code> || style="background:#ff00ff;" |
|-
|| <code>mediumaquamarine</code> || <code>#66cdaa</code> || style="background:#66cdaa;" |
|-
|| <code>mediumblue</code> || <code>#0000cd</code> || style="background:#0000cd;" |
|-
|| <code>mediumorchid</code> || <code>#ba55d3</code> || style="background:#ba55d3;" |
|-
|| <code>mediumpurple</code> || <code>#9370db</code> || style="background:#9370db;" |
|-
|| <code>mediumseagreen</code> || <code>#3cb371</code> || style="background:#3cb371;" |
|-
|| <code>mediumslateblue</code> || <code>#7b68ee</code> || style="background:#7b68ee;" |
|-
|| <code>mediumspringgreen</code> || <code>#00fa9a</code> || style="background:#00fa9a;" |
|-
|| <code>mediumturquoise</code> || <code>#48d1cc</code> || style="background:#48d1cc;" |
|-
|| <code>mediumvioletred</code> || <code>#c71585</code> || style="background:#c71585;" |
|-
|| <code>midnightblue</code> || <code>#191970</code> || style="background:#191970;" |
|-
|| <code>mintcream</code> || <code>#f5fffa</code> || style="background:#f5fffa;" |
|-
|| <code>mistyrose</code> || <code>#ffe4e1</code> || style="background:#ffe4e1;" |
|-
|| <code>moccasin</code> || <code>#ffe4b5</code> || style="background:#ffe4b5;" |
|-
|| <code>navajowhite</code> || <code>#ffdead</code> || style="background:#ffdead;" |
|-
|| <code>oldlace</code> || <code>#fdf5e6</code> || style="background:#fdf5e6;" |
|-
|| <code>olivedrab</code> || <code>#6b8e23</code> || style="background:#6b8e23;" |
|-
|| <code>orangered</code> || <code>#ff4500</code> || style="background:#ff4500;" |
|-
|| <code>orchid</code> || <code>#da70d6</code> || style="background:#da70d6;" |
|-
|| <code>palegoldenrod</code> || <code>#eee8aa</code> || style="background:#eee8aa;" |
|-
|| <code>palegreen</code> || <code>#98fb98</code> || style="background:#98fb98;" |
|-
|| <code>paleturquoise</code> || <code>#afeeee</code> || style="background:#afeeee;" |
|-
|| <code>palevioletred</code> || <code>#db7093</code> || style="background:#db7093;" |
|-
|| <code>papayawhip</code> || <code>#ffefd5</code> || style="background:#ffefd5;" |
|-
|| <code>peachpuff</code> || <code>#ffdab9</code> || style="background:#ffdab9;" |
|-
|| <code>peru</code> || <code>#cd853f</code> || style="background:#cd853f;" |
|-
|| <code>pink</code> || <code>#ffc0cb</code> || style="background:#ffc0cb;" |
|-
|| <code>plum</code> || <code>#dda0dd</code> || style="background:#dda0dd;" |
|-
|| <code>powderblue</code> || <code>#b0e0e6</code> || style="background:#b0e0e6;" |
|-
|| <code>rosybrown</code> || <code>#bc8f8f</code> || style="background:#bc8f8f;" |
|-
|| <code>royalblue</code> || <code>#4169e1</code> || style="background:#4169e1;" |
|-
|| <code>saddlebrown</code> || <code>#8b4513</code> || style="background:#8b4513;" |
|-
|| <code>salmon</code> || <code>#fa8072</code> || style="background:#fa8072;" |
|-
|| <code>sandybrown</code> || <code>#f4a460</code> || style="background:#f4a460;" |
|-
|| <code>seagreen</code> || <code>#2e8b57</code> || style="background:#2e8b57;" |
|-
|| <code>seashell</code> || <code>#fff5ee</code> || style="background:#fff5ee;" |
|-
|| <code>sienna</code> || <code>#a0522d</code> || style="background:#a0522d;" |
|-
|| <code>skyblue</code> || <code>#87ceeb</code> || style="background:#87ceeb;" |
|-
|| <code>slateblue</code> || <code>#6a5acd</code> || style="background:#6a5acd;" |
|-
|| <code>slategray</code> || <code>#708090</code> || style="background:#708090;" |
|-
|| ''<code>slategrey</code>'' || <code>#708090</code> || style="background:#708090;" |
|-
|| <code>snow</code> || <code>#fffafa</code> || style="background:#fffafa;" |
|-
|| <code>springgreen</code> || <code>#00ff7f</code> || style="background:#00ff7f;" |
|-
|| <code>steelblue</code> || <code>#4682b4</code> || style="background:#4682b4;" |
|-
|| <code>tan</code> || <code>#d2b48c</code> || style="background:#d2b48c;" |
|-
|| <code>thistle</code> || <code>#d8bfd8</code> || style="background:#d8bfd8;" |
|-
|| <code>tomato</code> || <code>#ff6347</code> || style="background:#ff6347;" |
|-
|| <code>turquoise</code> || <code>#40e0d0</code> || style="background:#40e0d0;" |
|-
|| <code>violet</code> || <code>#ee82ee</code> || style="background:#ee82ee;" |
|-
|| <code>wheat</code> || <code>#f5deb3</code> || style="background:#f5deb3;" |
|-
|| <code>whitesmoke</code> || <code>#f5f5f5</code> || style="background:#f5f5f5;" |
|-
|| <code>yellowgreen</code> || <code>#9acd32</code> || style="background:#9acd32;" |
|}

=== CSS4 ===
{| class="wikitable sortable"
! 名称 !! Hex !! 颜色
|-
|| <code>rebeccapurple</code> || <code>#663399</code> || style="background:#663399;" |
|}

== Material Design ==
Material Design 颜色的颜色格式为<code><颜色>_<色号></code>。
=== red ===
{| class="wikitable"
! 色号 !! Hex !! 颜色
|-
|| 50 || <code>#ffebee</code> || style="background:#ffebee;" |
|-
|| 100 || <code>#ffcdd2</code> || style="background:#ffcdd2;" |
|-
|| 200 || <code>#ef9a9a</code> || style="background:#ef9a9a;" |
|-
|| 300 || <code>#e57373</code> || style="background:#e57373;" |
|-
|| 400 || <code>#ef5350</code> || style="background:#ef5350;" |
|-
|| 500 || <code>#f44336</code> || style="background:#f44336;" |
|-
|| 600 || <code>#e53935</code> || style="background:#e53935;" |
|-
|| 700 || <code>#d32f2f</code> || style="background:#d32f2f;" |
|-
|| 800 || <code>#c62828</code> || style="background:#c62828;" |
|-
|| 900 || <code>#b71c1c</code> || style="background:#b71c1c;" |
|-
|| a100 || <code>#ff8a80</code> || style="background:#ff8a80;" |
|-
|| a200 || <code>#ff5252</code> || style="background:#ff5252;" |
|-
|| a400 || <code>#ff1744</code> || style="background:#ff1744;" |
|-
|| a700 || <code>#d50000</code> || style="background:#d50000;" |
|}

=== pink ===
{| class="wikitable"
! 色号 !! Hex !! 颜色
|-
|| 50 || <code>#fce4ec</code> || style="background:#fce4ec;" |
|-
|| 100 || <code>#f8bbd0</code> || style="background:#f8bbd0;" |
|-
|| 200 || <code>#f48fb1</code> || style="background:#f48fb1;" |
|-
|| 300 || <code>#f06292</code> || style="background:#f06292;" |
|-
|| 400 || <code>#ec407a</code> || style="background:#ec407a;" |
|-
|| 500 || <code>#e91e63</code> || style="background:#e91e63;" |
|-
|| 600 || <code>#d81b60</code> || style="background:#d81b60;" |
|-
|| 700 || <code>#c2185b</code> || style="background:#c2185b;" |
|-
|| 800 || <code>#ad1457</code> || style="background:#ad1457;" |
|-
|| 900 || <code>#880e4f</code> || style="background:#880e4f;" |
|-
|| a100 || <code>#ff80ab</code> || style="background:#ff80ab;" |
|-
|| a200 || <code>#ff4081</code> || style="background:#ff4081;" |
|-
|| a400 || <code>#f50057</code> || style="background:#f50057;" |
|-
|| a700 || <code>#c51162</code> || style="background:#c51162;" |
|}

=== purple ===
{| class="wikitable"
! 色号 !! Hex !! 颜色
|-
|| 50 || <code>#f3e5f5</code> || style="background:#f3e5f5;" |
|-
|| 100 || <code>#e1bee7</code> || style="background:#e1bee7;" |
|-
|| 200 || <code>#ce93d8</code> || style="background:#ce93d8;" |
|-
|| 300 || <code>#ba68c8</code> || style="background:#ba68c8;" |
|-
|| 400 || <code>#ab47bc</code> || style="background:#ab47bc;" |
|-
|| 500 || <code>#9c27b0</code> || style="background:#9c27b0;" |
|-
|| 600 || <code>#8e24aa</code> || style="background:#8e24aa;" |
|-
|| 700 || <code>#7b1fa2</code> || style="background:#7b1fa2;" |
|-
|| 800 || <code>#6a1b9a</code> || style="background:#6a1b9a;" |
|-
|| 900 || <code>#4a148c</code> || style="background:#4a148c;" |
|-
|| a100 || <code>#ea80fc</code> || style="background:#ea80fc;" |
|-
|| a200 || <code>#e040fb</code> || style="background:#e040fb;" |
|-
|| a400 || <code>#d500f9</code> || style="background:#d500f9;" |
|-
|| a700 || <code>#aa00ff</code> || style="background:#aa00ff;" |
|}

===deep-purple===
{| class="wikitable"
! 色号 !! Hex !! 颜色
|-
|| 50 || <code>#ede7f6</code> || style="background:#ede7f6;" |
|-
|| 100 || <code>#d1c4e9</code> || style="background:#d1c4e9;" |
|-
|| 200 || <code>#b39ddb</code> || style="background:#b39ddb;" |
|-
|| 300 || <code>#9575cd</code> || style="background:#9575cd;" |
|-
|| 400 || <code>#7e57c2</code> || style="background:#7e57c2;" |
|-
|| 500 || <code>#673ab7</code> || style="background:#673ab7;" |
|-
|| 600 || <code>#5e35b1</code> || style="background:#5e35b1;" |
|-
|| 700 || <code>#512da8</code> || style="background:#512da8;" |
|-
|| 800 || <code>#4527a0</code> || style="background:#4527a0;" |
|-
|| 900 || <code>#311b92</code> || style="background:#311b92;" |
|-
|| a100 || <code>#b388ff</code> || style="background:#b388ff;" |
|-
|| a200 || <code>#7c4dff</code> || style="background:#7c4dff;" |
|-
|| a400 || <code>#651fff</code> || style="background:#651fff;" |
|-
|| a700 || <code>#6200ea</code> || style="background:#6200ea;" |
|}