颜色参考
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
)