颜色

颜色属性取值具体可以查询CSS的颜色配置.

RGB

Hippy 支持 rgb() and rgba()。

'#f0f' (#rgb)
'#ff00ff' (#rrggbb)
'rgb(255, 0, 255)'
'#f0ff' (#rgba)
'#ff00ff00' (#rrggbbaa)
'rgba(255, 255, 255, 1.0)'

HSL

Hippy 也支持 hsl() and hsla()

'hsl(360, 100%, 100%)'
'hsla(360, 100%, 100%, 1.0)'

透明

rgba(0, 0, 0, 0)还有另外一个简写版本:

'transparent'

颜色名字

你也可以用下面的颜色配置

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