La colorpropiedad en CSS establece el color del texto y las decoraciones del texto.
p ( color: blue; )Valores
La colorpropiedad puede aceptar cualquier valor de color CSS.
- Colores con nombre: por ejemplo, "aqua".
- Colores hexadecimales: por ejemplo, # 00FFFF o # 0FF.
- Colores RGB y RGBa: por ejemplo, rgb (0, 255, 255) y rgba (0, 255, 255, .5).
- Colores HSL y HSLa: por ejemplo, hsl (180, 100%, 50%) y hsla (180, 100%, 50%, .5).
Colores nombrados
p ( color: aqua; )Los colores con nombre también se conocen como colores de palabras clave, colores X11 o colores SVG. Todos los colores nombrados son opacos por defecto excepto transparent, que es completamente transparente o "claro". Consulte nuestro fragmento de colores con nombre y equivalentes hexadecimales para obtener una lista de los colores con nombre.
Colores hexagonales
Los colores hexadecimales, o colores hexadecimales, se especifican con valores alfanuméricos. El primer par de caracteres representa el valor rojo, el segundo par representa el valor verde y el tercer par representa el valor azul, todo en un rango de 00 a FF.
p ( color: #00FFFF; )Si los pares de valores rojo, azul y verde son todos dobles, puede abreviar el valor hexadecimal a una abreviatura de 3 caracteres; por ejemplo, # 00FFFF se puede abreviar como # 0FF.
.full-hex ( color: #00FFFF; /* aqua */ ) .abbreviated-hex ( color: #0FF; /* also aqua */ )Colores RGB y RGBa
Los colores RGB se especifican con una lista separada por comas de tres valores numéricos (entre 0 y 255) o valores porcentuales (entre 0% y 100%). El primer valor representa el valor rojo, el segundo representa el valor verde y el tercero representa el valor azul. Los colores RGB son opacos por defecto.
p ( color: rgb(0, 255, 255); )RGBa agrega un cuarto valor para el canal alfa, que establece la opacidad del color. El valor alfa es un número dentro de un rango de 0.0 (completamente transparente) a 1 (completamente opaco).
p ( color: rgba(0, 255, 255, .5); )Colores HSL y HSLa
Los colores HSL se especifican con una lista separada por comas de tres valores: el grado de matiz (un número que va de 0 a 360), un porcentaje de saturación (que va del 0% al 100%) y un porcentaje de luminosidad (que va del 0% al 100%). Los colores HSL son opacos por defecto.
p ( color: hsl(180, 100%, 50%); )HSLa agrega un cuarto valor para el canal alfa para controlar la opacidad del color. El valor alfa es un número dentro de un rango de 0.0 (completamente transparente) a 1 (completamente opaco).
p ( color: hsla(180, 100%, 50%, .5); )Manifestación
Vea los valores de color del lápiz por CSS-Tricks (@ css-tricks) en CodePen.
Notas de uso
La colorpropiedad cae en cascada. Si lo establece en el cuerpo, todos los elementos descendientes heredarán ese color, a menos que tengan su propio conjunto de colores en la hoja de estilo del agente de usuario.
Los bordes se heredan a colormenos que se especifique un valor de color en la borderdeclaración.
La colorpropiedad se aplica a las text-decorationlíneas. En los navegadores que admiten la text-decoration-colorpropiedad, puede especificar diferentes colores para el texto y sus líneas de decoración.
colortambién se aplica a los marcadores de elementos de la lista (como viñetas y números). No puede establecer un color separado para un marcador de elemento de lista, pero puede reemplazarlo con una imagen con la list-stylepropiedad.
Aunque los colores con nombre y los colores hexadecimales no tienen canales alfa, puede establecer su opacidad con la opacitypropiedad en todos los navegadores actuales e IE9 +.
Relacionado
fonttext-decoration-coloropacity
Más información
coloren la especificación W3Ccoloren MDN- Artículo de CSS-Tricks Yay para HSLa
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | Alguna | Alguna | Alguna | Alguna * | Alguna | Alguna |
* HSL, HSLa y RGBa son compatibles con IE9 +.
