Flujo RGB en CSS – Barcelona Geeks

RGB representa los colores en CSS. Hay tres flujos en esta nomenclatura que representan un color, a saber, los flujos rojo, verde y azul. La intensidad de los colores se representa con números del 0 al 255. Esto permite que CSS tenga un espectro de colores visibles.

Estos tres colores pueden estar en forma de números (0 a 255) o porcentajes.

RGB(255, 0, 0) o RGB(100%, 0, 0) es ROJO, ya que el rojo se establece en su valor más alto.
RGB(0, 255, 0) o RGB(0, 100%, 0) es VERDE, ya que el verde se establece en su valor más alto.
RGB(0, 0, 255) o RGB(0, 0, 100%) es AZUL, ya que el azul se establece en su valor más alto.

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 2px solid;
            display: flex;
            float: left;
            margin: 10px;
            border-radius: 10px;
        }
  
        .box1 {
  
            /* rgb(100%, 0, 0) */
            background-color: rgb(255, 0, 0);
        }
  
        .box2 {
  
            /* rgb(0, 100%, 0) */
            background-color: rgb(0, 255, 0);
        }
  
        .box3 {
  
            /* rgb(0, 0, 100%) */
            background-color: rgb(0, 0, 255);
        }
    </style>
</head>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
  
</html>

Producción:

Ejemplo 2: Podemos usar rgb() para diferentes colores.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        div {
            width: 250px;
            height: 120px;
            display: flex;
            float: left;
            margin: 10px;
            border: 1px solid;
        }
  
        .box1 {
            background-color: rgb(131, 176, 7);
        }
  
        .box2 {
            background-color: rgb(230, 77, 163);
        }
  
        .box3 {
            background-color: rgb(106, 90, 205);
        }
  
        .box4 {
            background-color: rgb(90, 197, 205);
        }
  
        .box5 {
            background-color: rgb(0, 255, 255);
        }
  
        .box6 {
            background-color: rgb(255, 69, 0);
        }
  
        .box7 {
            background-color: rgb(60, 60, 60);
        }
  
        .box8 {
            background-color: rgb(255, 255, 255);
        }
    </style>
</head>
  
<body>
    <h2 style="color:green">
          GeeksforGeeks
      </h2>
    
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por nitupandel001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta