React Native의 컴포넌트들은 JavaScript를 사용해 스타일링 된다.
따라서 색상은 웹의 CSS에서 참조하던 것과 일치한다.
플랫폼별 색상 사용 가이드
색상 조합 참고 사이트
Color APIs
React Native에는 플랫폼의 디자인과 사용자 선호도를 최대한 활용할 수 있도록 설계된 여러 가지 API가 있다.
PlatformColor
: 플랫폼의 색상 시스템을 참조할 수 있게 해준다.
DynamicColorIOS
: iOS 전용으로, light mode와 dark mode에서 사용할 생상을 명시할 수 있다.
색상 표현법
RGB (Red Green Blue)
React Native는
rgb()와 rgba()를 지원한다. ( 16진수 표기법과 함수표기법 둘 다 지원 )'#f0f'(#rgb)
'#ff00ff'(#rrggbb)
'#f0ff'(#rgba)
'#ff00ff00'(#rrggbbaa)
'rgb(255, 0, 255)'
'rgba(255, 0, 255, 1.0)'
RGB모드에서 색상을 int 값으로도 지원한다.
0xff00ff00(0xrrggbbaa) —> (#블라블라도 되지만 0x블라블라도 된다는 소리)
안드로이드의 색상 표기법과 유사하지만, 안드로이드는 SRGB임 (0xaarrggbb)
HSL (Hue Saturation Lightness)
hsl()과 hsla()를 함수표기법으로 지원한다.'hsl(360, 100%, 100%)'
'hsla(360, 100%, 100%, 1.0)'
색상 이름으로 참조하기
색상이름 문자열로도 색상 참조가 가능하다.
소문자 색상 이름만 지원됨.
transparent : rgba(0,0,0,0)의 단축키이미지로 정리
텍스트로 정리
- 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)