Si vas a usar el color efectivamente en tus diseños, necesitarás saber algunos conceptos sobre el color y términos relacionados a la teoría del color. Un análisis exhaustivo sobre conceptos como saturación o valor es clave para crear tus propias combinaciones de colores. En nuestro primer artículo sobre teoría del color, hablamos de los significados de los diferentes colores. Aquí trataremos la parte básica de qué afecta a los colores, agregarle gris, blanco o negro al matiz puro y su efecto en el diseño, por supuesto, con ejemplos.

Matiz

El matiz es el término más básico del color y denota el color de un objeto. Cuando decimos «azul», «rojo» o «verde», hablamos de matices. Los matices que usas en tus diseños brindan mensajes importantes a tus visitantes.

Ejemplos

teoria-del-color2-1

El matiz primario del fondo y una parte de la tipografía en este sitio es rojo brillante.

teoria-del-color2-2

Usar muchos matices puros puede agregar una apariencia divertida al diseño como lo hecho en la cabecera y el resto del sitio.

teoria-del-color2-3

Rojo puro es un matiz muy popular en el diseño web.

teoria-del-color2-4
Mix usa muchos matices puros en su cabecera y en el logo.

teoria-del-color2-5
El verde en su forma más pura no se ve a menudo por eso resalta más que otros colores.

Pureza

Un matiz con alta pureza no tiene blanco, negro o gris en su mezcla. Agregarle estos colores reduce su pureza. Es similar a la saturación pero no lo mismo, la pureza se pude definir como el brillo de un color en comparación al blanco.

En diseño, evita usar matices con una pureza muy similar. En cambio, usa matices con purezas que se alejen unas de otras.

Ejemplos

teoria-del-color2-6
El cián tiene una pureza alta así que realmente se destaca junto al blanco y negro.

teoria-del-color2-7
Otro sitio web con un azul de alta pureza, aunque también incluye otros tintes y tonos de menor pureza.

teoria-del-color2-8

 

Combinando alta y baja pureza de un mismo matiz puedes lograr un diseño sofisticado y elegante para tu sitio.

teoria-del-color2-9

Colores con una pureza muy alta se aprecian mejor usados con moderación, como en este caso.

teoria-del-color2-10
Diferencias en la pureza pueden lograr una gradiente visualmente placentera.

Saturación

La saturación se refiere a cómo un matiz aparece bajo ciertas condiciones de luz. Piensa en la saturación en términos de débil vs. fuerte o matices pálidos vs. puros. 

En el diseño web, los colores con una saturación similar hacen diseños de aspecto más cohesivo. Como con la pureza, colores con saturaciones similares pero no iguales tienen un efecto discordante en los visitantes.

Ejemplos

teoria-del-color2-11
Los niveles de saturación de los diferentes matices usados aquí soy muy similares, agregando una sensación de unidad al diseño general.

teoria-del-color2-12

Combinando colores con niveles similares de saturación opaca crea un diseño suave que es enfatizado por las marcas de agua.

teoria-del-color2-13

Colores con baja saturación no son necesariamente más claros, como en este caso.

teoria-del-color2-14

Un excelente ejemplo de cómo usar un matiz con alta saturación en un fondo con baja saturación puede hacerlo resaltar.

teoria-del-color2-15
Otro ejemplo de como los colores de baja saturación ayudan a resaltar los colores de saturación alta.

Valor

El valor podría ser llamado también «claridad». Se refiere a qué tan claro u oscuro es un color. Colores claros tienen valores más altos. Por ejemplo, el naranja tiene un valor más alto que el azul marino. El negro tiene el menor valor de todos los colores y el blanco tiene el más alto.

Al aplicar los valores de color a tus diseños, favorece a los colores con valores distintos, en especial a los de alta pureza. Valores de alto contraste generalmente producen diseños estéticamente placenteros.

Ejemplos

teoria-del-color2-16
El alto valor del amarillo usado aquí resalta sobre el menor valor del negro y el gris.teoria-del-color2-17

 

Este sitio web combina matices azules con diferentes valores. Debido a que los valores diferentes tienen el contraste suficiente, la apariencia general es bastante atractiva.

teoria-del-color2-18

 

Combinar colores con valores similares logra un fondo enérgico y animado (que se ve mejorado por el diseño en sí).

teoria-del-color2-19

 

El rojo aquí tiene un valor más bajo que el azul claro, el cual tiene un valor más bajo que el blanco.

teoria-del-color2-20

 

El ojo humano puede encontrar diferencias en el valor aún en matices similares.

Tono

Los tonos se crean cuando se le agrega gris a un matiz. Los tonos son generalmente opacos y de apariencia más suave que los matices puros.

Los tonos son a veces fáciles de usar en el diseño. Tonos con más gris pueden darle un aspecto vintage a las páginas. Dependiendo de los matices, también pueden agregarle un aspecto sofisticado o elegante.

Ejemplos

teoria-del-color2-21
Los tonos pueden darle a un sitio un aspecto sofisticado a la vez que le agregan un estilo vintage y anticuado.

teoria-del-color2-22
Este sitio combina azules en una variedad de tonos, sombras y tintes.

teoria-del-color2-23

Los tonos se pueden hacer más intensos agregando gris a su alrededor, como en este caso.

teoria-del-color2-24
Los tonos usados en la navegación y el fondo le dan al diseño un estilo vintage como hecho a mano.teoria-del-color2-25

 

Un gran ejemplo de cómo un matiz puro puede resaltar frente a un fondo de tonos.

teoria-del-color2-26

 

Algunos colores que podemos considerar grises son en realidad tonos de otros colores. En este caso el fondo es un tono de azul con mucho gris.

Sombras

Una sombra es cuando se le agrega negro a un matiz, haciéndolo más oscuro. La palabra se usa a veces incorrectamente para describir un tinte o tono, pero la sombra solo se aplica cuando el matiz se hace más oscuro por la adición de negro.

En diseño web, sombras muy oscuras son usadas a veces en vez de negro y pueden servir como neutrales. Combinar sombras con tintes es lo mejor para evitar una apariencia muy oscura y pesada.

Ejemplos

teoria-del-color2-27
Este sitio tiene muchas sombras de morado en el fondo (y un par de tintes en otras partes).

teoria-del-color2-28

Usar diferentes sombras juntas funciona bien, siempre que haya el suficiente contraste entre ellas.

teoria-del-color2-29

Una combinación efectiva de sombras y tintes, particularmente en la cabecera.

teoria-del-color2-30
Otro diseño de fondo que tiene sombras (y algunos tintes) en una gradiente texturizada.

teoria-del-color2-31
Combinar sombras con texturas hace más interesante a este sitio web.

Tintes

Un tinte se forma cuando se le agrega blanco a un matiz, aclarándolo. Tintes muy claros son llamados pasteles, cualquier matiz puro con blanco agregado es un tinte.

Los tintes suelen ser usados para crear diseños femeninos o ligeros. Tintes pasteles son usados especialmente para los diseños femeninos. Ademas funcionan bien en diseños vintage y son populares en páginas dirigidas a padres de bebés.

Ejemplos

teoria-del-color2-32
Este sitio tiene una variedad de tintes verdes en el fondo y en sus otros elementos.

teoria-del-color2-33

El tinte azul en este sitio le da un aspecto sofisticado y suave.

teoria-del-color2-34

Los tintes azules son populares para el cielo y motivos naturales.

teoria-del-color2-35
Los tintes también son populares en diseños basados en colores de agua.

teoria-del-color2-36
Tintes combinados hacen una gradiente sofisticada.

Conclusión

No necesariamente tenes que recordar memoria todos los términos técnicos, sin embargo deberías familiarizarte con los conceptos. Aquí un pequeño resumen para refrescarte la memoria:

  • Matiz es el color (azul, verde, rojo, etc.).
  • Pureza es cuando un color no tiene nada de gris, negro o blanco.
  • Saturación se refiere a qué tan fuerte o débil es el color.(Alta saturación = color fuerte).
  • Valor es qué tan oscuro o claro es un color (valor alto = color claro).
  • Tonos son creados agregándole gris a un color, haciéndolo más opaco que el original
  • Sombras son creadas agregándole negro a un color, haciéndolo más opaco que el original.
  • Tintes son creados agregándole blanco a un color, haciéndolo más claro que el original.

Este artículo ha sido traducido y adaptado de Smashing Magazine. Si encuentras algún artículo interesante sobre diseño web, diseño gráfico, marketing, programación o redes sociales, y te gustaría que nuestro equipo lo traduzca, no dudes en hacérnoslo llegar a través de tu comentario.

The following two tabs change content below.
fiorisantamaria1@gmail.com'
Fiori es CEO de Staff Creativa, Agencia de Diseño Web y Marketing Online
fiorisantamaria1@gmail.com'

Latest posts by Fiori Santa Maria (see all)

Deja una respuesta