Color - Trucos CSS

Anonim

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

  • font
  • text-decoration-color
  • opacity

Más información

  • color en la especificación W3C
  • color en 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 +.