Un tutorial sobre cómo elegir colores bonitos

Aunque elegir buenos colores es un arte, hay algunos trucos que puedes usar para que sea fácil elegir colores bonitos. Este artículo viene en dos partes: primero repasaré qué es lo que hace una buena paleta de colores y, en segundo lugar, describiré una fórmula que puede usar para llegar a una paleta atractiva.

Descargo de responsabilidad: esta es, lejos, la única forma de elegir buenos colores, y es más un conjunto de heurísticas que he llegado a adoptar. Espero que esto pueda ayudarlo a elegir los colores correctos para su sitio web / aplicación / juego / what-have-you.

Paletas de colores y contraste

En primer lugar, debemos reconocer que los colores no existen de forma aislada. Un color bonito no es claro u oscuro, saturado o desaturado. Cuando pensamos en elegir colores, no deberíamos pensar tanto en colores individuales como en elegir 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 términos de conjuntos de colores, debemos pensar en su interacción: ¿deberían destacarse ciertos o deberían combinarse entre sí? Esto se llama contraste.

Elegir colores bonitos a menudo se reduce a elegir los contrastes adecuados para su diseño.

La forma en que los colores que usas trabajan juntos en tu diseño determina cuán bonitos se ven. Pero cuando se trata de contraste de color, hay varias formas en que puede existir:

Brillo aka. Oscura luz

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

Brillo

En general, podemos simplemente aumentar la cantidad de contraste entre dos colores simplemente aumentando la diferencia en su brillo.

Contraste de brillo

Aunque esto es fácil, es insuficiente para crear grandes paletas. Los colores que solo varían en la cantidad de blanco y negro en ellos simplemente no son tan interesantes como los colores que interactúan en más dimensiones. Lo que nos lleva a ...

Contraste tonal

Podemos pensar en el contraste tonal en términos de tonos de color y niveles de saturación. Al igual que con el brillo, aumentar la diferencia de tono o saturación, en general, aumentará la cantidad de contraste entre los colores.

Contraste de tonoSaturación (eje horizontal en HSB) y contraste de saturación

Aun así, estos valores por sí solos tampoco pintan la imagen completa. Todavía podemos elegir colores que, incluso si difieren en matiz o saturación, todavía tienen un contraste deficiente.

Diferentes matices y poco contraste.Diferente saturación y poco contraste

¿Lo que da? La respuesta es que diferentes tonos tienen diferentes valores tonales inherentes. Para muchas personas (incluido yo mismo), es difícil imaginar qué valores tonales pueden tomar los diferentes tonos. Lo que me lleva a mi truco favorito ...

El truco de escala de grises

Cuando visualiza colores en escala de grises, el brillo del gris resultante puede servir como un buen indicador del valor de los diferentes tonos de color. No solo eso, también es útil para cuando se diseña para la accesibilidad. Es una forma sencilla de visualizar la cantidad de contraste que existe en un diseño independiente del tono.

Valores tonales inherentes para diferentes tonos

Veamos cómo se ven estos valores tonales en un selector de color HSB. También tenga en cuenta cómo los valores tonales cambian sobre el espectro de cada tono, resaltado en la columna más a la derecha:

Si echamos un vistazo a algunas de las muestras anteriores, pero en escala de grises, podemos ver más fácilmente qué colores tienen un contraste alto y bajo.

Contraste de saturación: alto contraste en la parte superior, poco contraste en la parte inferior.Contraste de tono: alto contraste en la parte superior, poco contraste en la parte inferior.

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

Puedes ver fácilmente cómo los primeros planos aparecen de los fondos, cómo los elementos interactivos contrastan en gran medida con los elementos no interactivos y cómo, si los juegos fueron en escala de grises todo el tiempo, probablemente todavía sería jugable. La conclusión clave aquí es:

Use el truco en escala de grises, generosamente y con frecuencia, para visualizar los contrastes que existen en sus diseños.

Los bonitos contrastes hacen bonitas paletas de colores, y por eso te presento ...

Una fórmula para elegir paletas de colores bonitos

Apliquemos el análisis que hicimos anteriormente, pero a la inversa: comience con un diseño en escala de grises y luego trabaje para elegir los colores correspondientes.

1: Determine dónde necesita contraste

Cree una estructura metálica para su diseño y luego decida qué áreas de su estructura metálica necesitan mucho contraste y cuáles necesitan menos contraste.

2: Colorea tu diseño usando Shades of Grey

Intente colorear su diseño de estructura metálica solo en tonos de gris. Asegúrese de que las áreas de su diseño que necesitan más contraste tengan la mayor diferencia de brillo. Asegúrese de realizar este paso en la resolución final de su diseño. Los diseños más pequeños (por ejemplo, logotipos e íconos de aplicaciones) pueden requerir contrastes más altos para definir elementos más finos.

3: Elija sus tonos de color base
Elija los tonos de color base con los que desea trabajar. Esta es la parte subjetiva, y puede usar herramientas como Pigmento de ShapeFactory o Adobe Color CC para elegir algunas. Dato curioso: algunos combos de colores son tan populares que han alcanzado el estado de tropo.

4: Ajuste sus colores para que tengan valores tonales coincidentes
Una vez que haya resuelto sus matices, encuentre qué rango de valores tonales debajo de ese matiz corresponde aproximadamente al valor de tono gris que bosquejó anteriormente. Cambie su pantalla entre el color y la escala de grises mientras juega con los valores de brillo y saturación en su selector de color. Su objetivo es llegar a una paleta de colores que, cuando se ve en escala de grises, coincida con su diseño en la parte 2.

Ejemplo 1

(1) Estructura metálica y (2) Contrastes preferidos en tonos de gris(3) Nuestras opciones de color base

Si quisiéramos crear una paleta de colores para lo anterior, encontraríamos qué regiones de cada color corresponden aproximadamente a nuestro diseño en escala de grises.

Regiones de valor tonal correspondientes para nuestros colores base

Ahora podemos elegir combinaciones de colores desde cualquier lugar dentro de esas regiones:

(4) Algunas opciones para paletas 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 base, final

Felicidades! Esperemos que esto te ayude a elegir un conjunto de colores que contrasten donde lo necesiten, que se mezclen donde no lo hacen y que, en general, se vean bonitos.

El contraste por sí solo no será la clave para decidir si su diseño se ve bien, pero jugará un papel importante en si sus paletas de colores se ven increíbles.

Overlink es el proyecto que inspiró este artículo. Si te gusta 3D Logic Puzzles, puedes descargarlo (gratis) en iOS: https://itunes.apple.com/au/app/overlink/id1453086788