Teoría del Color para Diseñadores, Parte 2. Entendiendo los Conceptos y Terminología

in

Traducido y 'resumido' de SmashingMagazine

Si vas a usar acertadamente los colores en tus diseños, necesitas saber algunos conceptos del color y su teminología. Un conocimiento profundo de los conceptos de croma, valor y saturación es clave para crear tus propios esquemas de colores impresionantes.

Matiz

El matiz es uno de los terminos más básicos del color y basicamente indica el color de un objeto. Cuando decimos 'azul, 'verde' o 'rojo', estamos hablando sobre el el matiz. Los matices que usas en tus diseños transmiten mensajes importantes a los visitantes de tu pagina web.

Ejemplos

Chapolito in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Usando un monton de matices junto puede añadir un look juvenil y jugueton al diseño, como lo han hecho en el header y en otras partes de la pagina web.

Estilorama in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

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

Croma

También llamado croma, se refiere a la pureza del calor. Un matiz con alta saturación no tiene negro, ni blanco ni gris. Añadirlos le reduce la saturación. Puede ser pensado como el brillo de un color en comparación del blanco.

En diseño, evita usar matices que tienen una saturación similar. Opta por matices con saturaciones que son iguales o un poco diferentes entre si.

Ejemplos

Moviestills in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

El cian tiene una alta saturación así que se destaca entre el negro y el blanco.

Philippdoms in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Combinar saturaciones altas y bajas del mismo matiz puede dar un diseño elegante y sofisticado.

Fruehjahr in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Colores con saturaciones altas es mejor usarlas con mederación, asi como aquí.

Saturación

Se refiere a como un matiz aparece sobre un condicion de luz particular. Piensa en saturación en terminos de débil vs fuerte o pálido vs matices puros.

En diseño, los colores con niveles de saturación iguales haces diseños más cohesivos. Como el croma, los colores con similar pero no con saturaciones iguales pueden tener un efecto discordante en tus visitantes.

Ejemplos

Sifrvault in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Los niveles de saturacion de los diferentes matices son similares, añadiendo una sensación de unidad a todo el diseño.

Disfrutasanjuan in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Matices con niveles de saturacion bajas no son necesariamente más encendidas

Craftsale in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Este es un excelente ejemplo de como usar un matiz de alta saturacion contra un fonde de baja saturación puede hacer el primero destacar.

Brillo

También puede llamarse Luminosidad. Se refiere a que tan claro u oscuro es un color. Los colores claros tiene un brillo más alto. Por ejemplo, el anaranjado tiene un brillo más alto que el el azul marino o el morado oscuro. El negro tiene el brillo más bajo que cualquier matiz y el blanco el más alto.

Cuando aplicas brillo a tus diseños, escoge colores con diferentes brilllos, especialmente los de alto croma. Altos contrastes del brillo generalmente resulta un diseño estéticamente agradable.

Creativespark in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

El alto brillo del amarillo destaca en contra del bajo brillo del negro y el gris

Copimaj in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Combinando colores con brillos similares hacen un fondo más vivo.

Tonos

Son creados cuando el gris es añadido a un matiz. Tonos son en general más apagados o tiene un look más suave que los matices puros.
Son más faciles de usar en los diseños. Tonos con más gris pueden llevar a una sensación vintage a los sitios web. Dependiendo de los matices, pueden añadir un look elegante y sofisticado.

Ejemplos

Lakesideheritage in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Hace que este sitio se ve sofisticado añadiendole algunos elementos vintage y antiguos

Mmuller in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Los tonos son intensificados añadiendole gris.

Redvelvetart in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Los tonos de esta pagina le dan una sensación vintage y de hecho a mano.

Sombras

Una sombra es creado cuando negro es añadido al matiz, haciendolo más oscuro. A veces es usado incorrectamente al describir tono o tinte, pero sombra solo se aplica cuando los matices se hacen más oscuro al añadir negro.
En diseño, las sombras más oscuras son usualmente usadas en lugar del negro y puede servir como neutral. Al combinar sombras con tintes es mejor no añadir mucho negro y un look muy pesado.

Ejemplos

Stuffandnonsense in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Combinando textura con sombras

Tintes

Un tinte es formado cuando se agrega blanco a un matiz, iluminandolo. Muchos tintes claros a veces son llamados pasteles pero ningun matiz puro con blanco es un tinte. (?)

Los tintes son usualmente usados para crear diseños femeninos o iluminados. Los tintes pasteles son especialmente usados en diseños femeninos. También pueden ser usados en diseños vintages o para bebes.

Ejemplos

Duboutdesyeux in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

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

Smallwhitebear in Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Populares en diseños basados en acuarelas

Conclusión

Matiz es color (azul, verde, rojo, etc)
Croma es la pureza del color (un croma alto no tiene añadido negro, blanco o gris)
Saturación se refere a que tan fuerte o débil es un color (siendo fuerte alta saturación)
Brillo se refiere a que tan claro u oscuro es un color (claro siendo un brillo alto)
Tono son creados al añadir gris a un color, haciendolo más apagado que el original
Sombras son creados al añadir negro a un color, haciendolo más oscuro que es original.
Tinte son creados cuando le añades blanco a un color, haciendolo más claro que el original.

Traducido y 'resumido' de SmashingMagazine


Teoría del Color para Diseñadores, Parte 1. El Significado de los colores

in

traducido y 'resumido' de SmashingMagazine

El color en el diseño es muy subjetivo. Lo que produce una reacción en una persona puede producir una reacción muy diferente en otra. Algunas veces por preferencias personales otras por razones culturales. Algo tan simple como cambiar el matiz exacto o la saturación de un color puede producir un sentimiento completamente diferente. En una cultura algo puede ser feliz y en otra puede ser triste.

Colores Cálidos


Los colores cálidos incluyen al rojo, anaranjado y amarillo, y las variaciones de estos tres colores.
El Rojo y el Amarillo son colores primarios, con el anaranjado en el medio. Usa colores cálidos en tus diseños para reflejar pasión, alegría, entusiasmo y energía.

Rojo (color primario)


El rojo es un color muy cálido. Esta asociado con el fuego, violencia y la guerra. También se puede asociar con el amor y la pasión. El rojo puede tener efectos físicos en las personas, subirles la presión, el ritmo respiratorio y se ha comprobado que estimula el metabolismo.

Puede asociarse con la ira, pero también con la importancia (alfombra roja en los premios). Puede indicar peligro (la luz para parar y las señales de advertencia).

En China, el rojo es el color de la prosperidad y felicidad. También se puede usar para atraer la buena suerte. En el este, el rojo es usado por las novias en el día de su boda. En Sudafrica, es para el luto. También se asocia con el comunismo. En Africa se asocia con la campaña contra el VIH.

En el diseño, el rojo puede ser un color. Puede causar un efecto abrumador si se usa mucho en un diseño, especialmente en su forma más pura. Es un color genial si en un diseño se quiere expresar pasión o poder. El rojo puede ser muy versátil, con versiones mas brillantes es más energético y más oscuras es más poderoso y elegante.

Ejemplos

Darkcrimson in Color Theory for Designers, Part 1: The Meaning of Color

Los tonos oscuros del rojo le da una sensación de elegancia y poder a este sitio.

Bureau347 in Color Theory for Designers, Part 1: The Meaning of Color

El rojo brillante le daa este sitio una sensación de energía y movimiento.

Crowebdesignets in Color Theory for Designers, Part 1: The Meaning of Color

Este rojo oscuro, porque está combinado con elementos grunge, hace recordar al rojo sangre.

1mcreative in Color Theory for Designers, Part 1: The Meaning of Color

El rojo oscuro, combinado con el blanco y el gris, da una impresión elegante y profesional.

Anaranjado (secundario)

Orange in Color Theory for Designers, Part 1: The Meaning of Color

Este es un color vibrante y energético. En sus versiones apagadas, puede ser asociado con la tierra y con el otoño. Por su asociación con el cambio de estaciones puede representar el cambio y el movimiento en general.

Así por la fruta, puede ser asociado con la salud y la vitalidad. En los diseños, el anaranjado lidera la atención pero sin ser tan abrumador como el rojo. Se considera más amigable y atrayente.

Ejemplos

Curiousromain in Color Theory for Designers, Part 1: The Meaning of Color

La caja anaranjada atrae más la atención aún con los elementos rojos.

Alamofire in Color Theory for Designers, Part 1: The Meaning of Color

También funciona en su representación más obvia para el fuego.

Amarillo (color primario)

Yellow in Color Theory for Designers, Part 1: The Meaning of Color

Es considerado como el más brillante y energizante de los colores cálidos. Es asociado con la felicidad y la luz del sol. Pero también con el engaño y la cobardía (esa no me la sabía, ah). Con la esperanza. Con el peligro, pero no tanto como el rojo.

En tus diseño, el amarillo brillante puede llevar a una sensación de alegría y jovialidad. Amarillos más suaves son comunmente usados como un color neutral para el sexo de un bebe y niños jovenes. Amarillos claros dan sentimiendo de calma más que los amarillso brillantes. Los amarillos oscuros y de matices dorados se pueden ver como antiguos y usarse en diseño donde se quiere dar una sensación de permanencia.

Ejemplos

Foodtease in Color Theory for Designers, Part 1: The Meaning of Color

El header y los gráficos de amarillo brillante da una sensación de energía y positividad.

Artvisiona in Color Theory for Designers, Part 1: The Meaning of Color

La combinación del header amarillo claro y las ilustraciones dan una sensación jovial.

Cabomba in Color Theory for Designers, Part 1: The Meaning of Color

Los gráficos amarillos brillantes llaman la atención a las partes más importantes del sitio.

Pasikeitimai in Color Theory for Designers, Part 1: The Meaning of Color

La flor amarilla brillante recuerda a los visitantes al verano en este sitio, y cominado con el fondo amarillo oscuro, da un sentimiendo hogareño.

Colores Fríos

Coolcolors in Color Theory for Designers, Part 1: The Meaning of Color

Incluyen a el verde, azul y morado y son más templado que los colores cálidos. Son los colores de la noche, el agua, la naruraleza, y usualmente son de la calma y de alguna forma, la reserva.
Usa los colores fríos en tus diseño para dar una sensación de calma y profesionalismo.

Verde (color secundario)

Green in Color Theory for Designers, Part 1: The Meaning of Color

Tiene los mismos atributos calmantes del azul pero también con la energía del amarillo. En diseño, el verde tiene un efecto de balance y armonía, es muy estable. Es apropiado en diseños relacionados con la salud, estabilidad, renovación y naturaleza.
Los verdes más brillantes son mas vibrantes y energizantes, mientras que los verdes olivas representan más a la naturaleza. Los verdes oscuros son los más estables y representativos de la riqueza.

Ejemplos

Rubberdesign in Color Theory for Designers, Part 1: The Meaning of Color

Los verdes apagados dan una sensación de naturaleza

Iavion in Color Theory for Designers, Part 1: The Meaning of Color

Los verdes más brillantes y retro dan a este sitio una sensación de energía y frescura.

Azul (Color Primario)

Blue in Color Theory for Designers, Part 1: The Meaning of Color


El significado del azul es ampliamente afectado dependiendo del tono y saturación. En diseño, el azul que escojas tendrá un enorme impacto sobre como son percibidos tus diseños. Los azules claros son relajantes y calmantes. Los azules brillantes son frescos y energizantes. Los azules oscuros son excelentes para los sitios de corporaciones o diseños donde la fuerza y confiabilidad son importantes.

Ejemplos

Sman96 in Color Theory for Designers, Part 1: The Meaning of Color

El azul oscuro le da una sensación de confiabilidad pero el azul brillante evita que se vea serio.

Aandesigners in Color Theory for Designers, Part 1: The Meaning of Color

El azul claro le da un look más juvenil que es acentuado por los títulos rojizos.

Morado (color secundario)

Purple in Color Theory for Designers, Part 1: The Meaning of Color

Es asociado con la realeza, creatividad e imaginacion. En diseño, el morado oscuro da una sensacion de riqueza y lujo. El morado claro son más suaves y son asociados con la primavera y el romance.

Ejemplos

Ianjamescox in Color Theory for Designers, Part 1: The Meaning of Color

El morado oscuro del fondo da una sensación de creatividad.

Alice in Color Theory for Designers, Part 1: The Meaning of Color

El morado oscuro dan a este sitio una sensación de lujo y refinamiento.

Neutrales

Neutralcolors in Color Theory for Designers, Part 1: The Meaning of Color

Son comunmente usados como fondo en el diseño. Es común combinarlos con colores más brillantes. Pero también pueden ser usados solos, y pueden crear diseños muy sofisticados. Los significados y impresiones de los colores neutrales son más afectados por los colores que los rodean que los colores frios y cálidos.

Negro

Black in Color Theory for Designers, Part 1: The Meaning of Color

Es el más fuerte de los colores neutrales. Es comunmente usado en diseños más atrevidos así como en los elegantes. Puede ser conservador o moderno, tradicional o no convencional, dependiendo de los colores con los que se combine. En diseño, el negro es usualmente usado para tipografia y otras partes funcionales por su neutralidad. Puede hacer más facil dar una sensación de sofisticación y misterio en un diseño.

Ejemplos

Djalexander in Color Theory for Designers, Part 1: The Meaning of Color

Los enfásis de negro combinado con los colores brillantes y el marrón oscuro del fondo le dan un look atrevido a todo el diseño.

Reducetuhuella in Color Theory for Designers, Part 1: The Meaning of Color

El negro combinado con los azules glaciales le dan una sensación de frialdad.

Theswishlife in Color Theory for Designers, Part 1: The Meaning of Color

Las partes de negros son las que le dan sofisticación a este sitio.

Blanco

White in Color Theory for Designers, Part 1: The Meaning of Color
Asociado con la purezla, limpieza y la virtud, la industria de la salud, bondad y angeles.
En diseño, es considerado como un fondo neutral porque les da a los otros colores más voz. Puede ayudar a transmitir limpieza y sencillez, sin embargo, es popular en los diseños minimalistas. El blanco en los diseños puedes mostrar el verano o el invierno, dependiendo dependiendo de los colores y motivos que lo rodean.

Ejemplos

Chamainc in Color Theory for Designers, Part 1: The Meaning of Color

El blanco es popular en los diseños minimalistas y provee un genial contraste con la tipografía negra.

Gris

Gray in Color Theory for Designers, Part 1: The Meaning of Color

El gris claro puede ser usado en lugar del blanco y el gris oscuro en lugar del negro.Generalmente es conservador y formal pero también puede ser moderno. Es compun en los diseños de corporaciones donde la formalidad y el profesionalismo son clave. Puede ser un color sofisticado. Los grises pueros son tonos del negro, aunque otros grises pueden tener tonos del azul y marrón mezclados. En diseño, los fondos y tipografia grises son muy comunes.

Nosotros in Color Theory for Designers, Part 1: The Meaning of Color

El gris frio le da al sitio un toque moderno

Aside in Color Theory for Designers, Part 1: The Meaning of Color

El fondo gris oscuro y la tipografía gris claro le da un look moderno.

Moderno

Brown in Color Theory for Designers, Part 1: The Meaning of Color

Es asociado con la tierra, la madera y la piedra. Es un color completamente natural y un neutral cálido. Asociado con la confianza, firmeza, terrenalidad, también puede considerarse aburrido.

En diseño, el marrón es usualmente usado como color de fondo. También es usado como textura de madero y a veces en texturas de piedra. Ayuda a dar una sensación de calidez y salubridad en los diseños. Sus formas más oscuras son usadas en reemplazo del negro, ya sea en fondos o la tipografía.

Ejemplos

Ridemomentum in Color Theory for Designers, Part 1: The Meaning of Color

El marrón-grisaceo da una sensación de responsalibilidad.

Leliathomas in Color Theory for Designers, Part 1: The Meaning of Color

El marrón oscuro es usado en el fondo da un aspecto terroso, los colores más brillantes en el diseño llegan a destacar.

Beige y Canela

Tan in Color Theory for Designers, Part 1: The Meaning of Color

Beige es un color unico en la gama de colores, puede ser tomado como un color frio o cálido dependiendo de los colores que lo rodeen. Tiene la cálidez del marrón y la frialdad del blanco, y, como el marrón, puede ser visto como aburrido. Es conservador y usualmente reservado para los fondo.

Beige es generealmete usado en fondos y comúnmente en fondos con textura de papel. Tomará las características de los colores a su alrededor, lo que significa que tiene poco efecto en sí mismo en la impresión final de un diseño da cuando se utiliza con otros colores.

Ejemplos

Hellocarsonified in Color Theory for Designers, Part 1: The Meaning of Color

El color canela claro del fondo se siente fresco y joven por los colores brillantes alrededor.

Tarabrooch in Color Theory for Designers, Part 1: The Meaning of Color

Es popular en las texturas de papel

Crema y Marfil

Ivory in Color Theory for Designers, Part 1: The Meaning of Color

Son colores sofisticados, con algo de la calidez del marrón y un montón de la frialdad del blanco. En diseño, el marfil da una sensación de elegancia y calma al sitio. Cuando es combinado con colores tierra como el melocotón o el marrón, puede tomar un look terroso. También puede ser usado para iluminar colores oscuros, sin el contraste rígido al usar blanco.

Ejemplos

Artinmycoffee in Color Theory for Designers, Part 1: The Meaning of Color

El fondo crema grisaceo es cálido gracias a las partes marrón-anaranjadas.

Karijobe in Color Theory for Designers, Part 1: The Meaning of Color

El fondo crema reafirma el tema antiguo que tiene los gráficos en el diseño.

En resumen...

Rojo: pasión, amor, ira
Anaranjado: energía, alegria, vitalidad
Amarillo: alegría, esperanza, engaño
Verde: nuevos comienzos, abundacia, naturaleza
Azul: calma, responsabilidad, tristeza
Morado: creatividad, realeza, riquezas
Negro: misterio, elegancia, maldad
Gris: cambio de animo, conservador, formal
Blanco: pureza, limpieza, virtud
Marrón: naturaleza, salubridad, confiabilidad
Canela o Beige: conservador, piedad, aburrido
Crema o marfíl: calma, elegancia, pureza

traducido y 'resumido' de SmashingMagazine