Color Reference
Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web.
Red-green-blue#
React Native supports rgb() and rgba() in both hexadecimal and functional notation:
'#f0f'(#rgb)'#ff00ff'(#rrggbb)'rgb(255, 0, 255)''rgba(255, 255, 255, 1.0)''#f0ff'(#rgba)'#ff00ff00'(#rrggbbaa)
Hue-saturation-lightness#
hsl() and hsla() is supported in functional notation:
'hsl(360, 100%, 100%)''hsla(360, 100%, 100%, 1.0)'
transparent#
This is a shortcut for rgba(0,0,0,0):
'transparent'
Named colors#
You can also use color names as values. React Native follows the CSS3 specification:
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) darkgray (#a9a9a9) darkgreen (#006400) darkgrey (#a9a9a9) darkkhaki (#bdb76b) darkmagenta (#8b008b) darkolivegreen (#556b2f) darkorange (#ff8c00) darkorchid (#9932cc) darkred (#8b0000) darksalmon (#e9967a) darkseagreen (#8fbc8f) darkslateblue (#483d8b) darkslategrey (#2f4f4f) darkturquoise (#00ced1) darkviolet (#9400d3) deeppink (#ff1493) deepskyblue (#00bfff) dimgray (#696969) dimgrey (#696969) dodgerblue (#1e90ff) firebrick (#b22222) floralwhite (#fffaf0) forestgreen (#228b22) fuchsia (#ff00ff) gainsboro (#dcdcdc) ghostwhite (#f8f8ff) gold (#ffd700) goldenrod (#daa520) gray (#808080) green (#008000) greenyellow (#adff2f) grey (#808080) honeydew (#f0fff0) hotpink (#ff69b4) indianred (#cd5c5c) indigo (#4b0082) ivory (#fffff0) khaki (#f0e68c) lavender (#e6e6fa) lavenderblush (#fff0f5) lawngreen (#7cfc00) lemonchiffon (#fffacd) lightblue (#add8e6) lightcoral (#f08080) lightcyan (#e0ffff) lightgoldenrodyellow (#fafad2) lightgray (#d3d3d3) lightgreen (#90ee90) lightgrey (#d3d3d3) lightpink (#ffb6c1) lightsalmon (#ffa07a) lightseagreen (#20b2aa) lightskyblue (#87cefa) lightslategrey (#778899) lightsteelblue (#b0c4de) lightyellow (#ffffe0) lime (#00ff00) limegreen (#32cd32) linen (#faf0e6) magenta (#ff00ff) maroon (#800000) mediumaquamarine (#66cdaa) mediumblue (#0000cd) mediumorchid (#ba55d3) mediumpurple (#9370db) mediumseagreen (#3cb371) mediumslateblue (#7b68ee) mediumspringgreen (#00fa9a) mediumturquoise (#48d1cc) mediumvioletred (#c71585) midnightblue (#191970) mintcream (#f5fffa) mistyrose (#ffe4e1) moccasin (#ffe4b5) navajowhite (#ffdead) navy (#000080) oldlace (#fdf5e6) olive (#808000) olivedrab (#6b8e23) orange (#ffa500) orangered (#ff4500) orchid (#da70d6) palegoldenrod (#eee8aa) palegreen (#98fb98) paleturquoise (#afeeee) palevioletred (#db7093) papayawhip (#ffefd5) peachpuff (#ffdab9) peru (#cd853f) pink (#ffc0cb) plum (#dda0dd) powderblue (#b0e0e6) purple (#800080) rebeccapurple (#663399) red (#ff0000) rosybrown (#bc8f8f) royalblue (#4169e1) saddlebrown (#8b4513) salmon (#fa8072) sandybrown (#f4a460) seagreen (#2e8b57) seashell (#fff5ee) sienna (#a0522d) silver (#c0c0c0) skyblue (#87ceeb) slateblue (#6a5acd) slategray (#708090) snow (#fffafa) springgreen (#00ff7f) steelblue (#4682b4) tan (#d2b48c) teal (#008080) thistle (#d8bfd8) tomato (#ff6347) turquoise (#40e0d0) violet (#ee82ee) wheat (#f5deb3) white (#ffffff) whitesmoke (#f5f5f5) yellow (#ffff00) yellowgreen (#9acd32)