Creando una nomenclatura para nuestros colores

En el momento de crear cualquier tipo de diseño, ya estemos hablando de una web, el prototipado de una aplicación, una ilustración o cuando inventamos un nuevo logotipo, la elección de los colores es una parte esencial. Y seguramente en más de una ocasión, sobre todo cuando trabajamos en equipo y tenemos una paleta de colores amplia, os habéis encontrado en una situación donde es complicado tratar de nombrar un color exacto a un compañero. Ahí es cuando entra en valor el uso de la nomenclatura de colores.

Porque cuando tenemos una paleta con colores muy diferenciados, es muy sencillo: esto es rojo, esto es azul y esto es amarillo. Hasta aquí todos de acuerdo. ¿Pero qué ocurre cuando estemos usando un mismo tono de rojo con diferentes luminosidades?. ¿O si trabajamos en una escala de grises?. Si usamos gris claro y gris oscuro, pronto nos quedamos sin adjetivos a menos que estemos echando mano del diccionario de sinónimos. Aunque esto no es lo más óptimo cuando estemos trabajando.

Por eso hoy queríamos hacer este artículo, para proponeros diferentes nomenclaturas de colores que podemos utilizar y aplicar en nuestros diseños para hacerlos más eficaces y que sea más sencillo de trabajar con ellos. No solo cuando lo hacemos en equipo, sino también si estamos en solitario, ya que nos da una herramienta más que aplicar a nuestros proyectos de forma transversal. Y que no tengamos que estar pensando en cada nuevo proyecto de que forma vamos a nombrar los colores esta vez.

Tipos de nomenclatura que podemos usar

Como hemos dicho antes, no hay una única nomenclatura que podemos usar y, por supuesto ninguna es correcta o mejor que las demás. Al final, todo se trata de escoger una (o la combinación de varias) que mejor se adapte a nuestro método de trabajo y que nos haga ser más eficientes.

Usar el código de color

Este es el primero que se nos viene a la cabeza, y es directamente el código de color correspondiente. Podemos elegir el típico RGB, el HEX utilizado comúnmente en la web, o el HSL que recomendamos hace tiempo en Silo, entre otros.

La parte negativa es que, a simple vista, es difícil imaginar con exactitud por su código que color se esta usando. La positiva es que, usando códigos como el HSL, es sencillo crear variaciones de una misma tonalidad simplemente modificando sus valores, sin tener que ver directamente el color.

Buscar un nombre exacto

Si ya hemos dicho que lo de nombrar como rojo o azul nuestros colores se nos puede quedar corto muy pronto, existen alternativas para ampliar estas posibilidades. Una de las opciones es usar las tablas de Pantone, en la que muchos colores tienen ya un nombre propio. Por ejemplo, en el 2022 eligieron como color del año Veri Peri, un color violeta con código HEX #6667AB. Como este, tienen infinidad de colores con su propio nombre.

very peri, color de tonalidad violeta, nombrada por pantone como color del año 2022

También existen herramientas como Color-Name donde, introduciendo un código de color HEX, nos devolverá una nombre. Si le damos el código HEX #BF8751, veremos que lo nombra como Coffee Stain. De esta forma, tenemos un conversor muy sencillo de usar y donde obtendremos un nombre a utilizar de forma rápida sin tener que buscar uno por nosotros mismos.

web color-names, donde ofrecen nombres para cada color con codigo hex

Utilizar un nombre contextual

Los que os dediquéis al diseño web, seguro que os suena esta nomenclatura. Y es que no es más que darle una denominación al color según su utilización dentro de un proyecto, o cuando se utiliza. Aquí nos olvidamos por completo de su color, esto es totalmente funcional. El color más usado lo llamaremos primary, el siguiente secondary, y así. A partir de aquí, vamos añadiéndole apellidos a la nomenclatura. Si en una web usamos el color primary en un botón, y tiene este color tiene una luminosidad diferente al pasar el puntero por encima (o hacer hover), llamaremos a este nuevo color primary-hover.

Como hemos dicho, es habitual utilizar este tipo de nomenclatura en diseño web, sobre todo cuando hacemos uso de variables CSS, ya que nos permite casi abstraernos de que color exacto estamos usando, y pensar solo en su funcionalidad dentro del proyecto en conjunto. Además de que, ante cualquier cambio brusco de color (si de repente el color primary pasa de azul a granate), no nos afecta a nuestra nomenclatura y podemos seguir usándola.

Buscar un nombre reconocible

La última opción es una más informal, y que en proyectos más pequeños y con gente más cercana se está haciendo habitual. No es más que usar nombres populares o que son reconocibles dentro del propio equipo o por las personas que van a trabajar en el proyecto. Para explicarlo, vayámonos a algo cercano. En la web de Silo es habitual encontrar un tono de rojo, que tiene un código HEX #B92326. A la hora de trabajar, es algo farragoso estar nombrando elementos con esta nomenclatura, por lo que podemos designarlo como silo-red. Solo con leerlo, ya sabemos a que color nos referimos. Pero no solo hay que limitarse a conocimientos internos, sino que podemos aplicarlo a temas populares. Desde pikachu-yellow a twitter-blue. Aquí las posibilidades son casi ilimitadas.

pikachu y logo de twitter, con sus colores más representativos, amarillo y azul, tomados para crear una nomenclatura de color

Añadiendo información extra a nuestra nomenclatura

Una vez tenemos claro cuales son nuestras opciones a la hora de nombrar colores y las nomenclaturas existentes, podemos ir un paso más allá y añadir otra capa de información. Una de mis estrategias favoritas es la de terminar la nomenclatura que estemos usando con una numeración, que nos va a ayudar sobre todo cuando tenemos una misma tonalidad con variantes. Y que nos va a liberar del todo de la indefinición al usar nombres de colores con los apellidos claro y oscuro.

Lo primero es definir cual es nuestro tono base, y a este añadirle al final un -500. Así, podemos hacer una especie de escalera de color, en la que los tonos más claros que el tono base van a llevar una numeración ordenada menor a 500, y los más oscuros, por encima de 500.

ejemplo de nomenclatura de color con numeracion segun el valor de la tonalidad

Así, vamos a reconocer rápidamente en que rango de colores nor vamos a estar moviendo, y en que posición esta cada color con respecto a cada luminosidad. Esto también es muy útil cuando estemos trabajando con paletas monocromáticas grises. Ahora ya podemos definir todos los colores intermedios de forma sencilla y rápida.

Conclusiones

Como hemos dicho, usar una nomenclatura en nuestras paletas de color no solo nos permite trabajar mejor en equipo y que todos los miembros tengan un denominador común al momento de nombrar colores. También si trabajamos en solitario nos va a permitir tener ciertos hábitos para mantenerlos en todos nuestros proyectos.

Por supuesto, es uso de estas nomenclaturas de colores no es única, y debemos adoptar la que mejor se adapte a nosotros o a nuestro entorno de trabajo. Debemos elegir una con la que nos sintamos cómodos, y que nos sean más confortables de utilizar que códigos de color puros y duros.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *