Version: 0.60

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:

  • #f0f8ff 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)
  • #2f4f4f 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)
  • #ffa07a lightsalmon (#ffa07a)
  • #20b2aa lightseagreen (#20b2aa)
  • #87cefa lightskyblue (#87cefa)
  • #778899 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)
  • #3cb371 mediumseagreen (#3cb371)
  • #7b68ee mediumslateblue (#7b68ee)
  • #00fa9a mediumspringgreen (#00fa9a)
  • #48d1cc mediumturquoise (#48d1cc)
  • #c71585 mediumvioletred (#c71585)
  • #191970 midnightblue (#191970)
  • #f5fffa mintcream (#f5fffa)
  • #ffe4e1 mistyrose (#ffe4e1)
  • #ffe4b5 moccasin (#ffe4b5)
  • #ffdead navajowhite (#ffdead)
  • #000080 navy (#000080)
  • #fdf5e6 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)
Last updated on by teikjun