La Web del Color

Alguna vez te has parado a pensar en cómo sería el mundo sin colores? Solo imaginarlo afecta el ánimo verdad? Un mundo triste, sin chispa y apagado.

 

 

Ésta es la magia que aporta el color nuestras vidas, es el tipo de cosa que tenemos y que generalmente no valoramos porque siempre está y simplemente dejamos de verlo.

Degradado de colores

Los colores son sensaciones y transmiten emociones, por eso cada uno de nosotros tiene su favorito y es muy probable que esté muy relacionado con nuestra personalidad.

Podríamos decir que somos seres coloridos!

 

 

También sabemos que son utilizados para sugerir conductas, reacciones o influir en nuestras decisiones.

Existen colores que nos dan calma, otros que nos transmiten confianza y otros que nos dan una ganas locas de comprar.

Así que vamos a hacer un recorrido por el fascinante mundo del color.

 

Índice del artículo
  1. Qué es el color?
    1. Las características del color y sus atributos
  2. Cuáles son los colores primarios, secundarios y terciarios
    1. Colores primarios tradicionales
    2. Colores primarios en la luz o colores RGB
    3. Colores primarios en el pigmento
    4. Colores secundarios
    5. Colores terciarios
    6. Círculo cromático o rueda de colores primarios, secundarios y terciarios
    7. Contrastes de color
      1. Cuáles son los colores cálidos
      2. Cuáles son los colores fríos
      3. Qué son los colores complementarios?
      4. Qué son los colores complementarios adyacentes?
  3. Colores html o hex (hexadecimal)
    1. Qué es un color html?
    2. Generadores de paletas de color o color picker
  4. Cómo combinar colores?
    1. Colores que combinan con el rojo
    2. Colores que combinan con el azul
    3. Colores que combinan con el gris
    4. Colores que combinan con el verde
    5. Colores que combinan con el naranja
    6. Colores que combinan con el morado
    7. Colores que combinan con el marrón
  5. Cuál es el significado de los colores?
    1. Significado del color azul
    2. Significado del color rojo
    3. Significado del color amarillo
    4. Significado del color verde
    5. Significado del color morado
    6. Significado del color negro
    7. Significado del color naranja
    8. Significado del color blanco
    9. Significado del color marrón
    10. Significado del color rosa

 

Qué es el Color?

Es el efecto provocado por los rayos lumínicos que impactan nuestra visión y que están directamente relacionados con su longitud de onda, ósea, el color que vemos es el resultado de las ondas electromagnéticas que no son absorbidas por un cuerpo sólido.

 

 

Necesitamos una objeto, una fuente de luz y los ojos para percibir un color, dependiendo de las longitudes de onda que los objetos reflejan podemos ver un color u otro.

En resumen, un color es la respuesta fisiológica del ojo humano condicionado por la presencia de luz o de oscuridad.

Un color aporta muchísima información sobre las personas, objetos o marcas. Por este motivo nos identificamos más y mejor con unos que con otros.

Sabes cuánto tiempo tardamos en formarnos una primera impresión? Algunos estudios hablan de 30 segundos, otros 40 segundos y así hasta 90 segundos.

Sea lo que sea que tardemos, en cualquier caso es un tiempo muy reducido y para que este primer juicio sea positivo o negativo, generalmente influyen factores que de manera inconsciente el cerebro tiene en cuenta, como las sensaciones que nos producen las gamas cromáticas.

En definitiva, el color está en la luz y no en las cosas. Porque realmente los objetos no poseen color.

Y a pesar de que la luz es blanca, la capacidad de descomposición de sus ondas electromagnéticas a través de las cuales viaja, le permite generar siete colores que nos son muy familiares:

 

Te suenan? Son los 7 famosos colores del arco iris!

Las características del color o atributos

Existe un número considerable de colores que se organizan por familias, por suerte para nosotros.

Los atributos por los cuales podemos definir un color son:

  • Matiz
  • Saturación
  • Brillo

El matiz o tono tiene que ver directamente con la longitud de onda del color y se identifica con el nombre; amarillo, azul, rojo, etc.

La saturación es lo que hace que lo definamos como un color apagado o nítido. Sirve para establecer la pureza de un color, es decir, cuando cualquier color se presenta sin la adición de negro, blanco o un tercer color.

El brillo o luminosidad, está relacionado con la adición del color gris, blanco o negro a un color puro para reducir su intensidad.

Al agregar diferentes colores a un color puro obtenemos:

Gris + color puro = tono (nivel de intensidad bajo)

Blanco + color puro = tinte o color pastel

Negro + color puro = sombras

Hemos mencionado que hay infinidad de colores y que estos se clasifican por familias, pero siempre existe un origen de la familia del que surgen ramificaciones.

Cuáles son los colores primarios, secundarios y terciarios?

 

 

La clasificación del color se hace teniendo en cuenta diferentes factores como:

  1. Absorción o reflejo de determinadas longitudes de onda
  2. Formas de representación
  3. Incidencia que tienen sobre las emociones de las personas

La teoría del color ha variado constantemente, al punto que tenemos dos teorías, la tradicional y la moderna que defienden opiniones diversas en cuanto a cuáles son los colores primarios.

Teniendo en cuenta lo anterior, traemos los colores que cada teoría y clasificación considera como básicos.

Independientemente del modelo utilizado los más importantes coinciden en tres características:

  • Los colores primarios son 3.
  • Son colores básicos que no pueden conseguirse a través de mezclas de otros colores.
  • A través de la mezcla entre ellos se obtiene el siguiente nivel de colores.


Colores primarios tradicionales

Pertenecientes al Modelo RYB, ya en desuso y llamados también primitivos. Se consideran los precedentes del modelo CMY.

colores primarios-red-blue-yellow

De la combinación entre sí, obtenemos el verde, el naranja, el violeta.

En la imagen podemos ver los colores básicos de este modelo que son:

 Colores primarios en la luz o colores RGB

Conocidos también como colores primarios RGB por sus nombre en inglés (Red, Green, Blue).

colores primarios RGB red-green-blue

Son los colores:

Cada color está relacionado con el tipo de luz a la que son sensibles nuestros ojos a través de los conos.

Su mezcla en partes iguales da como resultado el color gris muy claro con tendencia al blanco.

La intensidad del rojo, el verde y el azul s emiden mediante una escala de valores que va del 0 hasta el 255.

Por ejemplo, el valor RGB del color rojo sría (255,0,0), observa que los valores se escriben entre paréntesis donde 255 corresponde al valor R, 0 al valor verde y el último 0 al valor azul.

 Colores primarios en el pigmento

O colores CMYK por sus siglas en inglés, Cyan, Magenta, Yellow y Key.

colores primarios CMYK cyan-magenta-yellow-negro

Al contrario de los RGB, la mezcla de los CMYK en partes idénticas da como resultado tonalidades grises oscuras que tienden al negro.

Colores secundarios

Comencemos entendiendo qué son los colores secundarios, estos colores son producto de la mezcla de los primarios y en la rueda de colores se encuentran siempre entre dos de ellos.

Igual que ocurre con los colores primarios, la respuesta a la pregunta: cuáles son los colores secundarios?  varía según el  modelo de color con el que trabajemos.

Tenemos entonces, 3 colores secundarios para el modelo RGB y tres colores secundarios para el modelo CMY.

Los colores secundarios del modelo RGB

colores secundarios RGB cyan-magenta-yellow

  • Cyan
  • Magenta
  • Amarillo

Los colores secundarios del modelo CMY

colores secundarios modelo CMY red-green-blue


Colores terciarios

Hay una tercera clasificación, son colores que resultan de la mezcla de un color primario y uno secundario adyacente dando como resultado un tercer color con matices.

Estos son colores con nombres compuestos, por ejemplo: verde azulado, amarillo rojizo, azul violáceo, etc.

 

Cuáles son los colores terciarios? 

Los terciarios son 6 y son los siguientes:

seis colores terciarios

  • Amarillo anaranjado
  • Rojo violáceo
  • Azul violáceo
  • Azul verdoso
  • Amarillento verdoso
  • Rojo anaranjado

 

Cómo se forman los colores entonces?

Podemos afirmar de manera rápida y sencilla que:

  1. Los colores primarios son los precursores a través de las diferentes  mezclas entre ellos, de los colores secundarios y terciarios.
  2. La mezcla de colores primarios, secundarios y terciarios con blanco o negro, generan variaciones de los mismos.

Círculo cromático o rueda de colores primarios, secundarios y terciarios

 

En el círculo cromático (disposición del espectro del color en forma circular) podemos ver claramente la relación entre sí, es una de las mejores herramientas para entender la teoría del color y a la vez permite crear un colorido armonioso cuando se divide simétricamente en dos partes.

círculo cromático de colores primarios, secundarios y terciarios

La rueda de color es una construcción de 12 colores basada en el círculo cromático, a partir de este Johannes Itten desarrolla dos esquemas de organización de los colores:

  1. la estrella del color
  2. la rueda del color

Contrastes de Color

Representa la diferencia en las particularidades de 2 o más colores que participan en una composición, por ejemplo el color de las paredes de un salón con el color de los textiles del mobiliario, influyendo en la percepción del espacio.

Existen 7 contrastes diferentes:

Saturación

Cuando se aproximan colores con una saturación del 100% obtenemos un contraste visual elevado. Entre más separados se encuentren dentro del círculo cromático la intensidad del contraste es mayor.

contrastes de colores: saturación

El contraste del color puro es menor si los colores contrastados se encuentran separados de los colores primarios.

En consecuencia, cuando contrastamos colores primarios el resultado es ruidoso y enérgico.

Así que si el objetivo es llamar la atención ya sabes, utiliza colores primarios muy saturados.

 

Luminosidad (contraste claro-oscuro)

contrastes de colores: luminosidad

A mayor luminosidad mayor contraste, este tipo de contraste nos habla del uso de dos colores con un tono diferente, uno oscuro y el otro claro.

 

Temperatura (contraste de color cálido y frío)

contrastes de colores: temperatura

Las distintas temperaturas, colores cálidos y fríos, de cada color usado hace que el contraste sea más marcado.

 

Posición en el círculo cromático (contraste de los complementarios)

contrastes de colores: posición en el círculo cromático

Dos colores totalmente antagónicos en el círculo cromático crean un contraste complementario.

Cuando ambos tienen un 100% de saturación el contraste es total.

 

Simultaneidad

Este tipo de contraste es un poco especial y diferente a los que hemos nombrado hasta ahora.

contrastes de colores: simultaneidad

Se trata de un contraste que se da por un proceso fisiológico. Si colocamos un color saturado sobre un fondo gris, automáticamente nuestra visión genera en el gris el complementario que hace falta.

En definitiva, la simultaneidad consiste en los aparentes cambios de tono e intensidad generados por los colores adyacentes.

 

Calidad  

El contraste por la calidad del color, se da cuando se yuxtaponen colores muy saturados o vivos a otros menos saturados o pagados.

contrastes de colores: calidad de colores

El contraste depende de la diferencia en la intensidad de los colores que interactúan.

 

Cantidad del color

El contraste por cantidad lo obtenemos al yuxtaponer dos colores en cantidades heterogéneas.

contrastes de colores: cantidad de color

Con este juego de proporciones obtenemos dos cosas:

  • Alterar  otros tipos de contrastes otorgándoles mayor intensidad
  • Efectos visuales

Cuáles son los colores cálidos?

También denominados activos, son aquellos que abarcan la gama de los amarillos, naranjas, marrones, dorados y rojos, y se encuentran en la parte de la rueda cromática que posee una longitud de onda larga.

Colores cálidos del círculo cromático

Cuando percibimos un color cálido nos evoca sensaciones de actividad, movimiento y urgencia.

La calidez estimula, motiva y domina.

Cuáles son los colores fríos?

Llamados también pasivos, está clasificación incluye la variación de los azules a los violetas, pasando por los verdes y compone la otra mitad del disco de color cuyas longitudes de onda son más cortas.

Colores fríos del círculo cromático

 

La percepción de un color frío nos produce un efecto relajante y sensación de tranquilidad, frescura y limpieza.

Qué son los colores complementarios? 

Una vez más recurrimos al círculo cromático para describir los complementarios, son aquellos que se sitúan antagónicos dentro del círculo.

Colores complementarios en el círculo cromático

 

Generalmente la combinación de dos colores complementarios es una buena apuesta, ya que como dice su clasificación se complementan entre sí y se enriquecen.

Son colores que encajan perfectamente y por lo tanto agradan cuando los vemos.

Que son los colores complementarios adyacentes? 

Llamados también triada o colores de contraste y se encuentran justo a los dos lados del color complementario.

Colores complementarios adyacentes en el círculo cromático

Ahora bien, viviendo en una era digital como en la que vivimos, adquiere relevancia el cómo su utiliza el color a nivel web.

Y para ello nos ocuparemos de los colores web o html, vamos allá.

Colores html o hex (hexadecimal)

Si no te mueves en el sector del diseño de páginas web o la publicidad, seguramente te sorprenderá saber que existe una clasificación del color que reúne 140 colores diferentes.

Para los diseñadores y una gran variedad de profesionales el usar la paleta de colores idónea, es una magnífica herramienta para construir la identidad de sus proyectos.

Los colores html se sirven del modelo RGB, utilizado para la composición de colores en pantallas de ordenador y televisores, para la expresión del color en digital.

Qué es un color html?

Sabemos que los colores del modelo RGB (siglas de Red, Green y Blue) son rojo, verde y azul y que  se describen por un conjunto de valores que oscilan entre 0 y 255.

Pues bien, los colores html expresan esos valores del modelo RGB en base 16, ósea, hexadecimal y se denominan también colores web.

 

Imagen colores RGB con valores html

 

Este sistema valora con los números del 0 al 9 y las letras de la A a la F con un valor numérico equivalente.

Para simplificarlo lo veremos a través de cada equivalencia:

0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9

A=10, B=11, C=12, D=13, E=14, F=15

Teniendo en cuenta que cada uno de los tres pares hexadecimales correspondientes a los tres colores primarios RGB (rojo, verde y azul) puede tomar 256 valores, existen 16.777.216 combinaciones distintas:

256 x 256 x 256 = 16.777.216

Son muchísimas combinaciones de colores verdad?

Para ver correctamente estos colores en una página web se utilizan solo 6 tonos de cada color primario RGB, reduciendo el número de estos a 216 son los que representan la paleta de colores seguros para páginas web.

En la tabla puedes ver cuáles son los códigos hexadecimales de colores?

Imagen tabla con todos los colores html o hexadecimales

 

Vemos que las posibilidades del color son infinitas en cuanto a mezclas se refiere.

De los 216 colores seguros o safe colors nos quedamos con 140 que son los usados en los lenguajes html y CSS para el diseño de páginas web.

La particularidad de los colores utilizados en diseño es que estos pueden ser utilizados por su nombre en ingles, su código hexadecimal o el código RGB.

Ya hemos visto los códigos hex y los códigos RGB, algunos ejemplos de nombres de colores en ingles son:

  1. Black
  2. Dark blue
  3. Dodger blue
  4. Dark cyan
  5. Olive drab
  6. Light sea green
  7. Deep sky blue
  8. Blue
  9. Medium Blue 
  10. Fucsia
  11. Cyan
  12. Aqua
  13. Yellow
  14. Magenta
  15. Purple

En la lista de colores webs hay algunas peculiaridades como la supuesta duplicidad de colores, un ejemplo claro de ellos la encontramos entre los colores fucsia y magenta o Aqua y Cyan, estos colores comparten el mismo código hex #00FFFF.

El color Aqua es un color azul verdoso, una variación del color cyan. El color web aqua es idéntico al color web cyan, uno de los tres colores secundarios del modelo de color RGB utilizado en las pantallas de ordenador y televisión.

En la rueda de color HSV, el aqua se encuentra exactamente a medio camino entre el azul y el verde. Sin embargo, aqua no es lo mismo que el cyan en el proceso de color sustractivo primario utilizado en la industria de la impresión.

Los nombre “aqua” y “cyan” se utilizan indistintamente en diseño web, para referirse al color secundario aditivo “cyan”. Ambos colores se hacen exactamente de la misma manera en una pantalla de ordenador, combinando la luz azul y verde a igual intensidad en una pantalla negra.

Aquí puedes ver una completa lista de nombres de colores en ingles y en  español con sus respectivos códigos y úsala como quieras!

Generadores de paletas de color online o color pickers

Existen herramientas que facilitan el trabajo en muchos sectores, son recursos que te permiten crear paletas de colores online o identificar los colores de una imagen online, a continuación encontrarás una lista con los generadores más utilizados:

  1. Kuler Adobe o CC Color Wheel
  2. Brand Colors Wheel
  3. COLOURlovers
  4. Color Schema Designer
  5. Color Hunter
  6. Colrd
  7. Oto255
  8. Color Blender
  9. Pictaculous
  10. HTML Color Codes
  11. Cohesive Colors
  12. Paletton
  13. Colourcode
  14. Color Hunt
  15. Colorhexa

Cómo combinar colores?

El color influye de lleno en nuestras emociones y sensaciones, vernos bien, triunfar con la presentación de un proyecto o conseguir un ambiente acogedor y agradable en casa, son aspectos que pasan siempre por usar una mezcla de colores acertada.

Puede parecer que la elección de la gama cromática sea subjetiva, y probablemente sea así, pero debemos tener en cuenta que también hay cuestiones objetivas que nos pondrán en el camino correcto para dar en el blanco con nuestra selección.

Decidir cuál es la mejor combinación de colores pasa por tener claro el objetivo que quieres conseguir, qué es lo que quieres transmitir?

Aunque mejor no perder de vista que para gusto los colores! 

Da igual si estás decidiendo tu look para un evento importante o eligiendo el color de pintura para las paredes de tu habitación, siempre encontrarás que hay tonos que se adoran y tonos que se odian.

La armonía cromática la podemos conseguir teniendo en cuenta aspectos que hemos nombrado antes:

 

Ejemplo de combinación de colores en la rueda de colores

Colores que combinan

Teniendo en cuenta las características de los colores complementarios, triadas, tétrada y analógicos y los diversos juegos de contrastes sobre los que hemos hablado anteriormente, os guiaremos para decidir la combinación ganadora para cada color.

Colores que combinan con el rojo

Los que mejor combinan son:

Colores que combinan con el azul

Los que mejor combinan son:

Colores que combinan con el gris

Los colores que armonizan son:

Colores que combinan con el verde

Puedes combinarlo con:

  • Marrón dorado
  • Naranja
  • Amarillo verdoso
  • Amarillo
  • Marrón
  • Gris
  • Crema
  • Negro
  • Blanco cremoso

Colores que combinan con el naranja 

El color naranja combina bien:

Colores que combinan con el morado

El morado pega a la perfección con:

  • Marrón oscuro
  • Amarillo pardo
  • Gris
  • Turquesa
  • Menta verde
  • Naranja claro

Colores que combinan con el marrón

Aunque es un color un poco complicado no es la excepción, puedes combinarlo con:

Puedes encontrar más combinaciones de colores en nuestro artículo sobre generadores de paletas de color.

Cuál es el significado de los colores?

Te has preguntado por qué te sientes de una forma muy concreta cuando entras en una estancia? O por qué el logotipo de las bebidas energéticas suele ser de color rojo o naranja?

En nuestra vida diaria nos vemos constantemente rodeados de las luces y sombras del círculo cromático y nuestras emociones responden a dichos estímulos.

Nos sentimos eufóricos, tranquilos, felices o irritados porque los colores existentes en nuestro entorno tienen una influencia directa sobre nuestro comportamiento y bienestar.

Igualmente nuestro color favorito acostumbra a estar muy relacionado con nuestra manera de ser. Por ejemplo, existe una relación estrecha entre una persona que tiene como color preferido el rojo con la vitalidad y la independencia.

El significado de los colores es la conclusión de la psicología del color, una ciencia que estudia cómo se percibe y cuál es la conducta ante un color determinado o la relación entre diferentes colores y cuáles son las emociones que resultan de esa interacción.

Para qué usamos el significado del color?

Son variadas las áreas donde este significado tiene mucha relevancia y se utiliza como una poderosa arma visual para comunicar, entre otras tenemos:

  • El arte
  • La comunicación gráfica
  • La cromoterapia
  • La decoración
  • La moda
  • La publicidad

Cada color; según el predominio del negro, el blanco o el gris y su nivel de intensidad; representa algo, vamos a ver los significados de colores en publicidad y decoración que  más interesan:

Significado del color azul

Armonía, autoridad, confianza, constancia, fidelidad, lealtad, libertad, progreso, seriedad, verdad.

Significado del color rojo

Amor, adrenalina, atracción, deseo, determinación, fortaleza, fuerza, impulsividad, pasión.

Significado del color amarillo

Brillantez, diversión, energía, espontaneidad, felicidad, resplandor, innovación.

Significado del color verde

Bondad, celos, crecimiento, equilibrio, envidia, esperanza, estabilidad, fertilidad, naturaleza, paz, salud, seguridad, buena suerte.

Significado del color morado

Ambición, ecléctico, lujo, místico, penitencia, poder, realeza, romántico, serenidad.

Significado del color negro

Oscuridad, elegancia, formalidad, maldad, noche, poder, silencio, sobriedad.

Significado del color naranja

Alegría, ánimo, apetito, calidez, creatividad, entusiasmo, éxito.

Significado del color blanco

Bondad, frescura, inocencia, limpieza, pureza, optimismo, simplicidad.

Significado del color marrón

Estabilidad, protección, seguridad.

Significado color rosa

Amistad, delicadeza, dulzura, exquisitez, gratitud, infancia.