Tipos de colores

Existen muchos tipos de colores que podemos crear según los criterios por los que queramos clasificarlos. En este artículo vamos a examinar las principales categorías de color según la teoría del color y otras clasificaciones populares y útiles en diseño UI.

Tipos de colores que vamos a ver aquí:

• Colores por orden de mezcla
• Colores Primarios
• Colores Secundarios
• Colores Terciarios
• Colores por temperatura
• Colores cálidos
• Colores fríos
• Colores activos vs colores pasivos
• Colores activos
• Colores pasivos
• Colores por familias
• Colores joya
• Colores pastel
• Colores tierra
• Colores neutros
• Colores neón
• Colores por luminosidad
• Colores claros
• Colores oscuros
• Colores pálidos
• Colores apagados

Tipos de colores por orden de mezcla

Una manera de clasificar los tipos de colores puede ser por el orden de mezcla de los colores que se refiere al orden de formación de la rueda cromática. Como vimos, éste se puede complementar en 3 fases y por ello los colores pueden ser:

Colores Primarios

Los colores originales o primitivos son aquellos que no pueden obtenerse de mezclar otros colores, sino que son imprescindibles para que salgan esos colores.

Colores Secundarios

Los colores secundarios son los resultantes de la mezcla equilibrada de 2 primarios. Es decir, la mezcla al 50%, o lo que es lo mismo, de la misma cantidad de cada uno de esos primarios.

Colores Terciarios

Los colores terciarios son los resultantes de la mezcla entre un primario y un secundario que esté a su lado.

Anteriormente vimos que no existe un orden de creación estricto o canónico, sino que el orden depende del modo y espectro de color que elijamos. Por consiguiente tan correcto es decir que los colores primarios son Rojo, Verde y Azul si pensamos en colores luz como Cián, Magenta y Amarillo si pensamos en pigmentos. De todos modos, la selección de colores primarios siempre queda determinada en función de preferencias subjetivas, así como de factores prácticos como el coste, la estabilidad, la disponibilidad, etc.

Para ver una muestra completa de colores primarios, secundarios y terciarios pondremos los 2 modos de color principales como ejemplo. Así pues:

Modo RGB

Primarios: Rojo, Verde, Azul

Secundarios: Amarillo, Cian, Magenta

Terciarios: Naranja, Verde Lima, Turquesa, Azul Celeste, Violeta, Fucsia

Modo CMY

Primarios: Cian, Magenta, Amarillo

Secundarios: Azul, Rojo, Verde

Terciarios: Naranja, Verde Lima, Turquesa, Azul Celeste, Violeta, Fucsia

Modo RYB

Primario: Rojo, Amarillo, Azul

Secundarios: Naranja, Verde, Morado

Terciarios: Bermellón, Ambar, Verde Lima, Turquesa, Violeta, Magenta

Tipos de colores por temperatura

La temperatura de color es la sensación de frío o calor que el color nos hace sentir. Es un efecto que la psicología del color hace en nosotros y que permite juntarlos en el círculo cromático.

La temperatura de un color se determina por su longitud de onda en el espectro de luz visible. Los colores con longitudes de onda más largas, son físicamente más fríos pero psicológicamente más cálidos. Por el contrario, los colores con longitudes de onda más cortas, tienen una temperatura física más alta pero se perciben como fríos.

Las personas sin problemas de visión somos capaces de percibir esta temperatura aunque no seamos capaces de medirla. Sin embargo, la temperatura puede ser subjetiva. Aunque en términos generales la teoría del color sea compartida por la gran mayoría, puede variar según la persona. Así pues, para algunas personas colores no tan cálidos pueden llegar a ser los más cálidos y para otros, los colores no tan fríos podrían llegar a considerarse cálidos.

Veamos pues cuáles son los tipos de colores cálidos y los fríos:

Colores cálidos

Los colores cálidos son los que asociamos a fuentes de calor y momentos calurosos. Por ello los colores cálidos son los tonos rojos, naranjas, y verdes que no estén cerca del azul.

Colores fríos

Los colores fríos, por el contrario son los que asociamos a fuentes de frío o momentos de bajas temperaturas. Por eso, los cianes, azules, morados y fucsias se consideran colores fríos.

¿Quieres saber más sobre diseño UI?

¡Descubre los Secretos del Diseño UX/UI! 🎨

Sigue a AprenderUXUI en LinkedIn para contenido casi casi diario sobre diseño UX / UI

¡Sígueme en LinkedIn ya! ➡

Colores activos vs colores pasivos

Otra clasificación para los tipos de colores más dependiente de los efectos de la psicología del color es la que nos permite diferenciar entre colores activos y pasivos. En este caso los criterios que marcan si un color es activo o pasivo es la mezcla entre intensidad (saturación) y temperatura.

Colores activos

Los colores activos se corresponden con los colores vibrantes, es decir con mayor saturación y con los colores cálidos. Son por tanto un grupo menor que los colores pasivos ya que colores que por temperatura deberían ser activos, por saturación son pasivos.

En cuanto a las funciones de estos colores podemos destacar las siguiente:

• Llamar la atención. Los colores activos tienen mucha fuerza debido a su intensidad. Esto hace que no pasen desapercibidos y por eso en diseño UI se utilizan para destacar elementos y situaciones importantes y resaltar llamadas a la acción.
  
• Motivar e incitar a actuar. La fuerza y energía de los colores activos no solo llama la atención, sino que nos da vitalidad y nos tienta a acercarnos a ellos, a descubrirlos e interactuar con ellos. Por eso, normalmente estos colores se utilizan en botones de comprar o llamar independientemente de los colores de la marca.
  
• Crear un ambiente alegre. Los colores activos, suelen utilizarse para crear un ambiente alegre y divertido. Por esto este tipo de colores predominan en la mayoría de interfaces gráficas de productos infantiles como por ejemplo libros o apps para leer. También en todo tipo de juegos que quieran reflejar mundos de alegría. Por eso, especialmente en juegos casuales de móvil.
  
• Dar personalidad dinámica. Muchos productos orientados a un público jóven y de personalidad dinámica van a utilizar este tipo de colores. Un buen ejemplo de esto puede ser la marca Glovo donde predomina el amarillo chillón y conecta muy bien con su target de persona adulta jóven con una vida muy ajetreada y poco tiempo para cocinar.

Colores pasivos

Los pasivos son colores de tonos fríos y / o poca saturación. Esto es colores apagados. Por tanto, al contrario que los activos, este es un grupo bastante grande ya que incluye versiones desaturadas de los colores cálidos. Entre las funciones de estos colores destacan:

• Relajar y calmar. Estos colores fomentan un ambiente tranquilo y nos apaciguan. Consiguen desactivarnos y por eso este tipo de color es muy común en apps de bienestar y productos cosméticos que quieren conectar con esa parte del bienestar y paz mental. Algunos ejemplos de esto son apps de yoga y webs de psicología.
  
• Fomentar la concentración. La falta de potencia de estos colores hace que no perdamos el enfoque, que no nos distraigamos. Por esta razón, estos colores son muy útiles para utilizar como fondos o superficies sobre las que tener textos u otros elementos que puedan requerir concentración.
  
• Dar seriedad. Este tipo de colores transmiten profesionalidad y seriedad. Son colores sobrios que transmiten rigor, respeto y austeridad. Por eso es común ver este tipo de colores en webs de medios de comunicación “serios”.
  
• Crear un ambiente hospitalario. Hospitalario en ambos sentidos tanto de buen recibimiento como médico. Estos colores nada estridentes invitan a permanecer en la web o app. También porque transmiten esa seriedad y calma antes citadas, son colores muy vinculados al entorno médico.
  
• Transmitir lujo. Los colores oro y plata suelen implementarse de forma desaturada y ligera. También suelen ir acompañados de colores cercanos al negro y al morado. Éste último, un color tradicionalmente vinculado a la realeza. Por eso, este tipo de colores son ideales para transmitir esa idea de majestuosidad y exclusividad.

Tipos de colores por familias

La clasificación de colores por familias es una manera de organizar los diferentes tipos de colores muy común en sectores como el interiorismo, la pintura o la imprenta. No sé bien de donde surge este tipo de clasficiación pero la saco de este video de DesignerUP y me parece bastante útil para usarla de cara a pensar en paletas de color completas para los diseños de interfaces.

Por lo que nos cuentan, el criterio que permite reunir diferentes colores en cada familia es una combinación de intensidad (saturación) y el brillo en un modo de color HSB. Se ve más claro por grupos:

Colores joya

Estos colores son tonos con gran saturación como el azul zafiro, el rojo rubí, el morado amatista, el amarillo citrino y el verde esmeralda. Estos colores son majestuosos, profundos y transmiten una sensación de lujo.

Para pertenecer a este grupo podríamos pedir que tengan un valor de saturación comprendido entre el 73 y el 83 y un valor de brillo que vaya del 56 al 76.

Colores pastel

Los colores pastel son colores claros y poco saturados. Ejemplo de ello son el rosa, el salmón, el malva, el azul celeste o el verde menta. Estos colores pertenecen al grupo de colores pasivos y se sienten verdaderamente relajantes.

El rango de saturación ideal para los tonos pastel es entre 14 y 21, y el de brillo entre 89 y 96.

Colores tierra

Los colores tierra son colores de los paisajes naturales No solo colores marrones sino también tonos verdes o incluso azulados que pueden acompañar a muchos paisajes. Están influidos por los tonos de los árboles, los bosques, los mares y el cielo, y son apagados y planos para emular los colores naturales. Ejemplo de esto tenemos el ocre, el ámbar, el verde oliva, el gris carbón y por supuesto el marrón siena.

Para encontrar estos colores buscaremos en la horquilla de saturación entre 36 y 46 y en la de brillo entre 36 y 77.

Colores neutros

Los colores neutros son colores con poca saturación muy cercanos al gris. Tienen la cualidad de ser atemporales y complementan genial con el resto de familias ya que los equilirban. Además, estos colores no fallan para transmitir sobriedad, seriedad y elegancia. Ejemplo de colores neutros son toda la escala de grises desde el blanco hasta el negro, los colores crema y algunos colores tierra que no se alejen demasiado del gris como el beige.

Como la propiedad fundamental para pertenecer a este grupo es tener poca fuerza de color, el rango de saturación será entre el 0 y el 15. Por su parte, la escala de brillo no es importante, pero si tuviéramos que pensar en colores neutros seguramente lo haríamos pensando en valores entre el 70 y el 90.

Colores neón

Los colores neón son colores de estilo fluorescente como resultado de la fotoluminiscencia. La característica principal de estos colores es tener la cualidad del color al máximo posible. Esto significa que el tono esté en su punto álgido de reconocimiento. Teniendo tanto la saturación en niveles máximos y el brillo en niveles muy altos. Gracias a eso estos colores proyectan mucha fuerza y energía.

La gama ideal de saturación y brillo para crear paletas de colores de tonos fluorescentes es una saturación superior a 80 y un brillo entorno al 90.

Tipos de colores por luminosidad

Otra diferencia que nos puede servir para establecer tipos de colores es la diferencia de luminosidad en los colores. Esta diferencia se debe a la cantidad de luz que reflejan o absorben y que permite distinguir entre colores claros y colores oscuros. Por supuesto todo color es susceptible de ser más claro o más oscuro según la cantidad de luz que le llegue, pero en términos generales somos capaces de distinguir entre colores claros y oscuros por su color más representativo, el que aparece en la rueda de color.

Colores claros

Los colores claros reflejan más luz y por lo tanto parecen más luminosos y brillantes y se corresponde con los colores que se sitúan alrededor del amarillo en la rueda cromática. Esto es desde el naranja hasta el verde. Estos colores tienen la propiedad de parecer más alegres.

Colores oscuros

Los colores oscuros absorben más luz y por lo tanto parecen más oscuros y sólidos. Estos se sitúan alrededor del azul en el círculo de color por lo que recoge tonos desde el azul verdoso al rojo. Como propiedad tienen el parecer más solemnes y serios.

Independientemente de la distribución en el círculo cromático podemos sacar dos composiciones según la cantidad de luz o oscuridad que apliquemos a cualquier color

Colores pálidos

Los colores pálidos son aquellos a los que se les añade blanco. En inglés se diría que se les añade tint. De esta forma quedan desaturados y se pueden concebir como colores pastel.

Colores apagados

Los colores apagados son aquellos a los que se les añade negro. En inglés decimos que les añadimos shade. Por ello, según el color pueden quedar desaturados o mucho más saturados. Tienen el riesgo de que el tono se pierda como sucede con el amarillo, que si lo oscurecemos tenemos marrón por más brillo que le queramos dar.