Crear un marco de paleta de colores

Cómo definir un marco de colores al crear una paleta de colores para su marca

El color es uno de los elementos más importantes en el sistema de lenguaje de diseño de una marca / producto. Nuestros cerebros están programados para rechazar información estimulante tanto por debajo como por encima, por lo que es muy importante crear una paleta de colores que ofrezca tanto interés visual como un sentido de orden.

Creo que construir un conjunto definido de sistema / reglas es importante cuando comienzas a diseñar algo. Los colores son un subconjunto del DLS (Design Language System) de una marca, y es una de las áreas principales, donde los diseñadores se pierden en la construcción de un conjunto definido de reglas para su uso de los colores.

"Los sistemas de diseño proporcionan un mapa conveniente, centralizado y en evolución de los territorios de productos conocidos de una marca con punteros direccionales para ayudarlo a explorar nuevas regiones". ~ Chris Messina, ex Uber

En este artículo, discutiremos algunas técnicas para definir un conjunto de reglas para generar variaciones de color, que pueden escalarse a un espectro de uso más amplio y que también podrían aplicarse en cualquier paleta de marcas en el futuro. Puede elegir cualquiera de estas técnicas o combinarlas para crear la suya.

Empecemos

Aquí hay una lista de algunas propiedades de color que aprovecharemos en todo su potencial para crear variaciones de color:

  • El tono es color (azul, verde, rojo, etc.).
  • El croma es la pureza de un color (un croma alto no tiene negro, blanco o gris agregado).
  • La saturación es la cantidad de un tono dado presente (una saturación más baja tiene menos tono y más cerca del blanco).
  • Brillo / Valor se refiere a cuán claro u oscuro es un color (el oscuro tiene un brillo / valor bajo).
  • La opacidad se refiere a cuán transparente u opaco es un color (alta transparencia con baja opacidad).
  • Los tonos se crean agregando gris a un color, haciéndolo más opaco que el original.
  • Las sombras se crean agregando negro a un color, haciéndolo más oscuro que el original.
  • Los tonos se crean agregando blanco a un color, haciéndolo más claro que el original.
Resumen de propiedades de color. Utilizaremos una combinación de estas propiedades para generar variaciones de color. Descargar la versión impresaCuadrícula de marco de escala de 10 puntos para comprender las propiedades del color

La cuadrícula del marco

El gráfico anterior muestra la relación entre Brillo, Opacidad, Tintes, Tonos, Tonos y Croma para un Tono particular. Este gráfico fue construido usando una escala de 10 puntos. Lo que significa es que la opacidad del color varía en un 10% en el eje X y el brillo varía en un 10% en el eje Y.

Usaremos una versión simplificada del gráfico anterior, usando una escala de 25 puntos para construir nuestra Cuadrícula de Marco Base. Esta cuadrícula servirá como nuestro patio de recreo con múltiples posibilidades para generar colores.

He usado Sketch App para crear la cuadrícula del marco, pero se puede crear lo mismo en otras herramientas de diseño como Photoshop / Illustrator / Figma / Gimp / etc. Utilizaremos el popular sistema HSB Color en todos lados.

️ Consulte la imagen a continuación mientras sigue los pasos a continuación:

Paso 1. Seleccione un tono base. Crea un cuadrado de 50 x 50 px con este tono. Aquí, por ejemplo, elegí un tono azul (H 212, S 67, B 89).

Paso 2. Crea un mosaico cuadrado blanco de 10 x 10 px (H 0, S 0, B 100).

Paso 3. Duplica estos mosaicos blancos (5 filas, 5 columnas) para que cubran todo el cuadrado de base del Paso 1.

Paso 4. Reduce la opacidad de cada columna de mosaicos blancos en un 25% de izquierda a derecha.

Paso 5. Reduce el brillo de cada fila de baldosas blancas en un 25% de arriba a abajo.

Aquí está el archivo de croquis de los pasos mencionados anteriormente

Entonces, ahora tienes la Base Framework Grid. Si siguió los pasos correctamente, tendrá una cuadrícula de colores similar a la que se muestra en la imagen de arriba en el Paso 5. Usaremos esta cuadrícula de marco para aprender algunos métodos para generar nuevos colores.

Para visualizar mejor las variaciones de color, utilicé 3 tonos base más como ejemplos en los métodos a continuación. Obviamente puedes elegir tus propios colores.

1. Método de tono, tono y sombra

Descargar boceto

Este método es el más utilizado, debido a su simplicidad. La cuadrícula de marco base que creó anteriormente se generó utilizando este método. La opacidad y el brillo de las baldosas blancas sobre su Hue base, va del 100% al 0% (de izquierda a derecha) y del 0% al 100% (de abajo hacia arriba) respectivamente.

El tema Color en el lado derecho se creó utilizando nuestras 3 Tonalidades base (mencionadas anteriormente) y seleccionando los valores de Opacidad y Brillo de la columna central en el lado izquierdo (indicado por la flecha).

2. Método de fusión de superposición

Descargar boceto

En este método, usamos el mismo marco base y cambiamos el modo de Fusión de los mosaicos blancos a Superposición. Esto crea una hermosa diferencia de tono en la cuadrícula.

3. Método de mezcla de luz suave

Descargar boceto

Similar al método de fusión de superposición n. ° 2, aquí cambiamos el modo de fusión de los mosaicos blancos a luz suave. Esto crea una hermosa diferencia de saturación en la cuadrícula. Luego seleccionamos todos estos mosaicos blancos y los duplicamos dos veces. Esto crea una diferencia de saturación más fuerte y, por lo tanto, una mejor intensidad de color.

4. Método de fusión de superposición de color frío

Descargar boceto

Este método utiliza el marco de la cuadrícula que creamos en el método # 2 Overlay Blending. Luego elegimos cualquier color Cool (azul, por ejemplo). Cree un rectángulo de este color y colóquelo en toda la cuadrícula. Cambia su modo de fusión a Superposición. La cuadrícula de color resultante tiene un efecto Vivid cool.

5. Método de fusión de superposición de colores cálidos

Descargar boceto

Muy similar al método # 4 Cool Color Overlay Blending, aquí elegimos cualquier color cálido (naranja, por ejemplo). Cree un rectángulo de este color y colóquelo en toda la cuadrícula. Cambia su modo de fusión a Superposición. La cuadrícula de color resultante tiene un efecto cálido dramático.

6. Método de ajuste de brillo

Descargar boceto

Este método es un poco diferente y más fácil de los métodos mencionados anteriormente. Las fichas blancas sobre el tono base no están presentes en esta cuadrícula. En su lugar, creamos mosaicos del color base (como se muestra en la imagen a continuación), y creamos un rango de color Claro y Oscuro aumentando y disminuyendo su valor de Brillo, respectivamente.

El tema Color en el lado derecho se creó utilizando nuestras 3 Tonalidades base y luego simplemente aumentando y disminuyendo los valores de Brillo para crear variaciones de Luz y Oscuridad respectivamente.

7. Método de ajuste de brillo + saturación

Descargar boceto

Este método usa la misma cuadrícula del método # 6 Brightness Tweak. Aquí, ajustamos los valores de Saturación junto con los valores de Brillo. Creamos una gama de colores claros y oscuros aumentando y disminuyendo su valor de brillo, y simultáneamente disminuyendo y aumentando los valores de saturación respectivamente.

Regla 1: Variación de color más claro = Saturación más baja + Brillo más alto.

Regla 2: variación de color más oscuro = mayor saturación + menor brillo.

Ejemplo híbrido

Descargar boceto

Aquí hay un ejemplo híbrido que combina los métodos 1, 3, 4 y 5 para generar una hermosa paleta de colores. Esto se inspiró en uno de los artículos sobre Sketch Tricks para construir un sistema de color rápidamente en Sketch App.

Conclusión

Se trata de utilizar sus herramientas y aprovechar los conceptos básicos de los elementos de diseño. La combinación de diferentes elementos / técnicas a menudo abre una puerta a infinitas posibilidades.

Incluso hay más métodos para generar temas de color. Como puede ver, crear una Cuadrícula de Marco Base fue la parte más importante. La cuadrícula sirvió como un patio de recreo para su imaginación para generar sistemas de color. Puede combinar varios métodos para crear un conjunto de colores completamente nuevo a partir de su tono base. (prueba Gradientes en lugar de la base sólida Hue ).

También puede usar el Método de capas de ajuste de Justin Mezzell para crear conjuntos de colores Vintage.

Pronto escribiré sobre otro método interesante (y complejo) para generar un conjunto de temas de color, utilizando la función de Distribución Gaussiana. Gracias a Nishant por el tweet que me dio la inspiración para investigar este método. Puedes seguirme para estar actualizado.

Sobre mi

Hola, soy Rahul Chakraborty, creando experiencias y creando soluciones en la plataforma de comercio electrónico más grande de la India, Flipkart.

Tuiteo regularmente temas relacionados con el diseño y la tecnología, y mi trabajo en progreso en Dribbble. Puedes encontrar mi otro lado en Instagram.

Finalmente, después de muchas dilaciones, este es mi primer artículo sobre Medium. La retroalimentación es muy bienvenida. Si le gustó o aprendió algo después de leer esto, recomiéndelo a otros. (Aplausos va hasta 50 )

¡Gracias por leer!

Twitter
Dribbble
Instagram