Si quieres utilizar el color de manera efectiva en tus diseños, necesitarás conocer algunos conceptos de color y la terminología de la teoría del color. Conocimientos prácticos de conceptos como el fondo del croma, valor y saturación es la clave para crear tus propios e impresionantes esquemas de color. En la primera parte de nuestra serie cubrimos los significados de diferentes colores. Aquí, vamos a repasar los conceptos básicos de lo que afecta a un color determinado, como la adición de gris, blanco o negro al color puro, y su efecto en un diseño, con ejemplos, por supuesto.
Hue (Color)
Hue es el término más básico de color e indica el color de un objeto. Cuando decimos "azul", "verde" o "rojo", estamos hablando del color o Hue. Los colores que utilizas en tus diseños transmiten mensajes importantes a quienes los miran. Lee los artículos bajo la etiqueta Color para conocer los significados transmitidos por los principales colores.
Ejemplos
El color principal del fondo y algunas de las tipografías en el sitio web de la HappyTwitmas es de color rojo brillante.
Utilizando una gran cantidad de tonos puros juntos, puedes añadir un aspecto divertido y lúdico a un diseño, como se hace en la cabecera y en otras partes de este sitio web.
El rojo puro es un color muy popular en el diseño web.
Mix utiliza una serie de tonos puros en su encabezamiento y el logotipo.
El verde en su forma más pura es menos frecuente y así se destaca más que algunos otros colores.
Croma
Croma se refiere a la pureza de un color. Un color con alto croma no tiene negro, blanco o gris en el mismo. La adición de blanco, negro o gris, reduce su croma. Es similar a la saturación, pero no es lo mismo. El croma se puede considerar como el brillo de un color en comparación con los blancos.
En el diseño, debemos evitar el uso de colores que tienen un croma muy similar. En lugar de ello optar por colores con cromas que estén a pocos pasos unos de otros.
Ejemplos
El azul tiene un alto croma y así realmente se destaca del blanco y negro.
Otro sitio web con un azul de alto croma, aunque incluye algunos matices y tonos con cromas algo inferiores.
La combinación de alta y baja saturación en el mismo color puede lograr un diseño sofisticado y elegante.
Colores con croma muy altos son utilizados con moderación, como se hace aquí.
Las diferencias en croma puede hacer un degradado visualmente agradable.
Saturación
Saturación se refiere a cómo se ve un color bajo condiciones de iluminación particular. Ve la saturación en términos de colores fuertes vs débiles o pálido vs puro.
En el diseño, los colores con niveles de saturación similar hacen más coherentes los diseños. Al igual que con el croma, los colores con similar pero no idéntica saturación pueden tener un efecto irritante sobre quien los mira.
Ejemplos
Los niveles de saturación de muchos de los diferentes colores utilizados aquí son similares, agregando un sentido de unidad al diseño en general.
La combinación de colores con similares niveles de saturación silenciada crea un diseño suave, que se destaca por los efectos de acuarela.
Colores con menores niveles de saturación, no son necesariamente más ligero, como se muestra aquí.
Un excelente ejemplo de cómo el uso de un color con una alta saturación en un contexto de baja saturación puede hacer que destaque.
Otro ejemplo de cómo la saturación de los colores hacen que los colores secundarios de baja saturación destaquen.
Valor
Valor también podría ser llamada la "iluminación". Se refiere a la claridad u oscuridad de un color. Los colores iluminados tienen valores más altos. Por ejemplo, la naranja tiene un valor más alto que el azul marino o púrpura oscuro. El negro es el color con el valor más bajo, y el blanco, el más alto.
Valores con alto contraste generalmente resultan en más diseños estéticamente agradables.
Ejemplos
El alto valor del amarillo que se usa aquí realmente se destaca en el menor valor de negro y gris.
Este sitio combina tonos azules con dos valores diferentes. Debido a los diferentes valores tienen suficiente contraste, el aspecto general es visualmente atractivo.
La combinación de colores con valores similares dan el aspecto de un fondo energético y animado (que se ve reforzada por el diseño en sí).
El rojo aquí tiene un valor inferior a la de color azul claro, que en sí tiene un valor inferior a la blanca.
El ojo humano puede captar las diferencias de valor, incluso entre esos matices similares.
Tonos
Los Tonos se crean cuando se agrega gris a un color. Los Tonos son en general más apagados o más suave que el color de aspecto puro.
Los Tonos son a veces más fáciles de utilizar en los diseños. Los tonos con más gris pueden producir cierta sensación de antigüedad al diseño. Dependiendo del color, puede añadir también un toque de sofisticación o elegante.
Ejemplos
Los Tonos pueden dar un look sofisticado al tiempo que añaden algo de estilo antiguo.
Este sitio combina el azul en una gran variedad de tonos, sombras y tintes.
Los Tonos pueden ser intensificado mediante la adición de color gris alrededor de ellos, como se hace aquí.
Los tonos utilizados en la navegación y el diseño de fondo da una sensación de antigüedad hecha a mano.
Un gran ejemplo de cómo un tono puro puede realmente destacar sobre un fondo con tonos.
Algunos de los colores que podemos considerar como grises son en realidad tonos de otros colores. En este caso, el fondo es un tono de azul, pero con un montón de gris añadido.
Sombras
Una sombra se crea cuando el negro se añade a un tono, por lo que este se oscurece. La palabra es a menudo incorrectamente utilizada para describir el tono o la tonalidad, pero la sombra sólo se aplica a los tonos oscurecidos por la adición de negro.
En el diseño, los colores muy oscuros se utilizan a veces en lugar de negro y pueden servir como neutrales. La combinación de sombras con tintes es mejor evitarla pues da una imagen demasiado oscura y pesada.
Ejemplos
El sitio web de Jonathan Moore tiene una variedad de diferentes sombras de color púrpura en el fondo (y un par de tintes en otras partes).
El uso de diferentes sombras juntas funcionan bien, siempre y cuando el contraste suficiente entre ellos se mantenga.
Una eficaz combinación de sombras y matices, en particular en la cabecera.
Otro diseño de fondo que tiene sombras (y algunos tintes) en una textura degradada.
La combinación de sombras con texturas añade interés a este sitio web.
Matices o tintes
Un tinte se forma cuando se añade blanco un color, iluminándolo. Tintes muy ligeros a veces se llaman pasteles, pero cualquier color puro al que añadas blanco será un tinte.
Los tintes a menudo se utilizan para crear diseños femeninos o más ligeros. Los colores pastel se utilizan especialmente para hacer diseños más femeninos. También funcionan bien en los diseños de época y son populares en los sitios web dirigidos a los padres de bebés y niños pequeños.
Ejemplos
Sitio web de Caio Cardoso tiene una variedad de tintes verdes en el fondo y en otros elementos.
El tinte azul en el sitio web de Fernando Silanes crea un aspecto suave y sofisticada.
Los tintes azules son populares para el cielo y los motivos naturales.
Los tintes también son populares en los diseños basados en acuarela.
Los tintes combinados juntos logran sofisticados degradados.
Conclusión
Aunque no necesariamente tienes que recordar todos estos términos técnicos, debes estar familiarizado con los conceptos, sobre todo si quieres dominar la parte 3 de esta serie (en la que creamos nuestros propios esquemas de color). A tal fin, he aquí una hoja de trucos para refrescar su memoria:
- Hue es el color (azul, verde, rojo, etc.)
- Croma es la pureza de un color (croma alto no tiene ningún añadido negro, blanco o gris).
- Saturación se refiere a qué tan fuerte o débil es un color (alta saturación es fuerte).
- El valor se refiere a la claridad u oscuridad de un color es (claro, con un alto valor).
- Los tonos se crean mediante la adición de color gris a un color, por lo que es más aburrido que el original.
- Las sombras se crean añadiendo negro a un color, por lo que es más oscuro que el original.
- Los tintes se crean añadiendo blanco a un color, por lo que es más claro que el original.
0 comentarios:
Publicar un comentario
*** Gracias por dejar tu comentario *** Si deseas que publiquemos alguna información adicional deja tu mensaje ***