Colores en CSS

Los colores juegan un papel muy importante en el diseño de una página web. En CSS, los colores se usan con mayor frecuencia para colorear el fondo, el texto y el borde. Aquí el punto es cómo configurar/definir el color en CSS?

Bien! En CSS, los colores se pueden definir a través de varios métodos, como el uso de nombres de color predefinidos, valores hexadecimales, etc. Este artículo discutirá los siguientes métodos para establecer el color de fondo, el color del texto y los colores del borde:

• Nombres de color predefinidos como rojo, verde, naranja, etc.
• Valores de color hexadecimal como #RRGGBB, #00FF00, etc.
• Valores de color RGB como RGB (255, 0, 0); RGB (0, 255, 255), etc.
• Valores de color RGBA como RGB (255, 255, 0, 0.7), RGB (255, 0, 0, 0.1), etc.
• Valores de color HSL como HSL (0, 100%, 50%), HSL (240, 100%, 50%), etc
• Valores de color HSLA como HSL (0, 100%, 50%, 0.5), HSL (240, 100%, 50%, 0.2), etc

Todas las convenciones de color mencionadas anteriormente se discutirán con ejemplos. Entonces, comencemos este viaje con los nombres de color predefinidos.

Nombres de color predefinidos de CSS

CSS proporciona numerosos nombres de color predefinidos, por ejemplo, rojo, amarillo, verde, etc. Estos nombres de color se pueden usar para diseñar el fondo, el texto, etc.

Comprendamos el concepto de los nombres de color predefinidos utilizando el ejemplo de abajo

Ejemplo

Digamos que tenemos un

elemento y queremos diseñar su color de texto utilizando valores de color predefinidos:

Html

Bienvenido a Linuxhint.comunicarse

CSS

pags
color azul;

Simplemente asigne el nombre de color a la propiedad de color y, como resultado, obtendrá la siguiente salida:

CSS Color hexadecimal

Los colores hexadecimales están definidos por un "#"Símbolo con código de seis dígitos. Toma valores del 0 al 15, sin embargo, los 10 se representarán con A, 11 con B, y así sucesivamente hasta 15 que se especificarán con F.

Dado que hexadecimal es un código de seis dígitos i.E #E3E3E3, las dos primeras ranuras para el color rojo, las siguientes dos para el verde y los dos últimos para el color azul. La combinación de estos seis dígitos especifica un nuevo color e.gramo. #Ffff00 representa el color amarillo.

Ejemplo

Las líneas dadas a continuación establecerán el color de fondo verde

elemento usando valores hexadecimales:

Html

Bienvenido a Linuxhint.comunicarse

CSS

pags
Color de fondo: #00FF00;

El código anterior proporciona la siguiente salida:

Color css rgb

El color RGB es una combinación de rojo, verde y azul. La función rgb () toma valores de 0 a 255. La especificación de diferentes valores en la función rgb () da como resultado varias combinaciones de colores. Por ejemplo, RGB (255, 0, 0) generará el color rojo.

Ejemplo

La siguiente pieza de código especifica el valor RGB para establecer el color de texto gris del párrafo:

Html

Bienvenido a Linuxhint.comunicarse

CSS

pags
Color de fondo: RGB (128, 128, 128);

La salida establece el color de fondo gris:

Color css rgba

El factor de transparencia se puede agregar a los colores RGB agregando el valor alfa en él. El parámetro alfa toma los valores entre 0 y 1. El valor más bajo hace que el color sea transparente, mientras que el valor más alto hace que el color sea opaco. Por ejemplo, agregar 0.0 hará que el color sea transparente, mientras que 1.0 hará que el color sea completamente opaco.

Ejemplo

Agregamos el parámetro alfa en el ejemplo anterior.

Html

Bienvenido a Linuxhint.comunicarse

CSS

pags
Color de fondo: RGBA (128, 128, 128, 0.2);

En el código anterior 0.2 se agrega como el valor del parámetro alfa que hace que el color de fondo sea transparente:

CSS HSL Color

HSL es un acrónimo de tono, saturación y ligereza.

• El término tono define el ángel dentro de la rueda de color.
• La saturación define la intensidad del color.
• La ligereza especifica los niveles de ligereza.

La ligereza y la saturación estarán representadas por el signo %.

Ejemplo

Coloreemos el fondo de

elemento usando valores de color HSL.

Html

Bienvenido a Linuxhint.comunicarse

CSS

pags
color de fondo: HSL (334, 80%, 56%);

El código anterior establecerá el fondo rosa del

elemento.

CSS HSLA Color

La convención de color HSL se puede extender al HSLA. La a representa el parámetro alfa que se utiliza para agregar los efectos de transparencia en el color.

Ejemplo

Extendamos un poco el ejemplo anterior y agregemos el parámetro alfa también:

Html

Bienvenido a Linuxhint.comunicarse

CSS

pags
Color de fondo: HSL (334, 80%, 56%, 0.3);

El código anterior mostrará la siguiente salida:

Conclusión

CSS proporciona múltiples colores y métodos para establecer el color de un elemento como los nombres de color predefinidos, la combinación de valores entre 0 a 255 dentro del RGB (), o los valores para el tono, la saturación y la luz se pueden usar. Además, se puede usar un parámetro alfa con RGB y HSL para agregar el efecto de transparencia en el color. Este artículo presentó una descripción completa y elaborada de los colores CSS y diferentes métodos para establecer los colores en CSS.