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-color
tu 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;
}
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;
}
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);
}
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);
}
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%);
}
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.