La luz está formada por ondas electromagnéticas. Cuando la luz llega a un cuerpo, éste absorbe algunas ondas y refleja otras. Las ondas reflejadas por el cuerpo son captadas por el ojo y enviadas al cerebro a través de señales nerviosas. El cerebro interpreta esas señales nerviosas como distintos colores según las longitudes de onda.

Los colores transmiten sensaciones y todos ellos están relacionados. A través de la rueda de colores o círculo cromático podemos ver dichas relaciones.

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

 

 

1.- Rueda de colores o círculo cromático

 

El círculo cromático o rueda de colores es una manera de representar los colores de manera ordenada y circular teniendo en cuenta su matiz o tono. En la rueda cromática podremos identificar los colores primarios y sus derivados.

Existen diferentes ruedas de color, pero nosostos nos vamos a centrar en la clásica.

 

Círculo cromático o rueda de colores

Rueda de colores o círculo cromático

 

 

1.1.- Colores Primarios

 

Los colores primarios son los colores: Rojo, amarillo y Azul.

Se denominan colores primarios porque no se puede obtener ninguno de ellos con la mezcla de otros colores. Por el contrario, con la mezcla de los colores primarios se puede obtener cualquier otro color.

Fíjate, si unes estos tres colores en la rueda de color con una línea, verás que se forma un triángulo rectángulo.

 

 

1.2.- Colores Secundarios

 

Los colores secundarios son: verde, violeta y naranja. Los colores secundarios se obtienen mezclando a partes iguales los colores primarios por parejas.

  • Mezclando rojo y amarillo se obtiene el naranja
  • Mezclando amarillo y azul se obtiene el verde
  • Mezclando el azul y rojo se obtiene el violeta o púrpura

 

Si te fijas en la rueda de colores, entre dos colores primarios se sitúa el color secundario generado al mezclar ambos colores primarios. Mira como al unir los 3 colores secundarios con una línea también se genera un triángulo equilátero.

 

¿Aún no conoces Divi? la mejor plantilla para crear una web con WordPress: Mega guía Divi

 

 

1.3.- Colores Terciarios

 

Los colores terciarios son los más abundantes en la naturaleza y son el resultado de la mezcla a partes iguales de un color primario con un color secundario adyacente.

 

colores terciarios sacados de combinar primarios y secundario

Colores Primarios, secundarios y terciarios

 

Existen por tanto 6 colores terciarios, ya que, cada color primario tiene 2 colores secundarios adyacentes. De esta manera los colores terciarios son:

  • Amarillo (primario) + Naranja (secundario) = Amarillo Naranja (terciario)
  • Amarillo (primario) + Verde (secundario) = Verde Amarillo (terciario)
  • Rojo (primario) + Naranja (secundario) = Rojo Naranja (terciario)
  • Rojo (primario) + Violeta (secundario) = Rojo Violeta (terciario)
  • Azul (primario) + Verde (secundario) = Azul Verde (terciario)
  • Azul (primario) + Violeta (secundario) = Azul Violeta (terciario)

 

 

1.4.- Colores Fríos y colores cálidos

 

Existe una forma de clasificar los colores en dos grandes grupos atendiendo a las sensaciones que provocan en las personas. Estos grupos son los colores fríos y colores cálidos.

Los colores cálidos: se sitúan entre el amarillo y el rojo violeta. Los colores cálidos son los colores del atardecer, la pasión y transmiten sensaciones de acercamiento, actividad, dinamismo, energía, poder, pasión, peligro, confianza, éxito, calidez, optimismo, entusiasmo, etc.

Los colores fríos: se sitúan entre el violeta y el verde amarillo. Los colores fríos son los colores del mar, el frío, el invierno y transmiten sensaciones de calma, serenidad, profesionalidad, paz, salud, naturaleza, medio ambiente, novedad, frescura, etc.

 

Colores frios y colores cálidos

 

 

1.5.- Características del color: Tono, en la luminosidad y la saturación.

 

Para entender mejor el siguiente apartado, vamos a ver ahora algunas definiciones relacionadas con el color.

 

*** Qué es el tono de un color: podríamos definir el tono de un color como la longitud de onda dominante de dicho color. Es decir, el estado puro de un color (sin mezclar con blanco o negro).

Los tonos son todos los colores que hemos visto en la rueda de color: colores primarios, secundarios y terciarios. Cuando nos desplazamos en la rueda cromática se produce un cambio de tono.

Dentro de un mismo tono existen una gran variedad de matices o tonalidades que se obtienen mezclando el tono con blanco o negro. Por ejemplo, el rosa es un matiz o del rojo que se obtiene mezclando el tono rojo con el blanco. Como después veremos, el rosa y el rojo son por tanto colores monocromáticos.

 

*** Qué es la luminosidad de un color: es el nivel de oscuridad o claridad de un color. Cuando mezclamos un tono con blanco le aportamos luminosidad. Cuando mezclamos un tono con negro, le quitamos luminosidad.

También debemos resaltar que cada tono tiene una luminosidad específica. Por ejemplo, el amarillo tiene una luminosidad más alta que el azul.

Podemos ver diferentes grados de luminosidad de un tono en los colores monocromáticos, que veremos en el siguiente apartado

 

¿Por qué está tan de moda crear un header transparente en la web? ¿cómo hacerlo con WordPress y Divi?: Header transparente en la web

 

*** Qué es la saturación de un color: la saturación de un color define la pureza o intensidad de un color. Se dice que los colores que pertenecen al círculo cromático tienen el máximo de saturación, ya que son tonos puros (sin blanco ni negro). Por el contrario, el mínimo de saturación de un color se corresponde con un color gris.

Para bajar la saturación de un color, podemos mezclarlo con blanco, negro, gris o su color complementario. Un color saturado es más vivo que un color poco saturado.

 

saturacion de un color

Ejemplo de grados de saturación de un color

 

 

1.6.- Colores complementarios, análogos y monocromáticos

 

Colores complementarios: En el círculo cromático o rueda de color, los colores complementarios son aquellos que se encuentran en posiciones opuestas. Es decir, el color complementario del amarillo sería el violeta, del rojo sería el verde, del azul sería el naranja, etc.

Un color complementario es aquel que produce un mayor contraste sobre otro color. Los colores complementarios se utilizan para llamar la atención o destacar algo.

 

Colores análogos o adyacentes: son los colores situados adyacentes en la rueda de color. Es decir, los colores situados en la proximidad o inmediación.

Algunas definiciones explican que los colores adyacentes o análogos son el grupo formado por un color y su adyacente a izquierda y derecha, sin tener en cuenta los colores intermedios. Es decir, que, si tengo como base el color rojo, pues los tres colores análogos o adyacentes serían: rojo, naranja y violeta

 

Colores monocromáticos: los colores monocromáticos son todos los matices de un mismo tono. Estos matices se obtienen variando el color blanco, negro y brillo.

Dicho de otra forma, son las tonalidades que se derivan de un único tono base. Estas tonalidades se obtienen añadiendo blanco (tonalidades claras) y negro (tonalidades oscuras)

 

colores monocromáticos

Ejemplo colores monocromáticos

 

 

 

2.- Modelos de color RGB, CMY y CMYK

 

Para estandarizar el uso de los colores en sistemas digitales y de impresión, se hace necesario poder definir numéricamente los colores. Los modelos de color son sistemas matemáticos de representación de los colores. De esta manera, es posible definir cada color a través de vectores con 3 o 4 componentes.

Existen diferentes modelos de color, usándose unos u otros dependiendo de cómo se vaya a utilizar el color.

 

Tipos y diferentes diseños de header de una página web: Diseños header

 

 

2.1.- Modelo de color RGB – Colores primarios aditivos (Sistema RGB)

 

El sistema RGB utiliza una rueda de color diferente a la rueda de color clásica, que hemos visto en apartados anteriores. En el sistema RGB los colores primarios son el RedGreenBlue (rojo, verde y azul), y a partir de estos colores se generan todos los demás colores. Lo que se conoce como sistema aditivo de colores o colores primarios aditivos.

El color blanco se obtiene con la mezcla de los 3 colores aditivos o primarios en iguales proporciones. En este sistema, el negro es considerado como la ausencia total de color.

El sistema RGB es utilizado por sistemas electrónicos como monitores, televisiones, tablets, móviles, etc. El sistema RGB es el que utilizaremos en diseño web.

 

 

2.1.1.- Representación de colores RGB

 

La representación de los colores con el sistema RGB se hace a través de 3 valores, que corresponden con la proporción en la mezcla de cada uno de los tres colores aditivos.

Es decir, establecermos una cantidad de Rojo (R), verde (G) y azul (B). Según la manera en que indiquemos la cantidad de cada color primario o aditivo utilizaremos una forma u otra de representación:

 

i.- RGB Decimal: en esta forma de representación denominada RGB decimal, la cantidad de cada uno de los colores primarios o aditivos se expresa con un valor que va desde el 0 al 255

De esta manera, un ejemplo de color en este sistema de representación podría ser el: RGB (0,102,153). La proporción de rojo en este color sería de 0, 102 de verde y 153 de azul.

 

ii.- RGB Porcentajes: en este caso las proporciones de cada color aditivo se expresan a través de un valor porcentual que va desde el 0% al 100%.

Por ejemplo, el mismo color comentado antes RGB (0,102,153), en este sistema de representación sería el RGB (0%,40%60%)

 

iii.- RGB Hexadecimal o HTML: lo verás en muchos sitios como HEX (de hexadecimal). En este sistema la proporción de cada color aditivo se expresa de manera hexadecimal. Es el sistema HEX de representación RGB es el más utilizado en informática y diseño web, ya que es el sistema utilizado en HTML

Un sistema Hexadecimal usa 16 valores, en vez de los diez del sistema decimal tradicional. Estos 16 valores son: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

Los valores de cada uno de los colores aditivos van desde el 00 al FF. De esta manera el color negro, es el #000000 y el blanco #FFFFFF

El color de ejemplo comentado anteriormente RGB (0,102,153), en el sistema HEX de representación sería el #006699. Donde la proporción de cada de uno de los colores aditivos en el sistema hexadecimal sería de: rojo 00, de verde 66 y de azul 99

 

2.1.2.- Colores Seguros o Colores Web

 

Los colores seguros o colores web son un subconjunto de colores, que cuando surgieron los primeros monitores, nos garantizaban que se verían igual en cualquier monitor.

Esto era debido a las limitaciones de los primeros monitores en cuanto a la representación de colores. Hoy en día los colores seguros ya no tienen tanta importancia debido a las capacidades actuales de representación de monitores y resto de sistemas electrónicos como tablets o móviles.

 

 

2.2.- Modelo de color CMY & CMYK – Colores primarios sustractivos o pigmentos

 

Este sistema se basa en la luz reflejada por los pigmentos aplicados a las superficies. El modelo CMY está compuesto por los colores (Cian, Magenta y Amarillo CMY). El color negro se forma con la mezcla del resto de colores y el blanco es la ausencia de cualquier color. Este modelo se utiliza en la mayoría de sistemas de impresión (impresoras). Aunque realmente se utiliza el modelo CMYK

 

MODELO CMYK

En la práctica, en el modelo CMY al obtener el color negro con la mezcla de cian, magenta y amarillo, éste no es lo bastante intenso, por lo que en este modelo se añade el pigmento negro que es representado por la letra K (black –negro) definiéndose así el modelo CMYK.

Los colores se expresan en porcentaje de tinta. Por ejemplo: CMYK(98%,92%,0%,0%)

 

 

Compártelo ya!!