Todos los navegadores web modernos admiten diferentes colores para mantener una pantalla colorida. En CSS, los colores se pueden representar de varias maneras incluso mediante el uso de un nombre de color como "color azul". Sin embargo, este método solo admite nombres de color específicos. Por lo tanto, en CSS, otros métodos avanzados se utilizan para mostrar colores como RGB, HSL, Hex, etc.

En este artículo, se discuten tres métodos de representación de color: RGB, RGBA y HEX. En CSS, RGB () es una función incorporada, RGBA también es un formato de colores de pantalla con la extensión de alfa. Además, proporcionar valores de color en números hexadecimales también se usa ampliamente en CSS.

función rgb () en CSS

RGB es una combinación de tres colores (rojo, verde y azul) que se usa en todos los sistemas informáticos para la pantalla de color. Como sabemos, estos son los colores básicos y al combinarlos podemos obtener cualquier color que sea visible en el espectro de color.

En CSS, estos colores se definen en forma de función rgb (): (rojo verde azul). El rango de todos estos colores se define de 0 a 255 define la intensidad de un color, y podemos cambiar los colores cambiando estos valores. La intensidad de estos colores está bien definida en el ejemplo dado.

Ejemplo

RGB (0, 255, 0)

Esta combinación devuelve el color verde porque tiene la intensidad más alta y los otros dos colores tienen 0 intensidad.

Al cambiar las intensidades de los tres colores, obtenemos los diferentes colores, como

• RGB (255, 255, 255) muestra el color blanco
• y RGB (0, 0, 0) le da el color negro.

Se muestran más ejemplos de color en el ejemplo dado

Ejemplo

RGB (0, 255, 0)

RGB (60, 60, 60)

RGB (138, 238, 130)

RGB (255, 255, 255)

Colores RGBA

En CSS RGBA también es un formato para mostrar colores con la extensión de Alpha. La estructura de esta función de color se da a continuación.

RGBA (rojo, verde, azul, alfa)

En esta función, se usa un alfa para expresar la opacidad de un color. En CSS, la propiedad de opacidad se utiliza para establecer la transparencia de un color y su rango se encuentra entre 0.0 a 1.0, donde 0.0 representa el completamente transparente y 1.0 representa el completamente opaco. Comprenderá mejor del ejemplo dado.

Ejemplo

Verde

Verde

Verde

Verde

Verde

En el ejemplo dado, establecemos el valor de alfa de 0.0 (completamente transparente) a 1.0 (completamente opaco) y puede ver la diferencia en la intensidad de la transparencia.

Colores hexadecimales CSS

En CSS, los colores también se pueden especificar con valores hexadecimales, es solo otra forma de representar los colores. En CSS, es la forma más común de especificar un color utilizando valores hexadecimales con un signo " #" como #RRGGBB. Mientras que, R, G, B son los códigos de rojo, verde y azul, respectivamente.

Los números hexadecimales con la combinación de 0-9 y A-F se utilizan para representar un color en CSS. A continuación se dan algunos ejemplos de colores hexadecimales básicos:

• #ffffff: representa el color blanco y
• #000000: representa el color negro.

Para una mejor comprensión, eche un vistazo al siguiente ejemplo.

Ejemplo

Especificar colores usando valores hexadecimales

#0f4bff

#3CB371

EE652E

#FFA500

#6A5ACD

En el ejemplo anterior, se muestran diferentes colores utilizando los valores hexadecimales. Todos estos valores hexadecimales son la combinación de números hexadecimales, que son 16 valores alfa-numéricos distintos que se encuentran entre 0-9 y A-F.

Conclusión

RGB, RGBA y HEX son los diferentes tipos para mostrar colores en CSS. Mientras que RGB es una combinación de tres colores (rojo, verde y azul), RGBA es lo mismo que RGB con la extensión de alfa (alfa = transperancia) y Hex usa los valores hexadecimales para representar colores. El rango de colores RGB y hexadecimales se encuentra entre 0 y 255 enteros y 00 a FF respectivamente. Todos estos tres tipos están bien definidos con ejemplos.