CSS: Representando el color

Publicado por Juan Pablo el 28.Dic.2005 | Comentarios (1)

EL color en CSS es representado utilizando el modelo RGB:

Rojo (Red)
Verde (Green)
Azul (Blue)

Mezclado estos tres colores podemos representar otros. Para hacer dicha mezcla tenemos las siguientes alternativas:

El nombre del color
Un número hexadecimal
Un número decimal
Un porcentaje

Las siguientes clases son equivalentes:


.c1 {background-color:purple;color:yellow}
.c2 {background-color:#800080;color:#ffff00}
.c3 {background-color:rgb(128,0,128);color:rgb(255,255,0)}
.c4 {background-color:rgb(50%,0%,50%);color:rgb(100%,100%,0%)}

Optimizando la representación

La forma más común de representación es la notación hexadecimal (.c2). El signo ~~peso~~ gato seguido de seis números, pero podemos simplificar estos seis números en sólo tres siempre y cuando cada color RGB sea un par repetido. Es así como el color ~~800080~~ ffff00 puede ser representado como ~~808~~ ff0. Por lo tanto la clase .c2 puede ser optimizada como:

.c2 {background-color:#800080;color:#ff0}

Enlaces Relacionados:

Actualización: Mis disculpas, hubo algunos errores involuntarios producto de mi discalculia de fin de año (ustedes comprenden). El color #800080 no se puede representar en forma abreviada. ¡Qué torpe!. Gracias Wachunei.

Enlace Permanente, Comentarios (1), Publicada en: CSS | Lifehacks