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.
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.
- Qué es el color?
- Cuáles son los colores primarios, secundarios y terciarios
- Colores html o hex (hexadecimal)
- Cómo combinar colores?
- Cuál es el significado de los colores?
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:
- Absorción o reflejo de determinadas longitudes de onda
- Formas de representación
- 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:
Colores primarios tradicionales
Pertenecientes al Modelo RYB, ya en desuso y llamados también primitivos. Se consideran los precedentes del modelo CMY.
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).
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.
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
Los colores secundarios del modelo CMY
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:
Cómo se forman los colores entonces?
Podemos afirmar de manera rápida y sencilla que:
- Los colores primarios son los precursores a través de las diferentes mezclas entre ellos, de los colores secundarios y terciarios.
- 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.
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:
- la estrella del color
- 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.
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)
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)
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)
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.
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.
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.
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.
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.
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.
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.
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.
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?
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:
- Black
- Dark blue
- Dodger blue
- Dark cyan
- Olive drab
- Light sea green
- Deep sky blue
- Blue
- Medium Blue
- Fucsia
- Cyan
- Aqua
- Yellow
- Magenta
- 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:
- Kuler Adobe o CC Color Wheel
- Brand Colors Wheel
- COLOURlovers
- Color Schema Designer
- Color Hunter
- Colrd
- Oto255
- Color Blender
- Pictaculous
- HTML Color Codes
- Cohesive Colors
- Paletton
- Colourcode
- Color Hunt
- 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:
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:
Colores que combinan con el marrón
Aunque es un color un poco complicado no es la excepción, puedes combinarlo con:
- Amarillo
- Azul fuerte
- Beige
- Crema
- Rosa
- Verde
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.