13-Colores RGB y RGBA en html

---

• Colores RGB
• Valores RGB
• Valor RGB Gris
• Valores RGBA

---

Colores RGB

En HTML, los colores se especifican usando el modelo RGB, que sigue la fórmula:

rgb(rojo, verde, azul)

Donde cada parámetro (rojo, verde y azul) define la intensidad del color con un valor entre 0 y 255. Esto permite crear una variedad de colores combinando estos valores, con un total de 16,777,216 colores posibles.

Por ejemplo, para obtener el rojo puro, se usa rgb(255, 0, 0); para verde puro, rgb(0, 255, 0); y para azul puro, rgb(0, 0, 255). El negro se representa como rgb(0, 0, 0) y el blanco como rgb(255, 255, 255).

Ejemplo

Rojo

Verde

Azul

Negro

Blanco

Código del ejemplo

                
                <div class="bg-primary p-3 border rounded mt-3">
    <h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
    <div class="bg-white p-3">
<div class="d-flex justify-content-around">
    <div class="p-4" style="background-color: rgb(255, 0, 0); color: white;">Rojo</div>
    <div class="p-4" style="background-color: rgb(0, 255, 0); color: black;">Verde</div>
    <div class="p-4" style="background-color: rgb(0, 0, 255); color: white;">Azul</div>
    <div class="p-4" style="background-color: rgb(0, 0, 0); color: white;">Negro</div>
    <div class="p-4" style="background-color: rgb(255, 255, 255); color: black;">Blanco</div>
        </div>
    </div>
</div>     
                    

---

rgb(0, 0, 0)

Rojo: 0

Verde: 0

Azul: 0

...

Valores RGB

En HTML, el modelo de color RGB utiliza tres valores para definir colores: rojo, verde y azul. Cada uno de estos valores puede variar entre 0 y 255. La combinación de estos tres valores permite crear una amplia gama de colores. Por ejemplo, rgb(255, 0, 0) representa el rojo puro, mientras que rgb(0, 255, 0) representa el verde puro. La mezcla de diferentes valores de rojo, verde y azul permite crear todos los colores visibles en la pantalla.

Ejemplo

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

Código del ejemplo

                
  <div class="bg-primary p-3 border rounded mt-3">
  <h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
  <div class="bg-white p-3">
      <h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
      <h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
      <h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
      <h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
      <h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
      <h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
  </div>
            </div>    
                    

---

Valor RGB Gris

En el modelo RGB, los colores grises se obtienen igualando los valores de rojo, verde y azul. Por ejemplo, rgb(128, 128, 128) produce un gris medio. Cuanto más altos sean los valores iguales, más claro será el gris. Por el contrario, valores más bajos producirán tonos de gris más oscuros. El color gris es una mezcla equilibrada de los tres colores primarios en el modelo RGB.

Ejemplo

Gris Medio: rgb(128, 128, 128)

Gris Claro: rgb(192, 192, 192)

Gris Oscuro: rgb(64, 64, 64)

Negro: rgb(0, 0, 0)

Blanco: rgb(255, 255, 255)

Código del ejemplo

                
 <div class="bg-primary p-3 border rounded mt-3">
 <h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
 <div class="bg-white p-3">
     <h1 style="background-color:rgb(128, 128, 128); color:white;">Gris Medio: rgb(128, 128, 128)</h1>
     <h1 style="background-color:rgb(192, 192, 192); color:black;">Gris Claro: rgb(192, 192, 192)</h1>
     <h1 style="background-color:rgb(64, 64, 64); color:white;">Gris Oscuro: rgb(64, 64, 64)</h1>
     <h1 style="background-color:rgb(0, 0, 0); color:white;">Negro: rgb(0, 0, 0)</h1>
     <h1 style="background-color:rgb(255, 255, 255); color:black;">Blanco: rgb(255, 255, 255)</h1>
 </div>
            </div>   
                    

---

Valores RGBA

El modelo RGBA es una extensión del modelo RGB que incluye un componente adicional: alfa. Este componente controla la opacidad del color. La fórmula es:

rgba(rojo, verde, azul, alfa)

Donde alfa es un valor entre 0 y 1 que representa la transparencia del color. Un valor de 0 significa totalmente transparente, mientras que 1 significa totalmente opaco. Por ejemplo, rgba(255, 0, 0, 0.5) representa un rojo semi-transparente. Este modelo permite crear efectos de superposición y transparencia en los elementos web.

Ejemplo

Rojo Semi-Transparente: rgba(255, 0, 0, 0.5)

Verde Semi-Transparente: rgba(0, 255, 0, 0.3)

Azul Semi-Transparente: rgba(0, 0, 255, 0.7)

Negro Semi-Transparente: rgba(0, 0, 0, 0.2)

Blanco Semi-Transparente: rgba(255, 255, 255, 0.6)

Código del ejemplo

                
  <div class="bg-primary p-3 border rounded mt-3">
  <h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
  <div class="bg-white p-3">
      <h1 style="background-color:rgba(255, 0, 0, 0.5); color:white;">Rojo Semi-Transparente: rgba(255, 0, 0, 0.5)</h1>
      <h1 style="background-color:rgba(0, 255, 0, 0.3); color:black;">Verde Semi-Transparente: rgba(0, 255, 0, 0.3)</h1>
      <h1 style="background-color:rgba(0, 0, 255, 0.7); color:white;">Azul Semi-Transparente: rgba(0, 0, 255, 0.7)</h1>
      <h1 style="background-color:rgba(0, 0, 0, 0.2); color:white;">Negro Semi-Transparente: rgba(0, 0, 0, 0.2)</h1>
      <h1 style="background-color:rgba(255, 255, 255, 0.6); color:black;">Blanco Semi-Transparente: rgba(255, 255, 255, 0.6)</h1>
  </div>
            </div>    
                    

---

Ir al índice