Colores rgb y rgba
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;
}
Más información sobre transparencias rgba
Convierta fácilmente los colores hex en rgb o hsl y vicevarsa.