색상 참조
React Native에서 컴포넌트는 JavaScript를 사용해 스타일을 지정한다. 색상 속성은 일반적으로 웹에서 CSS가 동작하는 방식과 일치한다. 각 플랫폼에서 색상 사용에 대한 일반적인 가이드는 아래에서 확인할 수 있다:
색상 API
React Native는 플랫폼의 디자인과 사용자 선호도를 최대한 활용할 수 있도록 여러 색상 API를 제공한다.
PlatformColor는 플랫폼의 색상 시스템을 참조할 수 있게 한다.DynamicColorIOS는 iOS 전용으로, 라이트 모드와 다크 모드에서 사용할 색상을 지정할 수 있다.
색상 표현 방식
RGB(적녹청)
React Native는 16진수와 함수형 표기법 모두에서 rgb()와 rgba()를 지원한다:
'#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)'
색상, 채도, 명도 (HSL)
React Native는 함수형 표기법으로 hsl()과 hsla()를 지원한다:
'hsl(360, 100%, 100%)''hsl(360 100% 100%)''hsla(360, 100%, 100%, 1.0)''hsla(360 100% 100% / 1.0)'
HWB 색상 모델(Hue Whiteness Blackness)
React Native는 hwb() 함수형 표기법을 지원한다:
'hwb(0, 0%, 100%)''hwb(360, 100%, 100%)''hwb(0 0% 0%)''hwb(70 50% 0%)'
정수형 색상 값
React Native는 RGB 색상 모드에서 int 값으로 색상을 표현할 수 있다:
0xff00ff00(0xrrggbbaa)
caution
이 표현은 Android의 Color 정수 표현과 비슷해 보일 수 있지만, Android에서는 SRGB 색상 모드(0xaarrggbb)로 값을 저장한다.
이름이 지정된 색상
React Native에서는 색상 이름 문자열을 값으로 사용할 수 있다.
info
React Native는 소문자 색상 이름만 지원한다. 대문자 색상 이름은 지원하지 않는다.
transparent
이 값은 CSS3에서와 마찬가지로 rgba(0,0,0,0)을 나타내는 단축 표현이다.
색상 키워드
명명된 색상은 CSS3/SVG 사양을 따르며 다음과 같이 구현된다:
- 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) - lightgoldenrodyyellow (
#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) - paleggoldenrod (
#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)