Sistema de colores

Antes de continuar, es riguroso citar que no vamos a crear nada nuevo, sino que vamos a resumir un conjunto de ideas que ya se utilizan. Los nombres para los colores son los conocidos, tampoco vamos a innovar en ellos.

También, a lo largo de este artículo, veremos los puntos débiles de cada una de las ideas.

Primer tópico

En el primer tópico, tenemos cuatro colores básicos:

Default El color de fondo por defecto.	Tertiary El color que contrasta con el color primario.
Primary El color para resaltar sobre el color por defecto.	Secondary El color que interactúa con el color por defecto.

La verdad, es que este tópico deja más dudas que certezas, por ejemplo: ¿por qué el color por defecto debería ser el color de fondo? o, ¿cuál es la función real del color secundario? y ¿qué debemos tener en cuenta para elegirlo?

 

Segundo tópico

En el segundo tópico, vamos a centrarnos en los colores que utilizamos para escribir sobre los colores anteriores.

Sobre el color por defecto, aparece el color de la fuente por defecto, y como valor más claro, el del color secundario (o algo muy parecido).

Sobre el resto de los colores, tenemos un valor alternativo al color de la fuente. En el ejemplo, es el mismo color blanco del color de fondo, aunque esta coincidencia no siempre se verifica, como en el caso de muchos temas oscuros.

 

Tercer tópico

En el tercer tópico, vamos a considerar dos modos en que se diseñan los objetos:

regular: Default Primary Secondary Tertiary

solid:  Default Primary Secondary Tertiary

De esta manera, cualquier objeto estará basado en uno de estos diseños.

 

Cómo calcular los colores para ambos diseños

Para calcular los colores que utilizamos en ambos diseños, vamos a considerar las siguientes variables:

$font-color

El color de la fuente.

$font-color-alt

El color de la fuente alternativo, que se utilizará para el texto escrito sobre los colores primario, secundario y terciario.

$color

El color base que estemos procesando (primario, secundario, terciario…)

$secondary-color

El color secundario, u otro muy parecido.

$percentage

Un porcentaje con el cual se hará más claro u oscuro un color.

 

Para el color por defecto, el cuadro de colores para cada modo será:

	solid	regular
font-color:	$font-color-alt	$font-color
background-color:	$font-color	$secondary-color
border-color:	lighten($secondary-color, $percentage)	darken($secondary-color, $percentage)

En el caso del resto de los colores, el cuadro será:

	solid	regular
font-color:	$font-color-alt	darken($color, $percentage)
background-color:	$color	lighten($color, $percentage)
border-color:	lighten($color, $percentage)	$color

 

Note que, para lograr un diseño sólido con el color por defecto, no podemos utilizar a éste, por lo que lo reemplazamos por el color de la fuente.

Por otra parte, tampoco es conveniente utilizar el color por defecto para el fondo, por lo que utilizamos el color secundario o uno similar.

En este punto, podemos inferir que el color secundario es un color que está entre el color por defecto y el color de la fuente.

 

Agregando interactividad

Si queremos reflejar eventos, como un hover o un disabled, a cada valor de las tablas anteriores, debemos agregarle dos colores, uno que indique que el elemento se ha activado y otro que indique que se ha desactivado.

 

Conclusión

Si bien los colores basados en el color por defecto y en el secundario tienen muchos puntos en común, todos los conjuntos de colores se referencian a sí mismos, vinculándose muy poco entre sí. Esto tiene sus ventajas, por ejemplo: para crear un elemento sólo se necesita un conjunto y no es necesario intercalarlos. Por otra parte, requiere que cada uno de los conjuntos tengan otros valores, como, por ejemplo: un color de fuente más claro, el color para los encabezados y el color para los enlaces.