Los
colores en CSS se pueden indicar de cinco formas diferentes: palabras clave,
colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. Aunque el
método más habitual es el del RGB hexadecimal, a continuación se muestran todas
las alternativas que ofrece CSS.
Palabras clave
CSS define
17 palabras clave para referirse a los colores básicos. Las palabras se
corresponden con el nombre en inglés de cada color:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow
RGB decimal
En el
campo del diseño gráfico, se han definido varios modelos para hacer referencia
a los colores. Los dos modelos más conocidos son RGB y CMYK. Simplificando su
explicación, el modelo RGB consiste en definir un color indicando la cantidad
de color rojo, verde y azul que se debe mezclar para
obtener ese color. Técnicamente, el modelo RGB es un modelo de tipo
"aditivo", ya que los colores se obtienen sumando sus componentes.
p {
color: rgb(71, 98, 176); }
RGB porcentual
Las
componentes RGB de un color también se pueden indicar mediante un porcentaje.
El funcionamiento y la sintaxis de este método es el mismo que el del RGB
decimal. La única diferencia es que en este caso el valor de las componentes
RGB puede tomar valores entre
0% y 100%. Por tanto, para transformar un valor RGB decimal en un
valor RGB porcentual, es preciso realizar una regla de tres considerando
que 0 es
igual a 0% y 255 es igual a 100%.
El mismo
color del ejemplo anterior se puede representar de forma porcentual:
p
{ color: rgb(27%, 38%, 69%); }
RGB hexadecimal
Aunque es el
método más complicado para indicar los colores, se trata del método más
utilizado con mucha diferencia. De hecho, prácticamente todos los sitios web
reales utilizan exclusivamente este método.
p {
color: #4762B0; }
El
formato RGB hexadecimal es la forma más compacta de indicar un color, ya que
incluso es posible comprimir sus valores cuando todas sus componentes son
iguales dos a dos:
#AAA = #AAAAAA
#FFF = #FFFFFF
#A0F = #AA00FF
#369 =
#336699
0 Comentarios