第22章 React Native 颜色参考指南：API、表示方式与关键字

版本：0.77 颜色参考 React Native 中的组件使用 JavaScript 设置样式，颜色属性的用法与 Web 上的 CSS 基本一致。各平台的颜色使用指南请参阅：

Android iOS

颜色 API​ React Native 提供了多个颜色 API，让你充分利用平台的设计规范和用户偏好设置。

PlatformColor 用于引用平台自身的颜色系统。 DynamicColorIOS 是 iOS 专属 API，可指定在浅色模式和深色模式下分别使用哪些颜色。

颜色表示方式​ 红绿蓝（RGB）​ React Native 支持 rgb() 和 rgba()，可以使用十六进制或函数表示法：

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

色相 饱和度 亮度（HSL）​ React Native 支持函数表示法的 hsl() 和 hsla()：

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

色相 白度 黑度（HWB）​ React Native 支持函数表示法的 hwb()：

'hwb(0, 0%, 100%)' 'hwb(360, 100%, 100%)' 'hwb(0 0% 0%)' 'hwb(70 50% 0%)'

颜色整数值​ React Native 还支持用整数值（int）表示颜色（RGB 颜色模式）：

0xff00ff00 (0xrrggbbaa)

注意 这种表示看起来和 Android 的 Color ints 类似，但 Android 的值是以 SRGB 颜色模式存储的（0xaarrggbb）。 命名颜色​ 在 React Native 中，也可以使用颜色名称字符串作为值。 提示 React Native 只支持小写的颜色名称，不支持大写。 transparent​ 这是 rgba(0,0,0,0) 的简写，与 CSS3 中一致。 颜色关键字​ 命名颜色的实现遵循 CSS3/SVG 规范：

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) 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) 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) rebeccapurple (#663399) 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) 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)