Cómo crear una hermosa paleta de colores

A pesar de que la selección de buenos colores es un arte, existen varios trucos para simplificar la elección de un color hermoso. Este artículo consta de dos partes: en la primera, le diré qué hace que la paleta sea buena, y en la segunda derivaré una fórmula que se puede utilizar para seleccionar una paleta hermosa.

Nota: esto está lejos de ser la única forma de elegir buenos colores; más bien, un conjunto de heurísticas que he dominado por mi cuenta. Espero que esto te ayude a encontrar los colores correctos para tu sitio web / aplicación / juego.

Paletas de colores y contraste.

Primero tenemos que decir que los colores no existen de forma aislada. Cuando hablamos de un color hermoso, esto no significa que sea claro u oscuro, saturado o desvanecido. Cuando hablamos de coincidencia de colores, deberíamos pensar no tanto en colores individuales, sino en conjuntos de colores o paletas de colores.


De izquierda a derecha: Super Mario Run, Monument Valley, Alto's Odyssey, Lara Croft Go

Cuando pensamos en conjuntos de colores, debemos pensar en su interacción: ¿algunos de ellos deben destacarse o mezclarse entre sí? Esto se llama contraste.

El proceso de elegir hermosos colores a menudo se reduce a elegir los contrastes adecuados para su diseño.

La belleza de las flores depende de cómo funcionen entre sí en su diseño. Pero cuando se trata del contraste de colores, pero se puede formar de varias maneras:

Brillo (claro / oscuro)

El brillo es un tipo de contraste que es fácil de visualizar. En el selector de color HSB, esto corresponde al movimiento a lo largo del eje vertical:


Brillo

En el caso general, simplemente podemos aumentar el contraste entre los dos colores, simplemente aumentando la diferencia en su brillo.


Contraste de brillo

Aunque es fácil de hacer, no es suficiente crear paletas de calidad. Los colores varían solo en la magnitud del blanco y negro y simplemente no son tan interesantes como los colores que interactúan en más dimensiones. Lo que nos lleva a ...

Contraste tonal

Percibimos el contraste tonal en términos de tonos de colores y niveles de saturación. Casi como en el caso del brillo, un aumento en la diferencia de tono o saturación generalmente aumenta la cantidad de contraste entre los colores.


Contraste de sombra


Saturación (eje horizontal del HSB) y contraste de saturación

Pero aun así, estos valores por sí solos no pueden pintar la imagen completa. Todavía podemos elegir colores que, a pesar de las diferencias de tono o saturación, sigan teniendo un contraste deficiente.


Diferentes tonos y poco contraste.


Diferente saturación y poco contraste

¿Qué está pasando aquí? La respuesta es que diferentes tonos tienen diferentes valores tonales internos . Es difícil para muchas personas (incluyéndome a mí) imaginar qué valores tonales pueden adoptar diferentes tonos. Y eso nos lleva a mi truco favorito ...

Hack en escala de grises

Si muestra los colores en tonos de gris, entonces el brillo del gris resultante puede servir como un buen indicador del valor de los tonos de diferentes colores. Pero es útil no solo para esto: es importante si crea un diseño que tenga en cuenta las necesidades de las personas con discapacidad. Esta es una manera simple de visualizar la cantidad de contraste existente en un diseño, independientemente del tono.


Valores tonales internos para diferentes tonos.

Veamos cómo se ven estos valores tonales en el selector de color HSB. Observe también cómo los cambios en los valores tonales cambian en el espectro para cada tono (que se muestra en la columna de la derecha):


Si miramos los ejemplos anteriores, pero ahora en tonos de gris, será mucho más fácil decir qué colores tienen alto y bajo contraste.


Contraste de saturación: alto contraste arriba, mal contraste abajo.


Contraste de sombra: alto contraste arriba, mal contraste abajo.

Echemos otro vistazo a los juegos que se muestran arriba, pero ahora en escala de grises.


Puedes notar fácilmente que el primer plano se destaca bien en el fondo, los elementos interactivos contrastan fuertemente con los no interactivos, y que si el juego estuviera en escala de grises, aún se podría jugar. La conclusión más importante de esto:

Use el truco en escala de grises con frecuencia e intencionalmente para visualizar los contrastes que existen en su diseño.

Hermosos contrastes conducen a la creación de hermosas paletas de colores, así que te presento ...

Fórmula para elegir hermosas paletas de colores.

Apliquemos el análisis anterior, pero en el orden inverso: comience con el diseño en escala de grises y luego continúe con la selección de los colores apropiados.

1: determinar dónde necesitamos contraste

Cree el marco de su diseño y luego decida en qué áreas del marco necesita más contraste y en qué menos.

2: Colorea el diseño en tonos de gris.

Intente colorear el marco de diseño solo en tonos de gris. Haga que las áreas que requieren más contraste tengan la mayor diferencia de brillo. Este paso debe hacerse en la resolución final del diseño. Los elementos de diseño pequeños (por ejemplo, logotipos e iconos de aplicaciones) requieren un contraste particularmente alto para resaltar elementos pequeños.

3: Elige colores básicos

Elija los tonos básicos de colores con los que desea trabajar. Este es un paso subjetivo, y puede usar herramientas como Pigmento de ShapeFactory o Adobe Color CC para seleccionarlo. Dato curioso: algunas combinaciones de colores son tan populares que obtuvieron el estado de un rastro .

4: Ajuste los colores para tener valores tonales apropiados

Después de seleccionar los tonos, encuentre el intervalo de valores tonales en el que el tono corresponde aproximadamente al valor de tono gris del boceto dibujado anteriormente. Al experimentar con el brillo y la saturación, cambie entre los modos de color real y escala de grises. Su tarea es obtener una paleta de colores que, cuando se muestra en tonos, coincida con el diseño del paso 2.

Ejemplo 1


(1) Marco y (2) contrastes de escala de grises preferidos


(3) Colores base seleccionados

Si quisiéramos llegar a la paleta de colores que se muestra arriba, tendríamos que encontrar qué áreas de cada color corresponden aproximadamente al diseño en escala de grises.


Rangos tonales correspondientes para colores base

Ahora podemos seleccionar combinaciones de colores de cualquier parte de estas áreas:


(4) Varias opciones de paleta de colores

Ejemplo 2

Así es como se veía este proceso al desarrollar mi aplicación Overlink:


Proceso de izquierda a derecha, de arriba a abajo: estructura metálica, escala de grises, colores básicos, diseño final

Felicidades Espero que esto te ayude a elegir conjuntos de colores que contrasten donde lo necesites, se mezclen donde no lo necesites y en general se vean hermosos.

El contraste por sí solo no es el aspecto más crucial para crear un gran diseño, pero juega un papel importante en la elección de hermosas paletas.