Si recordáis ya en enero, uno de mis objetivos para 2013 era aprender más sobre el color y compartir algo de lo aprendido con vosotros. Ya he hablado antes de que siento que mis habilidades trabajando con el color son escasas y dije que en algún momento de este año me haría con unos cuantos libros sobre el color con la esperanza de cambiar eso.
Un cumpleaños, un hermano algo generoso, y un servicio de calidad de Amazon más tarde, y un surtido de libros (incluyendo algunos específicamente sobre el color) están aquí esperando a ser leídos. Gracias David.
He terminado de leer uno de los libros sobre el color, Design Elements: Color Fundamentals, y he pensado que debería empezar a compartirlo. Quiero empezar con cómo describimos los colores en parte porque es el principio y en parte porque me ha llevado a tener algo de claridad en mi forma de entender el color.
Cómo describimos el color
Hay 3 formas primarias de describir un color y ya que el libro lo ha añadido, añadiré también una cuarta forma de describir el color.
- Matiz – otra palabra para el color
- Saturación (croma) – la intensidad o pureza de un matiz
- Luminosidad (valor) – el grado relativo de negro o blanco mezclado con un determinado matiz
- Temperatura – la calidez o frialdad percibida de un color
Cavemos un poco más en cada una.
Los tonos son colores y el tono que vemos depende de la longitud de onda de la luz que se refleja o produce. Dudo que tenga que decirte lo que es un color y como color y matiz son sinónimos deberías saber también lo que es un matiz. Una cosa que te recordaré es que todos percibimos el color de forma diferente. El tono que tú ves puede no ser el mismo que veo yo.
La saturación se refiere a lo puro o intenso que es un determinado tono. El 100% de saturación significa que no hay adición de gris al tono. El color es completamente puro. En el otro extremo, un tono con 0% de saturación aparece como un gris medio. Cuanto más saturado (más cerca del 100%) esté un color, más vivo o brillante aparecerá. Los colores desaturados, por el contrario, aparecen más apagados.
La saturación de un tono también depende en cierta medida de los colores con los que se encuentre. Un tono saturado al 50% colocado junto a un tono saturado al 25% parecerá más vivo que si el mismo tono se coloca junto a un tono saturado al 75%.
La luminosidad mide el grado relativo de negro o blanco que se ha mezclado con un tono determinado. La adición de blanco aclara el color (crea matices) y la adición de negro lo oscurece (crea matices). El efecto de la luminosidad o el valor es relativo a otros valores de la composición. Puede hacer que un color parezca más claro colocándolo junto a un color más oscuro.
Cuanto mayor sea la diferencia de valor entre los elementos, mayor será el contraste entre ellos. Por ello, la luminosidad es una buena forma de mostrar el contraste e indicar la jerarquía entre los elementos. Unos 7 pasos de luminosidad es la máxima variación que el ojo humano puede discernir. Más allá de eso se hace difícil distinguir las diferencias.
La temperatura es la calidez o frialdad percibida de un color. Los colores cálidos son el rojo, el naranja y el amarillo, mientras que los colores fríos son el verde, el azul y el violeta. En algún punto del espectro verde y violeta la temperatura cambia entre cálido y frío.
La forma en que el ojo reconoce la temperatura del color puede cambiar en función de la fuente de luz. Por ejemplo, la temperatura real de un monitor de ordenador puede afectar a la temperatura de color percibida.
Los colores más cálidos tienden a avanzar hacia el primer plano de una composición mientras que los colores más fríos retroceden hacia el fondo. Al igual que la saturación y la luminosidad, la temperatura puede ser relativa. Coloque un color cálido frente a otro más cálido y el color inicial parecerá más frío que si se colocara frente a un color frío.
Armonía del color
Al trabajar con el color nuestro objetivo es elegir una paleta de combinaciones de colores agradables (excepto en aquellas ocasiones en las que una combinación desagradable complementa mejor el mensaje). Intentamos conseguir algún tipo de armonía cromática.
La armonía cromática puede ser subjetiva. Lo que funciona para tu ojo puede no funcionar para el mío. Los principios de la teoría del color pretenden reducir la subjetividad ofreciendo directrices que nos ayuden a encontrar combinaciones y agrupaciones de colores que tengan más probabilidades de funcionar bien.
Por ejemplo, uno de los principales principios sostiene que el ojo siempre busca el equilibrio y el balance en el color, lo que le lleva a llegar a combinaciones neutras, como cuando un tono se combina con su opuesto o complemento. Es una de las razones por las que a menudo vemos imágenes posteriores de un color diferente (pero con la misma saturación y luminosidad) cuando miramos un color durante mucho tiempo.
La teoría del color no siempre conduce a resultados predecibles. A veces, la teoría y la práctica no encajan del todo, lo que significa que tenemos que desarrollar nuestros ojos para el color y experimentar con diferentes combinaciones de tono, saturación y luminosidad.
La desconexión entre la teoría y la práctica del color
Como dije antes, algo me hizo clic al leer Color Fundamentals. Describimos el color en términos de tono, saturación y luminosidad (HSL), sin embargo, normalmente establecemos los valores de color en la web utilizando valores hexadecimales y, en menor medida, valores RGB. ¿No tendría más sentido trabajar con el sistema que mejor describe el color?
Nota: HSL no es lo mismo que HSB (tono, saturación, luminosidad) o HSV (tono, saturación, valor) que se encuentran en la mayoría de las herramientas de color.
Hex y RGB son en realidad dos versiones de la misma cosa. Cada uno proporciona 256 valores posibles para la cantidad de rojo, verde o azul en un color determinado. HSL funciona de manera diferente. No hay manera fácil de echar un vistazo a algo como rgb(63, 69, 146) o su equivalente hexadecimal #3f4592 y saber fácilmente que es 40% saturado o hsl(236, 40, 41).
Si quieres ver las matemáticas involucradas en hacer la conversión echa un vistazo a cualquiera o a todos los enlaces de abajo
- Algoritmos de color
- Conversión de color RGB a HSL
- Conversión de color HSL a RGB
¿Por qué? ¿Por qué hay una desconexión en cómo intentamos entender el color y cómo intentamos usarlo? En todo caso, HSL es el sistema más intuitivo, ya que realmente describe los colores que vemos y se ajusta a la teoría del color.
Me doy cuenta de que las habilidades de color vienen de desarrollar un ojo crítico para los colores y hacer preguntas acerca de por qué algo funciona o no funciona. Y se trata de responder a esas preguntas mientras observas los colores que te rodean.
Simplemente parece que sería más fácil si tanto la teoría como la práctica hablaran el mismo idioma. Ahora que he llegado a esta conclusión, he decidido comprometerme a utilizar los valores HSL tanto como sea posible en mi código. El escollo es IE8 y posteriores, que no aceptan hsl() o rgb(). Necesitan valores hexadecimales. Pero no pasa nada, ya que SASS puede hacer la conversión. Puedes usar hsl() en SASS y hacer que la salida html sea un valor hexadecimal.
Para seguir con mi compromiso he empezado a construir una simple herramienta de color para ayudarme a aprender y estudiar. No es algo que quieras usar en su estado actual para elegir una paleta de colores, pero te permite jugar con los valores de tono, saturación y luminosidad para ver cómo cada uno afecta a un color en particular y a los colores que lo rodean. Compartiré la herramienta más adelante en la semana.
Desde hace tiempo sospecho que las relaciones matemáticas entre los colores podrían ofrecer una guía para trabajar con ellos y a menudo he buscado esas relaciones en los valores hexadecimales de los colores. Mi esperanza de usar más hsl() y jugar con mi sencilla herramienta de color es que me ayudarán a conectar la teoría con los colores que uso en el diseño un poco mejor de lo que están conectados para mí ahora.
Tenga en cuenta esta desconexión en cómo aprendemos y describimos el color y cómo lo usamos. La realización me ha dado una mayor comprensión de cómo estudiar mejor el color y es por eso que quería empezar esta conversación con los fundamentos de cómo describimos el color. Tendré más posts sobre el color próximamente, comenzando a finales de la semana cuando hable de la sencilla herramienta que he creado para ayudarme.
Descarga una muestra gratuita de mi libro, Design Fundamentals.