Colores rgb y rgba

facebook-svg gplus-svg twitter-svg

El CSS nos permite especificar los colores de varias maneras. Algunas de estas posibilidades nos permiten representar los colores como una mezcla de los tres colores básicos:

r – red (rojo), g – green (verde), b – blue (azul)

De aquí el nombre de colores RGB. Mezclando estos tres colores en diferentes proporciones podemos obtener toda la gama de colores existentes.

Por ejemplo:
Si queremos un anaranjado, podemos mezclar rojo al 100% y verde al 60%, dejando el azul en 0%

#porcentajes {
  width: 100px;
  height: 100px;
  background-color: rgb(100%, 60%, 0%);
}

Más información sobre :before

También podemos especificar los tres colores básicos como valores numéricos entre 0 y 255. ( Esto tiene que ver con el número de valores que puede ser almacenado en un byte ). De hecho es mucho más común utilizar números de 0 a 255 que porcentajes.

Por ejemplo:
Si queremos especificar el mismo anaranjado de antes, utilizando valores numéricos en lugar de porcentajes, así es como tenemos que hacerlo:
100% = 255
60% = (60*255)/100 = 153
0% = 0
color:rgb(255, 153,0);

#numerico {
  width: 100px;
  height: 100px;
  background-color: rgb(255, 153, 0);
}

RGBA

En el css3 además de los códigos rgb podemos utilizar los códigos rgba donde a representa el valor alpha ( como en transparencia alpha ). De hecho el parámetro alpha representa la opacidad y es un número decimal de 0.0 ( completamente transparente ) a 1.0 ( totalmente opaco ).


#alpha1 {
  width: 100px;
  height: 100px;
  background-color: rgb(255, 153, 0);
}

#alpha2 {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: rgba(153, 255, 0, .7);
  top: -50px;
  left: 50px;
}
#alpha1
#alpha2

Más información sobre transparencias rgba
Convierta fácilmente los colores hex en rgb o hsl y vicevarsa.

Enlaces útiles

- Convierta fácilmente los colores hex en rgb o hsl y vicevarsa.