跳到主要内容

颜色参考

React Native 中的组件是使用 JavaScript 设置样式的。颜色属性通常与 CSS 在 Web 上的工作方式相匹配。有关每个平台上颜色使用的一般指南可以在下面找到

颜色 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 也支持将颜色作为 int 值（在 RGB 颜色模式下）

  • 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)