Referencia de colores
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Los componentes en React Native se estilizan usando JavaScript. Las propiedades de color generalmente coinciden con cómo funciona CSS en la web. Puedes encontrar guías generales sobre el uso de colores en cada plataforma a continuación:
APIs de color
React Native incluye varias APIs de color diseñadas para aprovechar al máximo el diseño de tu plataforma y las preferencias de usuario.
-
PlatformColor te permite referenciar el sistema de colores de la plataforma.
-
DynamicColorIOS es específico para iOS y permite definir qué colores usar en modo Claro u Oscuro.
Representaciones de color
Rojo Verde Azul (RGB)
React Native admite rgb() y rgba() tanto en notación hexadecimal como funcional:
-
'#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)'
Matiz Saturación Luminosidad (HSL)
React Native admite hsl() y hsla() en notación funcional:
-
'hsl(360, 100%, 100%)' -
'hsl(360 100% 100%)' -
'hsla(360, 100%, 100%, 1.0)' -
'hsla(360 100% 100% / 1.0)'
Matiz Blancura Negrura (HWB)
React Native admite hwb() en notación funcional:
-
'hwb(0, 0%, 100%)' -
'hwb(360, 100%, 100%)' -
'hwb(0 0% 0%)' -
'hwb(70 50% 0%)'
Enteros de color
React Native también admite colores como valores int (en modo RGB):
0xff00ff00(0xrrggbbaa)
Puede parecer similar a la representación de enteros Color de Android, pero en Android los valores se almacenan en modo SRGB (0xaarrggbb).
Nombres de colores
En React Native también puedes usar cadenas con nombres de colores como valores.
React Native solo admite nombres de colores en minúsculas. No se admiten nombres en mayúsculas.
transparent
Es un atajo para rgba(0,0,0,0), igual que en CSS3.
Palabras clave de color
La implementación de colores con nombre sigue la especificación 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) -
blanco fantasma (
#f8f8ff) -
oro (
#ffd700) -
vara de oro (
#daa520) -
gris (
#808080) -
verde (
#008000) -
verde amarillento (
#adff2f) -
gris (
#808080) -
blanco miel (
#f0fff0) -
rosa intenso (
#ff69b4) -
rojo indio (
#cd5c5c) -
índigo (
#4b0082) -
marfil (
#fffff0) -
caqui (
#f0e68c) -
lavanda (
#e6e6fa) -
rubor lavanda (
#fff0f5) -
verde césped (
#7cfc00) -
amarillo limón (
#fffacd) -
azul claro (
#add8e6) -
coral claro (
#f08080) -
cian claro (
#e0ffff) -
amarillo dorado claro (
#fafad2) -
gris claro (
#d3d3d3) -
verde claro (
#90ee90) -
gris claro (
#d3d3d3) -
rosa claro (
#ffb6c1) -
salmón claro (
#ffa07a) -
verde mar claro (
#20b2aa) -
azul cielo claro (
#87cefa) -
gris pizarra claro (
#778899) -
azul acero claro (
#b0c4de) -
amarillo claro (
#ffffe0) -
lima (
#00ff00) -
verde lima (
#32cd32) -
lino (
#faf0e6) -
magenta (
#ff00ff) -
granate (
#800000) -
aguamarina medio (
#66cdaa) -
azul medio (
#0000cd) -
orquídea medio (
#ba55d3) -
púrpura medio (
#9370db) -
verde mar medio (
#3cb371) -
azul pizarra medio (
#7b68ee) -
verde primavera medio (
#00fa9a) -
turquesa medio (
#48d1cc) -
rojo violeta medio (
#c71585) -
azul medianoche (
#191970) -
crema de menta (
#f5fffa) -
rosa brumoso (
#ffe4e1) -
mocasín (
#ffe4b5) -
blanco navajo (
#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) -
concha (
#fff5ee) -
siena (
#a0522d) -
plata (
#c0c0c0) -
azul cielo (
#87ceeb) -
azul pizarra (
#6a5acd) -
gris pizarra (
#708090) -
nieve (
#fffafa) -
verde primavera (
#00ff7f) -
azul acero (
#4682b4) -
canela (
#d2b48c) -
verde azulado (
#008080) -
cardo (
#d8bfd8) -
tomate (
#ff6347) -
turquesa (
#40e0d0) -
violeta (
#ee82ee) -
trigo (
#f5deb3) -
blanco (
#ffffff) -
humo blanco (
#f5f5f5) -
amarillo (
#ffff00) -
verde amarillento (
#9acd32)