Files
react-native/docs/colors.html
T
Website Deployment Script 69a8ce7fab Updated docs for 0.45
2017-06-07 21:46:19 +00:00

19 lines
34 KiB
HTML

<!DOCTYPE html><html><head><title>Color Reference</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="Color Reference"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.45</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li><li><a href="/react-native/blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:10px;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:10px;" class="" href="docs/tutorial.html">Tutorial</a></li><li><a style="margin-left:10px;" class="" href="docs/props.html">Props</a></li><li><a style="margin-left:10px;" class="" href="docs/state.html">State</a></li><li><a style="margin-left:10px;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:10px;" class="" href="docs/height-and-width.html">Height and Width</a></li><li><a style="margin-left:10px;" class="" href="docs/flexbox.html">Layout with Flexbox</a></li><li><a style="margin-left:10px;" class="" href="docs/handling-text-input.html">Handling Text Input</a></li><li><a style="margin-left:10px;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-scrollview.html">Using a ScrollView</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-listview.html">Using List Views</a></li><li><a style="margin-left:10px;" class="" href="docs/network.html">Networking</a></li><li><a style="margin-left:10px;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:10px;" class="" href="docs/components-and-apis.html">Components and APIs</a></li><li><a style="margin-left:10px;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:10px;" class="" href="docs/navigation.html">Navigating Between Screens</a></li><li><a style="margin-left:10px;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:10px;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:10px;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:10px;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:10px;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:10px;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:10px;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li><li><a style="margin-left:10px;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:10px;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:10px;" class="active" href="docs/colors.html">Color Reference</a></li><li><a style="margin-left:10px;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:10px;" class="" href="docs/running-on-device.html">Running On Device</a></li><li><a style="margin-left:10px;" class="" href="docs/upgrading.html">Upgrading to new React Native versions</a></li><li><a style="margin-left:10px;" class="" href="docs/testing.html">Running Tests and Contributing</a></li><li><a style="margin-left:10px;" class="" href="docs/understanding-cli.html">Understanding the CLI</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:10px;" class="" href="docs/native-modules-ios.html">Native Modules</a></li><li><a style="margin-left:10px;" class="" href="docs/native-components-ios.html">Native UI Components</a></li><li><a style="margin-left:10px;" class="" href="docs/linking-libraries-ios.html">Linking Libraries</a></li><li><a style="margin-left:10px;" class="" href="docs/running-on-simulator-ios.html">Running On Simulator</a></li><li><a style="margin-left:10px;" class="" href="docs/communication-ios.html">Communication between native and React Native</a></li><li><a style="margin-left:10px;" class="" href="docs/building-for-apple-tv.html">Building For Apple TV</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:10px;" class="" href="docs/native-modules-android.html">Native Modules</a></li><li><a style="margin-left:10px;" class="" href="docs/native-components-android.html">Native UI Components</a></li><li><a style="margin-left:10px;" class="" href="docs/headless-js-android.html">Headless JS</a></li><li><a style="margin-left:10px;" class="" href="docs/signed-apk-android.html">Generating Signed APK</a></li><li><a style="margin-left:10px;" class="" href="docs/android-building-from-source.html">Building React Native from source</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:10px;" class="" href="docs/activityindicator.html">ActivityIndicator</a></li><li><a style="margin-left:10px;" class="" href="docs/button.html">Button</a></li><li><a style="margin-left:10px;" class="" href="docs/datepickerios.html">DatePickerIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/drawerlayoutandroid.html">DrawerLayoutAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/flatlist.html">FlatList</a></li><li><a style="margin-left:10px;" class="" href="docs/image.html">Image</a></li><li><a style="margin-left:10px;" class="" href="docs/keyboardavoidingview.html">KeyboardAvoidingView</a></li><li><a style="margin-left:10px;" class="" href="docs/listview.html">ListView</a></li><li><a style="margin-left:10px;" class="" href="docs/modal.html">Modal</a></li><li><a style="margin-left:10px;" class="" href="docs/navigatorios.html">NavigatorIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/picker.html">Picker</a></li><li><a style="margin-left:10px;" class="" href="docs/pickerios.html">PickerIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/progressbarandroid.html">ProgressBarAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/progressviewios.html">ProgressViewIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/refreshcontrol.html">RefreshControl</a></li><li><a style="margin-left:10px;" class="" href="docs/scrollview.html">ScrollView</a></li><li><a style="margin-left:10px;" class="" href="docs/sectionlist.html">SectionList</a></li><li><a style="margin-left:10px;" class="" href="docs/segmentedcontrolios.html">SegmentedControlIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/slider.html">Slider</a></li><li><a style="margin-left:10px;" class="" href="docs/snapshotviewios.html">SnapshotViewIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/statusbar.html">StatusBar</a></li><li><a style="margin-left:10px;" class="" href="docs/switch.html">Switch</a></li><li><a style="margin-left:10px;" class="" href="docs/tabbarios.html">TabBarIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/tabbarios-item.html">TabBarIOS.Item</a></li><li><a style="margin-left:10px;" class="" href="docs/text.html">Text</a></li><li><a style="margin-left:10px;" class="" href="docs/textinput.html">TextInput</a></li><li><a style="margin-left:10px;" class="" href="docs/toolbarandroid.html">ToolbarAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/touchablehighlight.html">TouchableHighlight</a></li><li><a style="margin-left:10px;" class="" href="docs/touchablenativefeedback.html">TouchableNativeFeedback</a></li><li><a style="margin-left:10px;" class="" href="docs/touchableopacity.html">TouchableOpacity</a></li><li><a style="margin-left:10px;" class="" href="docs/touchablewithoutfeedback.html">TouchableWithoutFeedback</a></li><li><a style="margin-left:10px;" class="" href="docs/view.html">View</a></li><li><a style="margin-left:10px;" class="" href="docs/viewpagerandroid.html">ViewPagerAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/virtualizedlist.html">VirtualizedList</a></li><li><a style="margin-left:10px;" class="" href="docs/webview.html">WebView</a></li></ul></div><div class="nav-docs-section"><h3>APIs</h3><ul><li><a style="margin-left:10px;" class="" href="docs/accessibilityinfo.html">AccessibilityInfo</a></li><li><a style="margin-left:10px;" class="" href="docs/actionsheetios.html">ActionSheetIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/adsupportios.html">AdSupportIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/alert.html">Alert</a></li><li><a style="margin-left:10px;" class="" href="docs/alertios.html">AlertIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/animated.html">Animated</a></li><li><a style="margin-left:10px;" class="" href="docs/appregistry.html">AppRegistry</a></li><li><a style="margin-left:10px;" class="" href="docs/appstate.html">AppState</a></li><li><a style="margin-left:10px;" class="" href="docs/asyncstorage.html">AsyncStorage</a></li><li><a style="margin-left:10px;" class="" href="docs/backandroid.html">BackAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/backhandler.html">BackHandler</a></li><li><a style="margin-left:10px;" class="" href="docs/cameraroll.html">CameraRoll</a></li><li><a style="margin-left:10px;" class="" href="docs/clipboard.html">Clipboard</a></li><li><a style="margin-left:10px;" class="" href="docs/datepickerandroid.html">DatePickerAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/dimensions.html">Dimensions</a></li><li><a style="margin-left:10px;" class="" href="docs/easing.html">Easing</a></li><li><a style="margin-left:10px;" class="" href="docs/geolocation.html">Geolocation</a></li><li><a style="margin-left:10px;" class="" href="docs/imageeditor.html">ImageEditor</a></li><li><a style="margin-left:10px;" class="" href="docs/imagepickerios.html">ImagePickerIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/imagestore.html">ImageStore</a></li><li><a style="margin-left:10px;" class="" href="docs/interactionmanager.html">InteractionManager</a></li><li><a style="margin-left:10px;" class="" href="docs/keyboard.html">Keyboard</a></li><li><a style="margin-left:10px;" class="" href="docs/layoutanimation.html">LayoutAnimation</a></li><li><a style="margin-left:10px;" class="" href="docs/linking.html">Linking</a></li><li><a style="margin-left:10px;" class="" href="docs/nativemethodsmixin.html">NativeMethodsMixin</a></li><li><a style="margin-left:10px;" class="" href="docs/netinfo.html">NetInfo</a></li><li><a style="margin-left:10px;" class="" href="docs/panresponder.html">PanResponder</a></li><li><a style="margin-left:10px;" class="" href="docs/permissionsandroid.html">PermissionsAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/pixelratio.html">PixelRatio</a></li><li><a style="margin-left:10px;" class="" href="docs/pushnotificationios.html">PushNotificationIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/settings.html">Settings</a></li><li><a style="margin-left:10px;" class="" href="docs/share.html">Share</a></li><li><a style="margin-left:10px;" class="" href="docs/statusbarios.html">StatusBarIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/stylesheet.html">StyleSheet</a></li><li><a style="margin-left:10px;" class="" href="docs/systrace.html">Systrace</a></li><li><a style="margin-left:10px;" class="" href="docs/timepickerandroid.html">TimePickerAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/toastandroid.html">ToastAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/vibration.html">Vibration</a></li><li><a style="margin-left:10px;" class="" href="docs/vibrationios.html">VibrationIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/layout-props.html">Layout Props</a></li><li><a style="margin-left:10px;" class="" href="docs/shadow-props.html">Shadow Props</a></li></ul></div></div></div><div class="inner-content"><a id="content"></a><h1><a class="anchor" name="color-reference"></a>Color Reference <a class="hash-link" href="docs/colors.html#color-reference">#</a></h1><div><p>Components in React Native are <a href="docs/styles.html" target="_blank">styled using JavaScript</a>. Color properties usually match how <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank">CSS works on the web</a>.</p><h3><a class="anchor" name="red-green-blue"></a>Red-green-blue <a class="hash-link" href="docs/colors.html#red-green-blue">#</a></h3><p>React Native supports <code>rgb()</code> and <code>rgba()</code> in both hexadecimal and functional notation:</p><ul><li><code>&#x27;#f0f&#x27;</code> (#rgb)</li><li><p><code>&#x27;#ff00ff&#x27;</code> (#rrggbb)</p></li><li><p><code>&#x27;rgb(255, 0, 255)&#x27;</code></p></li><li><p><code>&#x27;rgba(255, 255, 255, 1.0)&#x27;</code></p></li><li><p><code>&#x27;#f0ff&#x27;</code> (#rgba)</p></li><li><code>&#x27;#ff00ff00&#x27;</code> (#rrggbbaa)</li></ul><h3><a class="anchor" name="hue-saturation-lightness"></a>Hue-saturation-lightness <a class="hash-link" href="docs/colors.html#hue-saturation-lightness">#</a></h3><p><code>hsl()</code> and <code>hsla()</code> is supported in functional notation:</p><ul><li><code>&#x27;hsl(360, 100%, 100%)&#x27;</code></li><li><code>&#x27;hsla(360, 100%, 100%, 1.0)&#x27;</code></li></ul><h3><a class="anchor" name="transparent"></a><code>transparent</code> <a class="hash-link" href="docs/colors.html#transparent">#</a></h3><p>This is a shortcut for <code>rgba(0,0,0,0)</code>:</p><ul><li><code>&#x27;transparent&#x27;</code></li></ul><h3><a class="anchor" name="named-colors"></a>Named colors <a class="hash-link" href="docs/colors.html#named-colors">#</a></h3><p>You can also use color names as values. React Native follows the <a href="http://www.w3.org/TR/css3-color/#svg-color" target="_blank">CSS3 specification</a>:</p><ul><li><span class="color" style="background-color:aliceblue;"></span> aliceblue (#f0f8ff)</li><li><span class="color" style="background-color:antiquewhite;"></span> antiquewhite (#faebd7)</li><li><span class="color" style="background-color:aqua;"></span> aqua (#00ffff)</li><li><span class="color" style="background-color:aquamarine;"></span> aquamarine (#7fffd4)</li><li><span class="color" style="background-color:azure;"></span> azure (#f0ffff)</li><li><span class="color" style="background-color:beige;"></span> beige (#f5f5dc)</li><li><span class="color" style="background-color:bisque;"></span> bisque (#ffe4c4)</li><li><span class="color" style="background-color:black;"></span> black (#000000)</li><li><span class="color" style="background-color:blanchedalmond;"></span> blanchedalmond (#ffebcd)</li><li><span class="color" style="background-color:blue;"></span> blue (#0000ff)</li><li><span class="color" style="background-color:blueviolet;"></span> blueviolet (#8a2be2)</li><li><span class="color" style="background-color:brown;"></span> brown (#a52a2a)</li><li><span class="color" style="background-color:burlywood;"></span> burlywood (#deb887)</li><li><span class="color" style="background-color:cadetblue;"></span> cadetblue (#5f9ea0)</li><li><span class="color" style="background-color:chartreuse;"></span> chartreuse (#7fff00)</li><li><span class="color" style="background-color:chocolate;"></span> chocolate (#d2691e)</li><li><span class="color" style="background-color:coral;"></span> coral (#ff7f50)</li><li><span class="color" style="background-color:cornflowerblue;"></span> cornflowerblue (#6495ed)</li><li><span class="color" style="background-color:cornsilk;"></span> cornsilk (#fff8dc)</li><li><span class="color" style="background-color:crimson;"></span> crimson (#dc143c)</li><li><span class="color" style="background-color:cyan;"></span> cyan (#00ffff)</li><li><span class="color" style="background-color:darkblue;"></span> darkblue (#00008b)</li><li><span class="color" style="background-color:darkcyan;"></span> darkcyan (#008b8b)</li><li><span class="color" style="background-color:darkgoldenrod;"></span> darkgoldenrod (#b8860b)</li><li><span class="color" style="background-color:darkgray;"></span> darkgray (#a9a9a9)</li><li><span class="color" style="background-color:darkgreen;"></span> darkgreen (#006400)</li><li><span class="color" style="background-color:darkgrey;"></span> darkgrey (#a9a9a9)</li><li><span class="color" style="background-color:darkkhaki;"></span> darkkhaki (#bdb76b)</li><li><span class="color" style="background-color:darkmagenta;"></span> darkmagenta (#8b008b)</li><li><span class="color" style="background-color:darkolivegreen;"></span> darkolivegreen (#556b2f)</li><li><span class="color" style="background-color:darkorange;"></span> darkorange (#ff8c00)</li><li><span class="color" style="background-color:darkorchid;"></span> darkorchid (#9932cc)</li><li><span class="color" style="background-color:darkred;"></span> darkred (#8b0000)</li><li><span class="color" style="background-color:darksalmon;"></span> darksalmon (#e9967a)</li><li><span class="color" style="background-color:darkseagreen;"></span> darkseagreen (#8fbc8f)</li><li><span class="color" style="background-color:darkslateblue;"></span> darkslateblue (#483d8b)</li><li><span class="color" style="background-color:darkslategrey;"></span> darkslategrey (#2f4f4f)</li><li><span class="color" style="background-color:darkturquoise;"></span> darkturquoise (#00ced1)</li><li><span class="color" style="background-color:darkviolet;"></span> darkviolet (#9400d3)</li><li><span class="color" style="background-color:deeppink;"></span> deeppink (#ff1493)</li><li><span class="color" style="background-color:deepskyblue;"></span> deepskyblue (#00bfff)</li><li><span class="color" style="background-color:dimgray;"></span> dimgray (#696969)</li><li><span class="color" style="background-color:dimgrey;"></span> dimgrey (#696969)</li><li><span class="color" style="background-color:dodgerblue;"></span> dodgerblue (#1e90ff)</li><li><span class="color" style="background-color:firebrick;"></span> firebrick (#b22222)</li><li><span class="color" style="background-color:floralwhite;"></span> floralwhite (#fffaf0)</li><li><span class="color" style="background-color:forestgreen;"></span> forestgreen (#228b22)</li><li><span class="color" style="background-color:fuchsia;"></span> fuchsia (#ff00ff)</li><li><span class="color" style="background-color:gainsboro;"></span> gainsboro (#dcdcdc)</li><li><span class="color" style="background-color:ghostwhite;"></span> ghostwhite (#f8f8ff)</li><li><span class="color" style="background-color:gold;"></span> gold (#ffd700)</li><li><span class="color" style="background-color:goldenrod;"></span> goldenrod (#daa520)</li><li><span class="color" style="background-color:gray;"></span> gray (#808080)</li><li><span class="color" style="background-color:green;"></span> green (#008000)</li><li><span class="color" style="background-color:greenyellow;"></span> greenyellow (#adff2f)</li><li><span class="color" style="background-color:grey;"></span> grey (#808080)</li><li><span class="color" style="background-color:honeydew;"></span> honeydew (#f0fff0)</li><li><span class="color" style="background-color:hotpink;"></span> hotpink (#ff69b4)</li><li><span class="color" style="background-color:indianred;"></span> indianred (#cd5c5c)</li><li><span class="color" style="background-color:indigo;"></span> indigo (#4b0082)</li><li><span class="color" style="background-color:ivory;"></span> ivory (#fffff0)</li><li><span class="color" style="background-color:khaki;"></span> khaki (#f0e68c)</li><li><span class="color" style="background-color:lavender;"></span> lavender (#e6e6fa)</li><li><span class="color" style="background-color:lavenderblush;"></span> lavenderblush (#fff0f5)</li><li><span class="color" style="background-color:lawngreen;"></span> lawngreen (#7cfc00)</li><li><span class="color" style="background-color:lemonchiffon;"></span> lemonchiffon (#fffacd)</li><li><span class="color" style="background-color:lightblue;"></span> lightblue (#add8e6)</li><li><span class="color" style="background-color:lightcoral;"></span> lightcoral (#f08080)</li><li><span class="color" style="background-color:lightcyan;"></span> lightcyan (#e0ffff)</li><li><span class="color" style="background-color:lightgoldenrodyellow;"></span> lightgoldenrodyellow (#fafad2)</li><li><span class="color" style="background-color:lightgray;"></span> lightgray (#d3d3d3)</li><li><span class="color" style="background-color:lightgreen;"></span> lightgreen (#90ee90)</li><li><span class="color" style="background-color:lightgrey;"></span> lightgrey (#d3d3d3)</li><li><span class="color" style="background-color:lightpink;"></span> lightpink (#ffb6c1)</li><li><span class="color" style="background-color:lightsalmon;"></span> lightsalmon (#ffa07a)</li><li><span class="color" style="background-color:lightseagreen;"></span> lightseagreen (#20b2aa)</li><li><span class="color" style="background-color:lightskyblue;"></span> lightskyblue (#87cefa)</li><li><span class="color" style="background-color:lightslategrey;"></span> lightslategrey (#778899)</li><li><span class="color" style="background-color:lightsteelblue;"></span> lightsteelblue (#b0c4de)</li><li><span class="color" style="background-color:lightyellow;"></span> lightyellow (#ffffe0)</li><li><span class="color" style="background-color:lime;"></span> lime (#00ff00)</li><li><span class="color" style="background-color:limegreen;"></span> limegreen (#32cd32)</li><li><span class="color" style="background-color:linen;"></span> linen (#faf0e6)</li><li><span class="color" style="background-color:magenta;"></span> magenta (#ff00ff)</li><li><span class="color" style="background-color:maroon;"></span> maroon (#800000)</li><li><span class="color" style="background-color:mediumaquamarine;"></span> mediumaquamarine (#66cdaa)</li><li><span class="color" style="background-color:mediumblue;"></span> mediumblue (#0000cd)</li><li><span class="color" style="background-color:mediumorchid;"></span> mediumorchid (#ba55d3)</li><li><span class="color" style="background-color:mediumpurple;"></span> mediumpurple (#9370db)</li><li><span class="color" style="background-color:mediumseagreen;"></span> mediumseagreen (#3cb371)</li><li><span class="color" style="background-color:mediumslateblue;"></span> mediumslateblue (#7b68ee)</li><li><span class="color" style="background-color:mediumspringgreen;"></span> mediumspringgreen (#00fa9a)</li><li><span class="color" style="background-color:mediumturquoise;"></span> mediumturquoise (#48d1cc)</li><li><span class="color" style="background-color:mediumvioletred;"></span> mediumvioletred (#c71585)</li><li><span class="color" style="background-color:midnightblue;"></span> midnightblue (#191970)</li><li><span class="color" style="background-color:mintcream;"></span> mintcream (#f5fffa)</li><li><span class="color" style="background-color:mistyrose;"></span> mistyrose (#ffe4e1)</li><li><span class="color" style="background-color:moccasin;"></span> moccasin (#ffe4b5)</li><li><span class="color" style="background-color:navajowhite;"></span> navajowhite (#ffdead)</li><li><span class="color" style="background-color:navy;"></span> navy (#000080)</li><li><span class="color" style="background-color:oldlace;"></span> oldlace (#fdf5e6)</li><li><span class="color" style="background-color:olive;"></span> olive (#808000)</li><li><span class="color" style="background-color:olivedrab;"></span> olivedrab (#6b8e23)</li><li><span class="color" style="background-color:orange;"></span> orange (#ffa500)</li><li><span class="color" style="background-color:orangered;"></span> orangered (#ff4500)</li><li><span class="color" style="background-color:orchid;"></span> orchid (#da70d6)</li><li><span class="color" style="background-color:palegoldenrod;"></span> palegoldenrod (#eee8aa)</li><li><span class="color" style="background-color:palegreen;"></span> palegreen (#98fb98)</li><li><span class="color" style="background-color:paleturquoise;"></span> paleturquoise (#afeeee)</li><li><span class="color" style="background-color:palevioletred;"></span> palevioletred (#db7093)</li><li><span class="color" style="background-color:papayawhip;"></span> papayawhip (#ffefd5)</li><li><span class="color" style="background-color:peachpuff;"></span> peachpuff (#ffdab9)</li><li><span class="color" style="background-color:peru;"></span> peru (#cd853f)</li><li><span class="color" style="background-color:pink;"></span> pink (#ffc0cb)</li><li><span class="color" style="background-color:plum;"></span> plum (#dda0dd)</li><li><span class="color" style="background-color:powderblue;"></span> powderblue (#b0e0e6)</li><li><span class="color" style="background-color:purple;"></span> purple (#800080)</li><li><span class="color" style="background-color:rebeccapurple;"></span> rebeccapurple (#663399)</li><li><span class="color" style="background-color:red;"></span> red (#ff0000)</li><li><span class="color" style="background-color:rosybrown;"></span> rosybrown (#bc8f8f)</li><li><span class="color" style="background-color:royalblue;"></span> royalblue (#4169e1)</li><li><span class="color" style="background-color:saddlebrown;"></span> saddlebrown (#8b4513)</li><li><span class="color" style="background-color:salmon;"></span> salmon (#fa8072)</li><li><span class="color" style="background-color:sandybrown;"></span> sandybrown (#f4a460)</li><li><span class="color" style="background-color:seagreen;"></span> seagreen (#2e8b57)</li><li><span class="color" style="background-color:seashell;"></span> seashell (#fff5ee)</li><li><span class="color" style="background-color:sienna;"></span> sienna (#a0522d)</li><li><span class="color" style="background-color:silver;"></span> silver (#c0c0c0)</li><li><span class="color" style="background-color:skyblue;"></span> skyblue (#87ceeb)</li><li><span class="color" style="background-color:slateblue;"></span> slateblue (#6a5acd)</li><li><span class="color" style="background-color:slategray;"></span> slategray (#708090)</li><li><span class="color" style="background-color:snow;"></span> snow (#fffafa)</li><li><span class="color" style="background-color:springgreen;"></span> springgreen (#00ff7f)</li><li><span class="color" style="background-color:steelblue;"></span> steelblue (#4682b4)</li><li><span class="color" style="background-color:tan;"></span> tan (#d2b48c)</li><li><span class="color" style="background-color:teal;"></span> teal (#008080)</li><li><span class="color" style="background-color:thistle;"></span> thistle (#d8bfd8)</li><li><span class="color" style="background-color:tomato;"></span> tomato (#ff6347)</li><li><span class="color" style="background-color:turquoise;"></span> turquoise (#40e0d0)</li><li><span class="color" style="background-color:violet;"></span> violet (#ee82ee)</li><li><span class="color" style="background-color:wheat;"></span> wheat (#f5deb3)</li><li><span class="color" style="background-color:white;"></span> white (#ffffff)</li><li><span class="color" style="background-color:whitesmoke;"></span> whitesmoke (#f5f5f5)</li><li><span class="color" style="background-color:yellow;"></span> yellow (#ffff00)</li><li><span class="color" style="background-color:yellowgreen;"></span> yellowgreen (#9acd32)</li></ul></div><div class="docs-prevnext"><a class="docs-prev" href="docs/direct-manipulation.html#content">← Prev</a><a class="docs-next" href="docs/integration-with-existing-apps.html#content">Next →</a></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Colors.md">edit the content above on GitHub</a> and send us a pull request!</p></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&amp;id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#algolia-doc-search',
algoliaOptions: { facetFilters: [ "tags:0.45" ], hitsPerPage: 5 }
});
</script><script src="js/scripts.js"></script><script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script></body></html>