跳到主要内容
版本:0.79

颜色参考

React Native 中的组件使用 JavaScript 进行样式设置。颜色属性通常与 Web 上的 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 还支持将颜色作为 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)