13.04.

2025 21:49 Color Reference · React Native

Color Reference
Components in React Native are styled using JavaScript. Color properties usually
match how CSS works on the web. General guides on the color usage on each platform
could be found below:

Android
iOS

Color APIs
React Native has several color APIs designed to allow you to take full advantage of your
platform's design and user preferences.

PlatformColor lets you reference the platform's color system.

Color representations
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)'

'rgb(255 0 255)'

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

'rgba(255 0 255 / 1.0)'

https://reactnative.dev/docs/colors 1/7
13.04.2025 21:49 Color Reference · React Native

Hue Saturation Lightness (HSL)

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

'hsl(360 100% 100%)'

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

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

Hue Whiteness Blackness (HWB)

'hwb(0, 0%, 100%)'

'hwb(360, 100%, 100%)'

'hwb(0 0% 0%)'

'hwb(70 50% 0%)'

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

0xff00ff00 (0xrrggbbaa)

CAUTION

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.

INFO

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

https://reactnative.dev/docs/colors 2/7
13.04.2025 21:49 Color Reference · React Native

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 )

https://reactnative.dev/docs/colors 3/7
13.04.2025 21:49 Color Reference · React Native

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 )

https://reactnative.dev/docs/colors 4/7
13.04.2025 21:49 Color Reference · React Native

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 )

https://reactnative.dev/docs/colors 5/7
13.04.2025 21:49 Color Reference · React Native

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 )

https://reactnative.dev/docs/colors 6/7
13.04.2025 21:49 Color Reference · React Native

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 )

Is this page useful?

Last updated on Feb 19, 2025

https://reactnative.dev/docs/colors 7/7