Característica del Color en el CSS

por
CSS Color

Tabla de contenidos

La propiedad color en CSS es la que establece el valor del color en el primer plano del contenido de texto de un elemento y las decoraciones de texto , y también establecerá el valor de una palabra reservada currentColor, que se puede usar como un valor indirecto en otros atributos que no toman su color el color directamente de la propiedad (como la propiedad border-color).

p  { 
  color :  green ; 
}

Funciones Color en el CSS

Valor inicialVaría de un navegador a otro.
Aplicado aTodos los artículos.
HeredableSi
MóvilSi
Valor calculadoSi el valor es semitransparente, entonces el valor calculado es equivalente a la función rgba()‎; de lo contrario , la función es equivalente rgb()‎.transparent recompensa en la palabra reservada rgba‎(0,0,0,0)‎.
/* palabra reservada */ 
color :  currentcolor ;

/* nombres de colores */ 
color :  red ; 
color :  orange ; 
color :  tan ;

/* valores hexadecimales */ 
color :  # 090 ; 
color :  # 009900 ; 
color :  # 090a ; 
color :  # 009900aa ;

/* usar funciones */
/* < La rgb ()> */ 
color : el  rgb ( 24 ,  10 ,  34 - ,  0 . 6 ); 
color :  rgba ( 24 ,  10 ,  34 - ,  0 . 6 ); 
color : el  rgb ( 24  10  34 -  /  0 . 6 ); 
color :  rgba ( 24  10  34 -  /  0 . 3 );

/* < La hsl ()> */ 
color :  hsl ( 40 ,  80 %,  30 %,  0 . 6 ); 
color :  hsla ( 40 ,  80 %,  30 %,  0 . 6 ); 
color :  hsl ( 40 , 80 %,  30 %  /  0 . 6 ); 
color :  hsla ( 40 , 80 %, 30 %  /  0 . 6 );

/* valores globales */ 
color :  inherit ; 
color :  initial ; 
color :  unset ;

Tenga en cuenta que el valor debe ser un color, no puede ser un degradado .

Uso de la palabra reservada: color: currentcolor

Nombres de colores:

  • color red
  • Color orange
  • color tan

Valores hexadecimales:

  • color: #090
  • color: #009900
  • color: #090a
  • color: #009900aa

Funciones rgb(), rgba()‎, hsl()‎, hsla()‎:

  • color: rgb (34, 12, 64)
  • color: rgba (34, 12, 64, 0.6)
  • color: hsl (30, 100%, 50%)
  • color: hsla (30, 100%, 50%, 0,6)

Vale la pena señalar que el valor de color es un valor simplificado, es decir, si establece la propiedad coloren un elemento, todos sus elementos secundarios lo heredarán y tendrán el mismo color que el elemento principal a menos que lo cambie.

Ejemplos del color en el CSS

Las siguientes reglas harán que el texto de los párrafos sea rojo:

p  {  color :  green ;  } 
p  {  color :  #e00 ;  } 
p  {  color :  #ee0000 ;  } 
p  {  color :  rgb ( 215 , 0 , 0 );  } 
p  {  color :  rgb ( 100 % ,  0 % ,  0 % );  } 
p  {  color :  hsl ( 0 , 100 % ,  50 % );  }

/* 50% de opacidad */ 
p  {  color :  rgba ( 215 ,  0 ,  0 ,  0.5 );  }  
p  {  color :  hsla ( 0 ,  100 % ,  50 % ,  0,5 );  }

Soporte del color en CSS por los navegadores

CaracterísticaChromeFirefoxInternet ExplorerSafariÓpera
Soporte básico 1.0 1.0 3.0 3.5 1.0
rgb () y hsl () 1.0 1.0 9.0 9.5 3.1
rgba () y hsla () 1.0 1.0 9.0 10.0 3.1
#RRGGBBAA o #RGBA – 4.9 ? – 9.1
rgb () y hsl () Transparencia – 5.2 ? ? ?

Funciones generales del color en CSS

La propiedad acepta colorun solo valor que especifica el color.

<color>

Este valor establece el color del contenido del texto y la decoración del texto del elemento.

Estructura de color simple

color :  < color >;

Puede ser el valor de color <color> definido a través de la función, rgb()‎, rgba(), hsl()‎o el hsla()‎valor hexadecimal, también por el nombre de un color o valor currentcolor:

< color >  =  < rgb ()>  |  < rgba ()>  |  < hsl ()>  |  < hsla ()>  |  < color hexadecimal >  |  < nombre-color >  |  currentcolor  |  < deprecated-system-color >

Donde :

< rgb ()>  =  rgb (  [  [  < percentage > { 3 }  |  < number > { 3 }  ]  [  /  < alpha-valore >  ]  ]  |  [  [  < percentage > # { 3 }  |  < number > # { 3 }  ]  ,  < alpha-value >?  ]  ) 
< rgba ()> =  rgba (  [[  [  < percentage > { 3 }  |  < number > { 3 }  ]]  [  /  < alpha-value >  ]?  ]  |  [  [  < percentage > # { 3 }  |  < number > # { 3 }  ] ]  ,  < alpha-value>?  ]  ) 
< hsl ()>  =  hsl ( [  < hue >  < percentage >  < percentage >  [  /  < valor alfa >  ]?  ]  |  [  < hue >,  < percentage >,  < percentage >,  < alpha-value >?  ]  ) 
< hsla ()> =  hsla (  [  < hue >  < percentage >  < percentage >  [  /  < ]?  ]  |  [  < hue >,  < percentage >,  < percentage >,  < alpha-value>?  ]  )

Donde :

< alpha-value >  =  < number >  |  < percentage > 
< hue >  =  < number >  |  < angel >