跳至主内容
版本：当前版本

颜色参考

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

React Native 中的组件通过 JavaScript 进行样式设置。颜色属性通常与 Web 上的 CSS 工作原理保持一致。各平台的颜色使用指南可参考以下文档：

颜色 API​

React Native 提供多个颜色 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 也支持 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)

  • 深灰色 (#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)