颜色参考
React Native 中的组件使用 JavaScript 进行样式化。颜色属性通常与 CSS 在 Web 上的工作方式相匹配。以下是关于每个平台上颜色使用的一般指南
颜色 API
React Native 提供了多种颜色 API，旨在让您充分利用平台的设计和用户偏好。
- PlatformColor 允许您引用平台的颜色系统。
- DynamicColorIOS 是 iOS 特有的 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 也支持将颜色表示为 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)