Teoría del color para diseñadores web

por Natalia Ventre el 20/05/2013 ・ podés leerlo en 9 minutos ・

Si te dedicás al diseño web y/o al desarrollo front-end seguramente alguna vez usaste un selector de color, visitaste sitios como COLOURlovers o Kuler, o usaste una función de color de un pre-procesador de CSS, ¿pero sabés qué es un color complementario o cuál es la diferencia entre RGB y HSL?

Primero que nada, ¿qué es el color? El color es una percepción, o una interpretación visual del espectro electromagnético (luz) captado por el ojo humano. Como te habrás dado cuenta, en la oscuridad no vemos los colores.

En las artes visuales y el diseño, la teoría del color estudia la combinación de los colores y el efecto de dichas combinaciones.

Modelo de color RGB

Un modelo de color es un modelo matemático abstracto que describe cómo se representan los colores en números. RGB es el modelo usado en pantallas (televisores, monitores, etc.). Se lo llama aditivo porque la suma de luces rojas, verdes y azules genera los distintos colores.

Un espacio de color es un modelo de color más una punto blanco y una curva de corrección de gama. Los espacios de color más comunes son sRGB y Adobe RGB. Esto explica las diferencias entre los colores que ves en una aplicación de diseño que generalmente está usando un perfil de gestión del color y el navegador. Para diseño web, generalmente se recomienda que deshabilites la gestión de color en las aplicaciones de diseño. Los optimizadores de imágenes como ImageOptim eliminan los perfiles de color de las imágenes para disminuir el tamaño.

Los colores primarios1 son colores perfectos imaginarios que no coinciden necesariamente con los productos reales disponibles en el mercado. Los colores efectivamente creados por un dispositivo se llaman gama. Para aumentar la gama, se puede agregar uno o más colores extras2. Los primarios del modelo RGB se relacionan, pero no coinciden exactamente, con los conos sensitivos al color del ojo humano.

El modelo RGB tiene 2 notaciones:

  • Valores RGB (rojo, verde, azul): cada color se representa por 3 valores separados por comas en un rango del 0 al 255. Ej.: .esmeralda {color: rgb(0, 155, 119)}.
  • Valores HSL3 (matiz, saturación, luminosidad): Es una representación cilíndrica, donde la dimensión angular parte del rojo a 0º, pasa por el verde a 120º y el azul a 240º. El radio y la altura representan la saturación (de gris a todo color) y luminosidad (de negro a blanco).

En CSS3 para RGB y HSL podés definir un cuarto valor correspondiente al canal alfa que va desde el 0 (trasparente) al 1 (opaco), por ej. Ej.: .esmeralda-semi-transparente {color: hsla(166, 100%, 30%, .5)}.

En HTML, CSS, SVG, etc. también podés definir colores usando la notación hexadecimal que consiste en 3 pares de 2 dígitos para expresar las intensidades de los colores primarios RGB. Se usan los números del 1 al 9 y 6 letras A a la F. En la notación hexadecimal abreviada, #FF0 es equivalente a #FFFF00. Ej.: .esmeralda {color: #009B77}.

Por último, en CSS también podés definir los colores por su nombre4 y algunas palabras clave “especiales”: transparent (transparente) y currentColor (equivalente a color: inherint). Ej.: body {background-color: white}

RGB vs HSL

Con HSL y sobre todo con las funciones de color de Sass es fácil crear una paleta de colores a partir de un color base:

  • adjust-hue: cambia el matiz para generar un análogo, complementario, etc.
  • saturate y desaturate: ajusta la saturación. Por ej. una paleta “retro” es poco saturada.
  • darken y lighten: ajusta la luminosidad para una paleta monocromática.

Si a partir de un color, necesitás otro color más oscuro, para usar por ej. en el degradé en un botón, en RGB no es claro qué valores tenés que modificar, en HSL tenés que simplemente disminuir el tercer valor.

Armonías de color

Los esquemas de color tradicionales o armonías del color son combinaciones equilibradas5 que se basan en la posición de los colores en el círculo cromático. El círculo cromático se construye a partir de los colores primarios que generan colores secundarios y así sucesivamente.

Círculo cromático
Construcción del círculo cromático

Monocromático

La paleta de color monocromática consiste en un color y sus mezclas con blanco o negro. Es la más sencilla de crear, en el sentido de que es difícil crear una paleta monocromática “fea”. Es tranquila y elegante, pero como no hay contraste, no te sirve si necesitás destacar un elemento.

Esquema de color monocromático

Esquema de color monocromático en Sass:

$color-base: hsl(166, 100%, 30%);

.muestra{
	.color-4{
		background-color: lighten($color-base, 10%);
	}
	.color-0{
		background-color: $color-base;
	}
	@for $i from 1 to 3{
		.color-#{$i}{
			background-color: darken($color-base, $i * 10%);
		}
	}
}

La paleta de color análoga son tres colores adyacentes en un círculo cromático con 12 divisiones, preferentemento todos cálidos o todos fríos. Es una combinación que se suele encontrar en la naturaleza.

Esquema de color análogo

Esquema de color análogo en Sass:

$color-base: hsl(166, 100%, 30%);

.muestra{
	.color-0{
		background-color: $color-base;
	}
	.color-1{
		background-color: adjust-hue($color-base, 30);
	}
	.color-2{
		background-color: adjust-hue($color-base, -30);
	}
}

Complementario

Los complementarios están en lados opuestos del círculo cromático. Es la combinación más contrastante. Los colores complementarios (puros) cuando se ponen uno junto al otro producen un efecto óptico desagradable (vibran) y por lo tanto necesitan una barrera (blanco o negro) o un color intermedio que funcione como pasaje, o también podés desaturar al color frío.

Esquema de color complementario

Esquema de color complementario en Sass:

$color-base: hsl(166, 100%, 30%);

.muestra{
	.color-0{
		background-color: $color-base;
	}
	.color-1{
		background-color: complement($color-base);
	}
}

Complementario dividido es una variante, donde sustituís un complementario por sus 2 análogos, mantiene el contraste visual del esquema complementario, pero con menos tensión. Después de la paleta monocromática, esta es la otra opción amigable para principiantes, con la cual no te podés equivocar.

Esquema de color complementario dividido

Esquema de color complementario dividido en Sass:

$color-base: hsl(166, 100%, 30%);

.muestra{
	.color-0{
		background-color: $color-base;
	}
	.color-1{
		background-color: adjust-hue($color-base, 180 + 30);
	}
	.color-2{
		background-color: adjust-hue($color-base, 180 - 30);
	}
}

La tétrada o doble complementario es una combinación compuesta por 2 pares de complementarios. Te ofrece variedad, pero es más difícil balancear en qué proporción usás cada color para que quede bien.

Tríada

Como su nombre lo indica, la tríada consiste en 3 colores equidistantes en el círculo cromático. Tiene contraste visual y equilibrio.

Esquema de color triaxial

Esquema de color triaxial en Sass:

$color-base: hsl(166, 100%, 30%);

.muestra{
	.color-0{
		background-color: $color-base;
	}
	.color-1{
		background-color: adjust-hue($color-base, 120);
	}
	.color-2{
		background-color: adjust-hue($color-base, -120);
	}
}

Cálidos y fríos

Los colores cálidos son los colores del fuego (del rojo al amarillo) y los colores fríos son los colores del agua y del hielo (del violeta al verde). El naranja siempre es cálido y el azul siempre es frío, pero los colores que están en el límite no son absolutos, por ej. un amarillo puede funcionar como frío.

Tienen connotaciones psicológicas, como todos los colores, pero además tienen la particularidad de que los colores cálidos avanzan y los fríos, retroceden y por lo tanto la yuxtaposición de ambos genera profundidad.

Recursos

Hay muchos libros sobre color, pero elegí los de Pantone, porque son la autoridad en color, además del sistema para identificar e igualar color, se dedican al estudio del color y a cómo nos afecta física y emocionalmente.

Conclusiones

En diseño, como en otras áreas, antes de romper las reglas tenés que saber cuáles son. Con los pre-procesadores de CSS, como por ej. Sass, podés generar esquemas de colores sin necesidad de usar una aplicación especializada y sobre todo podés crear estilos re-utilizables, personalizables y desarrollar tu propio framework.


  1. Los colores primarios dependen del medio. En pintura (témpera, acrílico, óleo) son rojo, amarillo y azul, en tintas transparentes cyan, magenta y amarillo y en luz, rojo, verde y azul.

  2. Por ej.: en el modelo de color CMYK teóricamente C100 M100 Y100 sería negro, en la realidad es un marrón sucio y se agrega la tinta negra (o inclusive C100 K100) para crear un negro bien negro.

  3. Otros modelos son: HSV (matiz, saturación, valor), HSB (matiz, saturación, brillo) y HSI (matiz, saturación, intensidad). El matiz son las variantes que puede tener un color sin perder su nombre (¿es verde? ¿es azul?). Los otros conceptos (valor, luminosidad, tono, saturación, tinte, etc.) no tienen definiciones estandarizadas, se refieren a la pureza del color (¿es intenso? ¿es pálido?) y la luminosidad (¿es claro? ¿es oscuro?) o en otras palabras cuánto gris, blanco o negro tiene.

  4. Ver lista de CSS3 color keywords.

  5. Las armonías del color son un punto medio entre caótico y aburrido. Son visualmente interesante, pero tienen un orden.