Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
React Native: Color Reference
3.
Color representations
3.1.
Red Green Blue 
3.2.
Hue Saturation Lightness
3.3.
Color ints
3.4.
Color keywords
4.
Frequently Asked Questions
4.1.
Is React Native the same as Reactjs?
4.2.
Is it MVVM or MV in React?
4.3.
Is it really worth investing in React Native in 2022?
5.
Conclusion
Last Updated: Mar 27, 2024
Easy

React Native Colour Reference

Author Akshit Pant
0 upvote
Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

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

Let us assume that you have a basic understanding of programming languages and are familiar with basic React Native Introduction. In this blog, we will be covering Color References.

So let us start with the basic idea of what Color Reference in React Native is.

Click on the following link to read further: Hooks in React JS

React Native: Color Reference

Colors are an essential component of any visual object. Colors play an essential part in enhancing the User Interface and User Experience of software, applications, and websites. Color can also be used to improve the user interface of websites or apps. JavaScript is used to style the React Native Components. Color properties work in the same way as CSS does on the web. There are a variety of colour APIs that allow us to take use of the platform's design and a user's preferences.

PlatformColor is used to refer to the platform's colour scheme.

Only for iOS, DynamicColorIOS allows us to choose which colours are appropriate for use in Dark and Light Modes.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Color representations

Some methods of representation for the Color Reference Component are mentioned below.

Red Green Blue 

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

'rgb(255, 0, 255)'

'rgba(255, 0, 255, 1.0)'

'#f0f' (#rgb)

'#ff00ff' (#rrggbb)

'#f0ff' (#rgba)

'#ff00ff00' (#rrggbbaa)

Hue Saturation Lightness

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

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

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

Color ints

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

0xff00ff00 (0xrrggbbaa).

Note that while this may appear to be comparable to the Android Color ints representation, values on Android are saved in SRGB color mode (0xaarrggbb).

Color keywords

Named colors implementation follows the CSS3/SVG specification:

  • 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`)
  • 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`)

Also see,  React Native Reanimated

Also Read, React Native Paper, React devtools

Frequently Asked Questions

Is React Native the same as Reactjs?

While Reactjs is essentially a JavaScript library and React Native is the whole framework, the former is at the heart of the latter and the two operate well together. If Reactjs is best for generating high-functioning apps with complicated computations, then React Native is best for giving your mobile apps a native feel.

Is it MVVM or MV in React?

React is basically the VVM of MVVM. You are in charge of the model and it is usually determined by the type of state management employed.

Is it really worth investing in React Native in 2022?

React Native is one of  the greatest choice for cross-platform app development in 2022, thanks to its quite intuitive architecture, live time reloading, and quick enough development timeframes, as well as good performance again and again and code reusability across platforms (iOS, Android, and web).

Conclusion

In this article, we learned about Colors reference in React Native and its working implementation by showcasing a working example.
We hope that this article has aided you in your quest to become a better Dart player. Check out our articles on environment setup and Competitive Programming for more information. Please upvote this article to assist other ninjas in their development.
Happy Coding!

Live masterclass