跳到主要内容

颜色参考

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 规范

  • 爱丽丝蓝 (#f0f8ff)
  • 古董白 (#faebd7)
  • 水色 (#00ffff)
  • 海水绿 (#7fffd4)
  • 天蓝色 (#f0ffff)
  • 米色 (#f5f5dc)
  • 桔黄色 (#ffe4c4)
  • 黑色 (#000000)
  • 杏仁白 (#ffebcd)
  • 蓝色 (#0000ff)
  • 蓝紫色 (#8a2be2)
  • 棕色 (#a52a2a)
  • 熟褐色 (#deb887)
  • 军蓝色 (#5f9ea0)
  • 黄绿色 (#7fff00)
  • 巧克力色 (#d2691e)
  • 珊瑚色 (#ff7f50)
  • 矢车菊蓝 (#6495ed)
  • 米白色 (#fff8dc)
  • 深红色 (#dc143c)
  • 青色 (#00ffff)
  • 深蓝色 (#00008b)
  • 深青色 (#008b8b)
  • 深金杆色 (#b8860b)
  • 深灰色 (#a9a9a9)
  • 深绿色 (#006400)
  • 深灰色 (#a9a9a9)
  • 深卡其色 (#bdb76b)
  • 深品红色 (#8b008b)
  • 深橄榄绿 (#556b2f)
  • 深橙色 (#ff8c00)
  • 深兰花色 (#9932cc)
  • 深红色 (#8b0000)
  • 深三文鱼色 (#e9967a)
  • 深海绿色 (#8fbc8f)
  • 深石板蓝 (#483d8b)
  • 深石板灰 (#2f4f4f)
  • 深绿松石色 (#00ced1)
  • 深紫罗兰色 (#9400d3)
  • 深粉色 (#ff1493)
  • 深天蓝色 (#00bfff)
  • 暗灰色 (#696969)
  • 暗灰色 (#696969)
  • 道奇蓝 (#1e90ff)
  • 砖红色 (#b22222)
  • 花白色 (#fffaf0)
  • 森林绿 (#228b22)
  • 紫红色 (#ff00ff)
  • 灰白色 (#dcdcdc)
  • 幽灵白 (#f8f8ff)
  • 金色 (#ffd700)
  • 金杆色 (#daa520)
  • 灰色 (#808080)
  • 绿色 (#008000)
  • 黄绿色 (#adff2f)
  • 灰色 (#808080)
  • 蜜露色 (#f0fff0)
  • 艳粉色 (#ff69b4)
  • 印度红 (#cd5c5c)
  • 靛蓝色 (#4b0082)
  • 象牙白 (#fffff0)
  • 卡其色 (#f0e68c)
  • 薰衣草色 (#e6e6fa)
  • 薰衣草红 (#fff0f5)
  • 草坪绿 (#7cfc00)
  • 柠檬绸色 (#fffacd)
  • 浅蓝色 (#add8e6)
  • 浅珊瑚色 (#f08080)
  • 浅青色 (#e0ffff)
  • 浅金杆黄 (#fafad2)
  • 浅灰色 (#d3d3d3)
  • 浅绿色 (#90ee90)
  • 浅灰色 (#d3d3d3)
  • 浅粉色 (#ffb6c1)
  • 浅三文鱼色 (#ffa07a)
  • 浅海绿色 (#20b2aa)
  • 浅天蓝色 (#87cefa)
  • 浅石板灰 (#778899)
  • 浅钢蓝色 (#b0c4de)
  • 浅黄色 (#ffffe0)
  • 酸橙绿 (#00ff00)
  • 酸橙绿 (#32cd32)
  • 亚麻色 (#faf0e6)
  • 品红色 (#ff00ff)
  • 褐红色 (#800000)
  • 中等海蓝色 (#66cdaa)
  • 中蓝色 (#0000cd)
  • 中等兰花色 (#ba55d3)
  • 中等紫色 (#9370db)
  • 中等海绿色 (#3cb371)
  • 中等石板蓝 (#7b68ee)
  • 中等春绿色 (#00fa9a)
  • 中等绿松石色 (#48d1cc)
  • 中等紫罗兰红 (#c71585)
  • 午夜蓝 (#191970)
  • 薄荷奶油色 (#f5fffa)
  • 雾玫瑰色 (#ffe4e1)
  • 鹿皮鞋色 (#ffe4b5)
  • 纳瓦霍白 (#ffdead)
  • 海军蓝 (#000080)
  • 旧蕾丝色 (#fdf5e6)
  • 橄榄色 (#808000)
  • 橄榄褐色 (#6b8e23)
  • 橙色 (#ffa500)
  • 橙红色 (#ff4500)
  • 兰花色 (#da70d6)
  • 苍白金杆色 (#eee8aa)
  • 苍白绿 (#98fb98)
  • 苍白绿松石色 (#afeeee)
  • 苍白紫罗兰红 (#db7093)
  • 番木瓜鞭色 (#ffefd5)
  • 桃色 (#ffdab9)
  • 秘鲁色 (#cd853f)
  • 粉红色 (#ffc0cb)
  • 李子色 (#dda0dd)
  • 粉蓝色 (#b0e0e6)
  • 紫色 (#800080)
  • 丽贝卡紫 (#663399)
  • 红色 (#ff0000)
  • 玫瑰棕色 (#bc8f8f)
  • 皇家蓝 (#4169e1)
  • 马鞍棕色 (#8b4513)
  • 三文鱼色 (#fa8072)
  • 沙棕色 (#f4a460)
  • 海绿色 (#2e8b57)
  • 海贝色 (#fff5ee)
  • 赭色 (#a0522d)
  • 银色 (#c0c0c0)
  • 天蓝色 (#87ceeb)
  • 石板蓝 (#6a5acd)
  • 石板灰 (#708090)
  • 雪色 (#fffafa)
  • 春绿色 (#00ff7f)
  • 钢蓝色 (#4682b4)
  • 茶色 (#d2b48c)
  • 水鸭色 (#008080)
  • 蓟色 (#d8bfd8)
  • 番茄色 (#ff6347)
  • 绿松石色 (#40e0d0)
  • 紫罗兰色 (#ee82ee)
  • 小麦色 (#f5deb3)
  • 白色 (#ffffff)
  • 白烟色 (#f5f5f5)
  • 黄色 (#ffff00)
  • 黄绿色 (#9acd32)