跳到主要内容

颜色参考

React Native 中的组件是通过使用 JavaScript 进行样式设置的。颜色属性通常与网页上的 CSS 的用法相匹配。各平台上的颜色使用总体指南可见下方链接：

颜色 API​

React Native 提供了几种颜色 API，旨在让你充分利用平台的设计和用户偏好。

  • PlatformColor 允许你引用平台的颜色系统。
  • DynamicColorIOS 是 iOS 专用的，允许你指定在浅色模式或深色模式下使用的颜色。

颜色表示方式​

红绿蓝 (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 也支持以 RGB 颜色模式的 int 值表示颜色：

  • 0xff00ff00 (0xrrggbbaa)
警告

这看起来可能与 Android Color 的整数表示类似，但在 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)