Formas para indicar el color en CSS
Que son las hojas de estilo (CSS) CSS y HTML Definición de estilos a nivel página Propiedades relacionadas a fuentes. Agrupación de varios elementos HTML con una misma regla de estilo Definición de varias reglas para un mismo elemento HTML Propiedades relacionadas al texto (color, text-align, text-decoration) Más propiedades relacionadas al texto (letter-spacing, word-spacing, text-indent, text-transform) Herencia de propiedades de estilo. Definición de un estilo en función del contexto. Definición de hojas de estilo en un archivo externo. Definición de estilos por medio de clases. Definición de estilos por medio de id. Propiedades relacionadas al borde de un elemento HTML (border-width, border-style, border-color) Más propiedades relacionadas al borde de un elemento HTML Propiedades relacionadas al padding de un elemento HTML Propiedades relacionadas al margen de un elemento HTML Propiedades relacionadas a listas Propiedades relacionadas al fondo (background) Propiedades relacionadas a fuentes Propiedades relacionadas al border Propiedades relacionadas al padding Propiedades relacionadas al margin Propiedades relacionadas al fondo (background) El selector universal * Pseudoclases Eliminacion subrayado de enlace Creación de un menú vertical Creación de un menú horizontal Propiedades relacionadas a la dimensión de un objeto en la página. Unidades de medida (px, rem, em, cm, mm etc.) Formas para indicar el color. Definir un cursor para un elemento HTML Aplicación de hojas de estilo a un formulario Definiendo reglas de estilo a una tabla. Posicionamiento relativo (position: relative) Posicionamiento absoluto (position: absolute) Posicionamiento absoluto y propiedad z-index Posicionamiento fijo (position: fixed) Disposición de 2 columnas (position: absolute) Propiedad float aplicada a una imagen Propiedades relacionadas a la dimensión de un objeto en la página Propiedad clear Disposición de 2 columnas (propiedad float) Disposición de 2 columnas, cabecera y pie Disposición de 3 columnas, cabecera y pie Diseño de ancho fijo Diseño de ancho líquido Selector de hijos Selector de hermano adyacente y hermano general Selector de atributo Pseudo-clases: first-child y last-child) Pseudo-clases: nth-child y nth-last-child Pseudo-clases: nth-of-type, nth-last-of-type, first-of-type y last-of-type Pseudo-clases: only-child y only-of-type Pseudo-clase: empty Pseudo-elementos: first-letter y first-line Pseudo-elementos: before y after CSS media queries Flexbox Flexbox - (flex-direction aplicada al contenedor) Flexbox - (justify-content aplicada al contenedor) Flexbox - (align-items aplicada al contenedor) Flexbox - (flex-wrap aplicada al contenedor) Flexbox - (align-content aplicada al contenedor) Flexbox - (flex-flow aplicada al contenedor) Flexbox - (flex-grow aplicada a los items) Flexbox - (flex-shrink aplicada a los items)o Flexbox - (flex-basis aplicada a los items) Flexbox - (flex aplicada a los items) Flexbox - (order aplicada a los items) Flexbox - (align-self aplicada a los items)

Formas para indicar el color en CSS

Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. Aunque el método más utilizado por los diseñadores es el RGB hexadecimal, a continuación se muestran todas las alternativas que ofrece CSS.CSS es un estándar muy flexible, lo que significa que algunas cosas se pueden hacer de muchas formas diferentes. Precisamente, la forma de indicar los colores es uno de los apartados más flexibles en CSS.

Palabras clave

CSS define 140 palabras clave para referirse a los colores básicos. Las palabras se corresponden con el nombre en inglés de cada color: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow 

Todos los navegadores modernos admiten los siguientes 140 nombres de color (haga clic en un nombre de color, o un valor hexadecimal, para ver el color como el color de fondo junto con diferentes colores de texto):

En el siguiente ejemplo se muestran todos los colores básicos tal y como los muestra el navegador (pincha en cada uno para obtener más información):

El último elemento que forma el box model es el fondo de la caja del elemento. El fondo puede ser un color simple o una imagen. El fondo solamente se visualiza en el área ocupada por el contenido y su relleno, ya que el color de los bordes se controla directamente desde los bordes y las zonas de los márgenes siempre son transparentes.

Background-color es un propiedad de CSS que define el color de fondo de un elemento, puede ser el valor de un color o la palabra "transparente".

  • color Se puede especificar el color de fondo como un valor RGB hexa-decimal o regular, o utilizando una de las palabras claves predefinidas de color.
  • transparent El valor por defecto del color de fondo (background-color) es transparente tomando así el color del elemento que está justo debajo de él en el apilamiento.
formato opacy

Hasta ahora hemos visto que para asignar el color utilizamos tres valores hexadecimales (rojo,verde,azul) precedido por el caracter #:

background-color:#ff0000;

Ahora veremos otras sintaxis para indicar el color:

background-color:rgb(255,0,0);

Utilizando la función rgb pasando como parámetro la cantidad de rojo, verde y azul en formato decimal (un valor entre 0 y 255).

También con la función rgb podemos indicar un porcentaje entre 0% y 100% para cada componente:

background-color:rgb(100%,0%,0%)

Por último en algunas situaciones podemos utilizar una sintaxis reducida para ciertos valores:

background-color:#ffaaff;

Lo podemos indicar con esta otra sintaxis resumida:

background-color:#faf;

Es decir si cada valor hexadecimal está formado por el mismo caracter o número podemos utilizar esta sintaxis simplificada indicando un caracter o número solamente. Es decir a este color no lo podemos representar con la sintaxis indicada:

background-color:#ffaafa

Ya que los últimos 2 caracteres, fa, son distintos.