Skip to main content

Color reference

Components in React Native are styled using JavaScript. Color properties usually correspond to how CSS works on the web. General guidelines for using color on each platform can be found below:

Color representations​

Red Green Blue (RGB)​

Red, green, blue an additive color model that describes a way of coding a color for color reproduction using three colors, which are commonly called primary. The choice of primary colors is due to the physiological features of color perception by the retina of the human eye. 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)​

A color model in which the color coordinates are hue, saturation, and lightness. React Native supports hsl () and hsla () in functional notation:

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

Named colors​

In React Native, you can also use strings with color names 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), the same as in CSS3.

The 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 (`#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`)

Questions​

What language are components styled with in React Native?

  1. HTML
  2. CSS
  3. JavaScript

Do color properties in React Native usually match how CSS works on the web?

  1. true
  2. false

In what notation React Native does not support rgb() and rgba()?

  1. octal
  2. hexadecimal
  3. functional

Does React Native support hsl() and hsla()?

  1. true
  2. false

Can you use strings with color names as values in React Native?

  1. true
  2. false

To see how well you learned this lesson, take the test in the mobile application of our school on this topic or in the telegram bot.

EnglishMoji!

  1. React Native

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev
💲

EnglishMoji!