Skip to main content
Version: 0.62

Color Reference

Components in React Native are styled using JavaScript. Color properties usually match how CSS works on the web.

Red Green Blue (RGB)​

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

  • '#f0f' (#rgb)
  • '#ff00ff' (#rrggbb)
  • '#f0ff' (#rgba)
  • '#ff00ff00' (#rrggbbaa)
  • 'rgb(255, 0, 255)'
  • 'rgba(255, 0, 255, 1.0)'

Hue Saturation Lightness (HSL)​

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

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

Color ints​

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

  • 0xff00ff00 (0xrrggbbaa)

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

Named colors​

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

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

transparent​

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

Color keywords​

Named colors implementation follows the CSS3/SVG 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 (`#fafad2`)
  • 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 (`#00fa9a`)
  • 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`)