HTML Color de Fondo

Sitios Web hoy en día son más audaces y más brillante que nunca, y con este tutorial rápido usted también puede aprender a dar vida a tu sitio web con HTML color de fondo magia, utilizando códigos de color Hex, nombres de colores HTML, RGB y HSL valores.

Color de fondo mediante códigos de color Hex

Colorear un fondo de página web es en realidad bastante simple. La primera y más popular forma es mediante el uso de un código de color Hex con la propiedad color de fondo. Aquí aplicamos un color Hex directamente en el HTML <body> elemento usando el atributo de estilo.

HTML
<body style="background-color:#FF0000;"> </body>

Este mismo método se puede utilizar para el estilo de casi cualquier elemento HTML, pero tenga en cuenta su comportamiento puede variar en función de si son elementos en línea o nivel de bloque. Utilice nuestros selector de color o tabla de colores de encontrar un código de color Hex.

Color de fondo mediante nombres de colores HTML

Los códigos de color Hex puede ser el más popular, pero son sólo uno de los muchos métodos disponibles para color un elemento HTML. Una segunda forma es utilizar un nombre de color HTML; basta con sustituir el código Hex con uno de los 140 nombres de colores compatibles y listo.

HTML
<body style="background-color:red;"> </body>

Aquí está una lista útil de los 140 nombres de colores HTML con sus correspondientes valores Hex y RGB para referencia.

Color de fondo mediante valores de color RGB

Valores RGB también se puede utilizar para agregar un color de fondo a los elementos HTML. Utilizando el mismo atributo de estilo al igual que antes, sustituir el código Hex o nombre de color con un formato correcto valor RGB (asegúrese de que se ha de encerrar entre paréntesis y prefijo con una minúscula 'rgb').

HTML
<body style="background-color:rgb(255,0,0);"> </body>

Cuando se utilizan valores RGB en HTML tiene la opción adicional de especificar el nivel de opacidad. Con el prefijo rgba() - la 'a' para el canal alfa, que controla la transparencia, puede insertar un cuarto valor entre 0 y 1, 0 para totalmente transparente y 1 para totalmente opaca (utilizar valores decimales para los niveles entre).

HTML
<body style="background-color:rgba(255,0,0,0.5);"> </body>

HSL color de fondo mediante valores de color

Menos populares pero igualmente potente, HSL valores ahora son compatibles con muchos los exploradores modernos. Si no está familiarizado con HSL (que significa de tono, saturación y luminosidad) dirígete a Wikipedia para ver un resumen de las razones por las que es tan increíble. Si desea usar HTML para un color de fondo, siga la misma sintaxis que los valores RGB, pero utilizando el hsl() prefijo.

HTML
<body style="background-color:hsl(0,100%,50%);"> </body>

Al igual que sus hermanos RGB, HSL también se puede transmitir un canal alfa para controlar la opacidad. Utilice los aceros hsla() prefijo e insertar un cuarto valor entre 0 y 1.

HTML
<body style="background-color:hsla(0,100%,50%,0.5);"> </body>