Table of contents
Un valor de color RGB hace referencia RED, GREEN y BLUE.
Valor rgb
En CSS, un color se puede especificar con un valor RGB, utilizando esta fórmula:
rgb(red, green, blue)
Cada parámetro (red, green, blue) define la intensidad del color entre 0 y 255.
Por ejemplo, rgb(255, 0, 0) se muestra como color rojo, porque el rojo se establece en su valor más alto (255) y los demás se establecen en 0.
Para mostrar negro, establezca todos los parámetros de color en 0, así: rgb (0, 0, 0).
Para mostrar el blanco, establezca todos los parámetros de color en 255, así: rgb (255, 255, 255).
Pruebe mezclando los valores RGB a continuación:
Ejemplo:
<h1>Establezca los colores usando valores rgb</h1>
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
Los tonos de gris a menudo se definen utilizando valores iguales para las 3 fuentes:
Ejemplo:
<h1>Tonos de gris</h1>
<p>Establezca valores iguales para (red, green, blue), y conseguirás diferentes tonos de gris</p>
<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>
<h2 style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</h2>
<h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>
<h2 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>
<h2 style="background-color:rgb(210, 210, 210);">rgb(210, 210, 210)</h2>
<h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2>
Valor rgba
Los valores de color RGBA son una extensión de los valores de color RGB con un canal alpha, que especifica la opacidad de un color.
Un valor de color RGBA se especifica con:
rgba(red, green, blue, alpha)
El parámetro alpha es un número entre 0.0 (totalmente transparente) y 1.0 (nada transparente):
Pruebe mezclando los valores RGBA a continuación:
Ejemplo:
<h1>Colores transparentes con valores rgba(red, green, blue, alpha)</h1>
<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>
Resumen
El valor RGB se utiliza para especificar un color en CSS, con cada parámetro que define la intensidad del color entre 0 y 255. Los valores RGBA son una extensión de los valores RGB con un canal alpha que especifica la opacidad de un color. Los tonos de gris a menudo se definen utilizando valores iguales para las 3 fuentes. Los ejemplos de código muestran cómo mezclar diferentes valores RGB y RGBA para crear diferentes tonos y opacidades de color.
Traducido con 💚 desde W3Schools.com