Skip to main content

颜色参考

React Native 中的组件是 使用 JavaScript 设计样式。颜色属性通常与 CSS 在网络上工作。有关每个平台上颜色使用的一般指南可以在下面找到：

¥Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web. General guides on the color usage on each platform could be found below:

颜色 API​

¥Color APIs

React Native 有多个颜色 API，旨在让你充分利用平台的设计和用户偏好。

¥React Native has several color APIs designed to allow you to take full advantage of your platform's design and user preferences.

  • PlatformColor 可让你参考平台的颜色系统。

    ¥PlatformColor lets you reference the platform's color system.

  • DynamicColorIOS 是 iOS 特定的，允许你指定在浅色或夜间模式下应使用哪些颜色。

    ¥DynamicColorIOS is iOS specific and allows you to specify which colors should be used in light or Dark Mode.

颜色表示​

¥Color representations

红绿蓝 (RGB)​

¥Red Green Blue (RGB)

React Native 支持十六进制和函数表示法的 rgb() 和 rgba()：

¥React Native supports rgb() and rgba() in both hexadecimal and functional notation:

  • '#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)​

¥Hue Saturation Lightness (HSL)

React Native 支持函数表示法中的 hsl() 和 hsla()：

¥React Native supports hsl() and hsla() in functional notation:

  • 'hsl(360, 100%, 100%)'

  • 'hsl(360 100% 100%)'

  • 'hsla(360, 100%, 100%, 1.0)'

  • 'hsla(360 100% 100% / 1.0)'

色相 白度 黑度 (HWB)​

¥Hue Whiteness Blackness (HWB)

React Native 支持函数表示法中的 hwb()：

¥React Native supports hwb() in functional notation:

  • 'hwb(0, 0%, 100%)'

  • 'hwb(360, 100%, 100%)'

  • 'hwb(0 0% 0%)'

  • 'hwb(70 50% 0%)'

颜色整数​

¥Color ints

React Native 还支持 int 值的颜色（在 RGB 颜色模式下）：

¥React Native supports also colors as an int values (in RGB color mode):

  • 0xff00ff00（0xrrggbbaa）
提醒

这可能看起来与 Android 颜色 整数表示类似，但在 Android 上，值以 SRGB 颜色模式 (0xaarrggbb) 存储。

¥This might appear similar to the Android Color ints representation but on Android values are stored in SRGB color mode (0xaarrggbb).

命名颜色​

¥Named colors

在 React Native 中，你还可以使用颜色名称字符串作为值。

¥In React Native you can also use color name strings as values.

信息

React Native 仅支持小写颜色名称。不支持大写颜色名称。

¥React Native only supports lowercase color names. Uppercase color names are not supported.

transparent​

这是 rgba(0,0,0,0) 的快捷方式，与 C 中的相同。

¥This is a shortcut for rgba(0,0,0,0), same like in CSS3.

颜色关键词​

¥Color keywords

命名颜色实现遵循 C/SVG 规范：

¥Named colors implementation follows the CSS3/SVG specification:

  • aliceblue (#f0f8ff)

  • 古董白 (#faebd7)

    ¥ antiquewhite (#faebd7)

  • 水色 (#00ffff)

    ¥ aqua (#00ffff)

  • 海蓝宝石 (#7fffd4)

    ¥ aquamarine (#7fffd4)

  • 天蓝色 (#f0ffff)

    ¥ azure (#f0ffff)

  • 米色 (#f5f5dc)

    ¥ beige (#f5f5dc)

  • 素瓷 (#ffe4c4)

    ¥ bisque (#ffe4c4)

  • 黑色 (#000000)

    ¥ black (#000000)

  • 白杏仁 (#ffebcd)

    ¥ blanchedalmond (#ffebcd)

  • 蓝色 (#0000ff)

    ¥ blue (#0000ff)

  • 蓝紫色 (#8a2be2)

    ¥ blueviolet (#8a2be2)

  • 棕色 (#a52a2a)

    ¥ brown (#a52a2a)

  • 实木 (#deb887)

    ¥ burlywood (#deb887)

  • 学员蓝色 (#5f9ea0)

    ¥ cadetblue (#5f9ea0)

  • 黄绿色 (#7fff00)

    ¥ chartreuse (#7fff00)

  • 巧克力 (#d2691e)

    ¥ chocolate (#d2691e)

  • 珊瑚 (#ff7f50)

    ¥ coral (#ff7f50)

  • 矢车菊蓝 (#6495ed)

    ¥ cornflowerblue (#6495ed)

  • 玉米丝 (#fff8dc)

    ¥ cornsilk (#fff8dc)

  • 深红色 (#dc143c)

    ¥ crimson (#dc143c)

  • 青色 (#00ffff)

    ¥ cyan (#00ffff)

  • 深蓝色 (#00008b)

    ¥ darkblue (#00008b)

  • 深青色 (#008b8b)

    ¥ darkcyan (#008b8b)

  • 暗金棒 (#b8860b)

    ¥ darkgoldenrod (#b8860b)

  • 深灰色 (#a9a9a9)

    ¥ darkgray (#a9a9a9)

  • 深绿色 (#006400)

    ¥ darkgreen (#006400)

  • 深灰色 (#a9a9a9)

    ¥ darkgrey (#a9a9a9)

  • 深卡其色 (#bdb76b)

    ¥ darkkhaki (#bdb76b)

  • 深洋红色 (#8b008b)

    ¥ darkmagenta (#8b008b)

  • 深橄榄绿 (#556b2f)

    ¥ darkolivegreen (#556b2f)

  • 深橙 (#ff8c00)

    ¥ darkorange (#ff8c00)

  • 暗兰 (#9932cc)

    ¥ darkorchid (#9932cc)

  • 深红色 (#8b0000)

    ¥ darkred (#8b0000)

  • 黑鲑鱼 (#e9967a)

    ¥ darksalmon (#e9967a)

  • 深海绿 (#8fbc8f)

    ¥ darkseagreen (#8fbc8f)

  • 深石蓝 (#483d8b)

    ¥ darkslateblue (#483d8b)

  • darkslategrey (#2f4f4f)

  • 深绿松石 (#00ced1)

    ¥ darkturquoise (#00ced1)

  • 深紫色 (#9400d3)

    ¥ darkviolet (#9400d3)

  • 深粉色 (#ff1493)

    ¥ deeppink (#ff1493)

  • 深天蓝 (#00bfff)

    ¥ deepskyblue (#00bfff)

  • 暗灰色 (#696969)

    ¥ dimgray (#696969)

  • 暗灰色 (#696969)

    ¥ dimgrey (#696969)

  • 道奇蓝 (#1e90ff)

    ¥ dodgerblue (#1e90ff)

  • 耐火砖 (#b22222)

    ¥ firebrick (#b22222)

  • 花白色 (#fffaf0)

    ¥ floralwhite (#fffaf0)

  • 森林绿 (#228b22)

    ¥ forestgreen (#228b22)

  • 紫红色 (#ff00ff)

    ¥ fuchsia (#ff00ff)

  • 增益伯勒 (#dcdcdc)

    ¥ gainsboro (#dcdcdc)

  • 鬼白 (#f8f8ff)

    ¥ ghostwhite (#f8f8ff)

  • 金色 (#ffd700)

    ¥ gold (#ffd700)

  • 金花 (#daa520)

    ¥ goldenrod (#daa520)

  • 灰色 (#808080)

    ¥ gray (#808080)

  • 绿色 (#008000)

    ¥ green (#008000)

  • 绿黄色 (#adff2f)

    ¥ greenyellow (#adff2f)

  • 灰色 (#808080)

    ¥ grey (#808080)

  • 蜜露 (#f0fff0)

    ¥ honeydew (#f0fff0)

  • 粉色 (#ff69b4)

    ¥ hotpink (#ff69b4)

  • 印度红 (#cd5c5c)

    ¥ indianred (#cd5c5c)

  • 靛蓝 (#4b0082)

    ¥ indigo (#4b0082)

  • 象牙色 (#fffff0)

    ¥ ivory (#fffff0)

  • 卡其色 (#f0e68c)

    ¥ khaki (#f0e68c)

  • 薰衣草 (#e6e6fa)

    ¥ lavender (#e6e6fa)

  • 薰衣草腮红 (#fff0f5)

    ¥ lavenderblush (#fff0f5)

  • 草坪绿 (#7cfc00)

    ¥ lawngreen (#7cfc00)

  • 柠檬雪纺 (#fffacd)

    ¥ lemonchiffon (#fffacd)

  • 浅蓝色 (#add8e6)

    ¥ lightblue (#add8e6)

  • 浅珊瑚 (#f08080)

    ¥ lightcoral (#f08080)

  • 浅青色 (#e0ffff)

    ¥ lightcyan (#e0ffff)

  • 浅金色 (#fafad2)

    ¥ lightgoldenrodyellow (#fafad2)

  • 浅灰色 (#d3d3d3)

    ¥ lightgray (#d3d3d3)

  • 浅绿色 (#90ee90)

    ¥ lightgreen (#90ee90)

  • 浅灰色 (#d3d3d3)

    ¥ lightgrey (#d3d3d3)

  • 浅粉色 (#ffb6c1)

    ¥ lightpink (#ffb6c1)

  • lightsalmon (#ffa07a)

  • lightseagreen (#20b2aa)

  • 浅天蓝色 (#87cefa)

    ¥ lightskyblue (#87cefa)

  • Lightslategrey (#778899)

  • 浅钢蓝 (#b0c4de)

    ¥ lightsteelblue (#b0c4de)

  • 浅黄色 (#ffffe0)

    ¥ lightyellow (#ffffe0)

  • 石灰 (#00ff00)

    ¥ lime (#00ff00)

  • 柠檬绿 (#32cd32)

    ¥ limegreen (#32cd32)

  • 亚麻布 (#faf0e6)

    ¥ linen (#faf0e6)

  • 洋红色 (#ff00ff)

    ¥ magenta (#ff00ff)

  • 栗色 (#800000)

    ¥ maroon (#800000)

  • 中海蓝宝石 (#66cdaa)

    ¥ mediumaquamarine (#66cdaa)

  • 中蓝色 (#0000cd)

    ¥ mediumblue (#0000cd)

  • 中兰花 (#ba55d3)

    ¥ mediumorchid (#ba55d3)

  • 中紫色 (#9370db)

    ¥ mediumpurple (#9370db)

  • mediumseagreen (#3cb371)

  • mediumslateblue (#7b68ee)

  • mediumspringgreen (#00fa9a)

  • 中青绿色 (#48d1cc)

    ¥ mediumturquoise (#48d1cc)

  • 中紫红色 (#c71585)

    ¥ mediumvioletred (#c71585)

  • 午夜蓝 (#191970)

    ¥ midnightblue (#191970)

  • 薄荷奶油 (#f5fffa)

    ¥ mintcream (#f5fffa)

  • 迷雾玫瑰 (#ffe4e1)

    ¥ mistyrose (#ffe4e1)

  • 软皮鞋 (#ffe4b5)

    ¥ moccasin (#ffe4b5)

  • navajowhite (#ffdead)

  • 海军蓝 (#000080)

    ¥ navy (#000080)

  • oldlace (#fdf5e6)

  • 橄榄色 (#808000)

    ¥ olive (#808000)

  • 橄榄色 (#6b8e23)

    ¥ olivedrab (#6b8e23)

  • 橙色 (#ffa500)

    ¥ orange (#ffa500)

  • 橙红色 (#ff4500)

    ¥ orangered (#ff4500)

  • 兰花 (#da70d6)

    ¥ orchid (#da70d6)

  • 苍白金棒 (#eee8aa)

    ¥ palegoldenrod (#eee8aa)

  • 淡绿色 (#98fb98)

    ¥ palegreen (#98fb98)

  • 淡绿松石 (#afeeee)

    ¥ paleturquoise (#afeeee)

  • 淡紫红色 (#db7093)

    ¥ palevioletred (#db7093)

  • 木瓜鞭 (#ffefd5)

    ¥ papayawhip (#ffefd5)

  • 桃花 (#ffdab9)

    ¥ peachpuff (#ffdab9)

  • 秘鲁 (#cd853f)

    ¥ peru (#cd853f)

  • 粉色 (#ffc0cb)

    ¥ pink (#ffc0cb)

  • 梅花 (#dda0dd)

    ¥ plum (#dda0dd)

  • 粉蓝色 (#b0e0e6)

    ¥ powderblue (#b0e0e6)

  • 紫色 (#800080)

    ¥ purple (#800080)

  • 丽贝卡紫 (#663399)

    ¥ rebeccapurple (#663399)

  • 红色 (#ff0000)

    ¥ red (#ff0000)

  • 玫瑰棕色 (#bc8f8f)

    ¥ rosybrown (#bc8f8f)

  • 皇家蓝 (#4169e1)

    ¥ royalblue (#4169e1)

  • 马鞍棕色 (#8b4513)

    ¥ saddlebrown (#8b4513)

  • 三文鱼 (#fa8072)

    ¥ salmon (#fa8072)

  • 沙棕色 (#f4a460)

    ¥ sandybrown (#f4a460)

  • 海绿 (#2e8b57)

    ¥ seagreen (#2e8b57)

  • 贝壳 (#fff5ee)

    ¥ seashell (#fff5ee)

  • 西耶娜 (#a0522d)

    ¥ sienna (#a0522d)

  • 银色 (#c0c0c0)

    ¥ silver (#c0c0c0)

  • 天蓝色 (#87ceeb)

    ¥ skyblue (#87ceeb)

  • 石板蓝 (#6a5acd)

    ¥ slateblue (#6a5acd)

  • 石灰色 (#708090)

    ¥ slategray (#708090)

  • 雪 (#fffafa)

    ¥ snow (#fffafa)

  • 春绿 (#00ff7f)

    ¥ springgreen (#00ff7f)

  • 钢蓝色 (#4682b4)

    ¥ steelblue (#4682b4)

  • 棕褐色 (#d2b48c)

    ¥ tan (#d2b48c)

  • 青色 (#008080)

    ¥ teal (#008080)

  • 蓟 (#d8bfd8)

    ¥ thistle (#d8bfd8)

  • 番茄 (#ff6347)

    ¥ tomato (#ff6347)

  • 绿松石 (#40e0d0)

    ¥ turquoise (#40e0d0)

  • 紫罗兰 (#ee82ee)

    ¥ violet (#ee82ee)

  • 小麦 (#f5deb3)

    ¥ wheat (#f5deb3)

  • 白色 (#ffffff)

    ¥ white (#ffffff)

  • 白烟 (#f5f5f5)

    ¥ whitesmoke (#f5f5f5)

  • 黄色 (#ffff00)

    ¥ yellow (#ffff00)

  • 黄绿色 (#9acd32)

    ¥ yellowgreen (#9acd32)