Справка по цвету

Компоненты в React Native стилизованы с использованием JavaScript. Свойства цвета обычно соответствуют тому, как CSS работает в Интернете. Общие руководства по использованию цвета на каждой платформе можно найти ниже:

• iOS
• Android

Цветовые представления

Red Green Blue (RGB)

Красный, зелёный, синий или КЗС — аддитивная цветовая модель, описывающая способ кодирования цвета для цветовоспроизведения с помощью трёх цветов, которые принято называть основными. Выбор основных цветов обусловлен особенностями физиологии восприятия цвета сетчаткой человеческого глаза. React Native поддерживает rgb() и rgba() как в шестнадцатеричной, так и в функциональной нотации:

• '#f0f' (#rgb)
• '#ff00ff' (#rrggbb)
• '#f0ff' (#rgba)
• '#ff00ff00' (#rrggbbaa)
• 'rgb(255, 0, 255)'
• 'rgba(255, 0, 255, 1.0)'

Hue Saturation Lightness (HSL)

Цветовая модель, в которой цветовыми координатами являются тон, насыщенность и светлота. React Native поддерживает hsl() и hsla() в функциональной нотации:

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

Именованные цвета

В React Native вы также можете использовать строки с названиями цветов в качестве значений.

Примечание

React Native поддерживает только имена цветов в нижнем регистре. Имена цветов в верхнем регистре не поддерживаются.

transparent Это ярлык для rgba(0,0,0,0), такой же, как в CSS3.

Реализация именованных цветов соответствует спецификации 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`)
• 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`)

Проблемы?

Пишите в Telegram или ВКонтакте, а также подписывайтесь на наши новости

Вопросы

С помощью какого языка стилизованы компоненты в React Native?

• HTML
• CSS
• JavaScript

Свойства цвета в React Native обычно соответствуют тому, как CSS работает в Интернете?

1. true
2. false

В какой нотации React Native не поддерживает rgb() и rgba()?

1. восьмеричной
2. шестнадцатеричной
3. функциональной

Поддерживает ли React Native hsl() и hsla()?

1. true
2. false

Можете ли вы в React Native использовать строки с названиями цветов в качестве значений?

1. true
2. false

Done

Чтобы узнать, насколько хорошо вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в боте Telegram.

Ссылки:

1. React Native