Original article: Div Background Color – How to Change Background Color in CSS

Si estás trabajando en un proyecto de desarrollo web, establecer un color de fondo agradable puede darle al sitio web un aspecto más atractivo.

Para establecer un color de fondo para un div o elemento parecido en CSS, utiliza la propiedad background-color.

Al configurar la propiedad, background-colortu creatividad es el límite en cuanto hasta dónde quieres llegar.

Entonces, en este artículo, te mostraré cómo puedes configurar la propiedad background-color.

Cómo configurar background-color con nombres de color

Con los colores con nombre, puede establecer el color de fondo incorporando la propiedad background-color y asignándole un valor expresado en un nombre de color como red, green, blue, etc.

div {
   background: green;
}
ss-1-1
Ejemplo de un div color verde en CSS

Puede utilizar los siguientes estilos para que la página web se vea mejor. Simplemente, establezca un ancho y alto para el div, para que el background-color pueda tener efecto:

body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   background-color: #d3d3d3;
 }

div {
   background: green;
 }

Los navegadores modernos reconocen alrededor de 147 colores, por lo que todavía su uso es un poco limitado.

Cómo configurar background-color con colores hexadecimales

Con valores hexadecimales, puedes establecer un color de fondo para un div o cualquier otro elemento con un total de 6 caracteres.

Los colores hexadecimales comienzan con el signo de numeral (#), cualquier número del 0 al 9 y, finalmente, cualquier letra de la A a la F.

Los primeros 2 valores representan el rojo, los 2 siguientes representan el verde y los 2 últimos representan el azul.

Con valores hexadecimales, puedes sumergirte profundamente en el círculo cromático e incluso usar colores que nadie ha usado nunca.

div {
   background: #2ecc71;
}
ss-2-1
Ejemplo de div usando colores hexadecimales

Cómo configurar background-color con colores RGB

RGB significa Red (Rojo), Green (Verde) y Blue (Azul).

Para configurar el color de fondo con RGB, especifica la cantidad de rojo, verde y azul que desea con números entre 0 y 255.

div {
   background: rgb(220, 20, 60);
}
ss-3-2
Ejemplo de div usando colores RGB

RGB también tiene una variación llamada RGBA. La última A significa alfa y te permite determinar qué tan opaco quieres que sea el color.

El alfa toma un valor de 0,0 a 1,0. 0,0 significa 0% de opacidad, 0,5 significa 50% de opacidad y 1,0 significa 100% de opacidad.

div {
    background: rgb(220, 20, 60, 0.6);
}

ss-4
Ejemplo de div con RGB y una opacidad del 60%

Cómo configurar background-color con colores HSL

HSL significa Hue (Tono), Saturation (Saturación) y Lightness (Luminosidad). Es la forma más dinámica dentro de las formas en que puedes especificar un color de fondo para un div u otros elementos.

  • Hue (Tono) representa la rueda de colores en 360°. 0° es rojo, 120° es verde y 240° es azul.
  • Saturation (Saturación) es la cantidad de gris en el color expresada en porcentajes. 0% es el tono de gris y 100% es el mismo color.
  • Como su nombre lo indica, la lightness (luminosidad) es la cantidad de oscuridad y luminosidad del color expresada como porcentaje. 0% es negro y 100% es blanco.
div {
   background: hsl(16, 100%, 50%);
 }
ss-5
Ejemplo de div usando colores HSL

Conclusión

Dado que puedes aplicar colores de 4 maneras diferentes, debes preguntarte cuál deberías usar.

Cuando usas colores con nombre, estás un poco limitado en cuanto a hasta dónde puedes llegar al aplicar diferentes tonos de colores.

Cada color, como rojo, verde, azul, amarillo o cualquier otro color, tiene muchas variaciones a las que no tendrás acceso con colores con nombre.

Sólo puedes acceder a unos 147 colores predefinidos reconocidos por los navegadores. Los colores hexadecimales, por otro lado, son muy dinámicos. Se utilizan principalmente entre desarrolladores y la creatividad es el límite. Estos colores hexadecimales te permiten utilizar diferentes tonos del mismo color.

Los colores RGB son tan dinámicos como los colores hexadecimales. Puede especificar la cantidad de rojo, verde y azul de 0 a 255, y también puede usar el valor alfa agregado para especificar la transparencia del color.

HSL es el más dinámico de todos ellos. Puede especificar exactamente el color de 0 a 360 grados en el círculo cromático, establecer la saturación y la oscuridad como porcentaje y establecer la opacidad en cualquier valor entre 0,0 y 1,0.

Por lo tanto, decidir cuál usar entre colores con nombre, hexadecimales, RGB y HSL depende de usted y de qué tan creativo quiera ser y cuáles sean las necesidades de su proyecto.

Gracias por leer.