@palette: una propuesta para CSS

En los últimos días se ha hablado mucho sobre @font-face que, a pesar de estar disponible desde finales de los 90′s (sólo IE) fue hasta ahora que se pudo adoptar de una forma más madura en los demás navegadores.

Pues bien, siguiendo esta metodología de utilizar “nuestras propias fuentes” así mismo deberíamos hacerlo con los colores.

La época en la que solamente se usaban los 256 colores web-safe quedó atrás hace muchos años y la amplitud en el espectro hexadecimal/rgb nos permite utilizar unos 16’777,216 colores, los cuales utilizamos desde las propuestas en PSD hasta la maquetación final con HTML y CSS

Pero qué hay a la hora de construir el CSS que utilizaremos ¿de qué forma memorizamos el hexadecimal o el RGB para cierto tipo de rojo, verde o azul? Existen software que puede hacer esta labor por nosotros o metodologías de conversión con Javascript o para los más aventados, usar lenguaje de servidor para procesar el CSS con variables.

¿Tan complicado es?

Es por esto que la propuesta de @palette queda formalmente establecida aquí

Usando @palette

La definición quedaría de esta forma

1
2
3
4
5
6
7
8
9

@palette {
red: #CA000;
jeans: #1288AB;
[custom color]: <hex | rgb value>
}

Y declarando en las reglas de CSS normalmente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.clase {

color: jeans;

}

#id {

background: red;

}

Explicación

En @font-face podemos redeclarar una tipografía o bien declarar una nueva para usarla normalmente en el resto del CSS

En @palette estaríamos haciendo prácticamente lo mismo pero con colores, de esta forma, tenemos nuestra paleta de colores declarada y reemplazamos hexadecimales o rgb’s por nombres de fácil lectura e identificación.