Bienvenido, invitado. Puedes registrarte o iniciar sesión.
EN LOS FOROS...
  • Ir a los foros
  • IMPORTANTE: leer antes de publicar.: Este foro está dedicado a tratar todos aquellos temas en los que se mueve dinero en internet y esto comprende tiendas online, sistemas de pago, marketing, además de propuestas...
  • Cambiados los permisos de los foros: Hola. Tras numerosos mensajes de SPAM hemos decidido restringir la publicación de nuevos topics a usuarios registrados. Hasta ahora para hacer esto no hacía falta estar regist...
  • IMPORTANTE: leer antes de publicar.: Este foro está dedicado a tratar temas relacionados con empresas de hosting. Aquí se puede hablar sobre estos servicios, plantear problemas, quejas, recomendar empresas... Per...
  • Ir a los foros
NOTICIAS
Songify llega a Android tras su éxito en iOS: Hablar de Songify es hacerlo sobre una de las aplicaciones gratuitas para iOS más populares. Ocho millones de usuarios avalan el éxito de este programa. Ahora Songify está di...
La Unión Europea propone a Google solucionar las acusaciones de monopolio de sus competidores: Joaquín Almunia, miembro de la Comisión de la Competición de la Unión Europea, ha ofrecido a Google terminar con la investigación que están llevando a cabo fruto de las queja...
Google confirma la adquisición de Motorola Mobility: Muchos meses han pasado desde que mi compañero Guillermo Julián nos informara de la compra por parte de Google de la división de móviles de Motorola. Tras salvar numerosos es...
¿Ha hecho bien Microsoft desechando Aero Glass? La pregunta de la semana: Hace unos días, mi compañero Manu Mateos hablaba de uno de los mayores cambios en la interfaz de Windows 8. Para la nueva versión de su sistema operativo Microsoft ha decidid...
Panic lanza Coda 2 junto con Coda: Ya hace mucho tiempo de eso, pero todavía recuerdo cuando los chicos de Panic lanzaron la primera versión del editor HTML y CSS Coda. Con el tiempo han habido actualizaciones...
Google y Microsoft, su ansia por ser sociales y lo que deberían hacer para conseguirlo: No podemos negar que Google lleva varios años intentando ser social. Google Buzz, Google Wave… y ahora su mayor intento con una red social por todo lo alto: Google+. Y ...
"May feelings", la red social que reza para cambiar el mundo. Una iniciativa española: De la mano de tres españoles, Santiago Requejo, Joaquín de los Ríos y Bosco Ybarra, ha nacido el 1 de mayo May Feelings, una red social cuyo lema es rezar para cambiar el mun...
Treinta días sin Flash: una herramienta cada vez más prescindible: Hace un mes me vino a la cabeza una idea cuando me saltó por enésima vez el aviso de actualizar Flash. ¿Y si lo desinstalo? Total, no lo uso demasiado, me molesta más que otr...
GitHub ya tiene cliente para Windows: GitHub ya tiene cliente para Windows. GitHub es uno de los portales de referencia para el alojamiento de proyectos, que utiliza el control de versiones Git diseñado por Linus...
Tres servicios enfocados a desvirtualizar a los amigos y contactos con las cenas sociales: Las redes sociales nos ayudan a permanecer en contacto con los amigos sin importar distancias, dónde nos encontramos o cuánto tiempo hace que no vemos a una persona. La cerca...
USAMOS...

XHTML

CSS

Powered by PHP

Powered by MySQL

RSS 0.91

RSS 1.0 / RDF

RSS 2.0

ATOM

Selección de colores armónicos
Desarrollo y diseño

Publicado (o actualizado) el 03/08/06 a las 17:17:55

 

Teoría del Color

"El color no existe" Con esta idea tan llamativa comienzan la mayoría de los artículos y manuales que he leído sobre teoría del color. Ávido por conocer los secretos de la utilización del color y su aplicación practica, me he encontrado con todo tipo de estudios. Bastoncillos, conos, percepción, ondas, luces, pigmentos son conceptos que plagan estos fárragos y que casi ningún autor se atreve a pasar por alto.

De vez en cuando encuentro algún comentario acerca de los significados emotivos, psicológicos, simbólicos o semánticos, con los que uno puede estar más o menos de acuerdo dependiendo de su cultura, educación y experiencia. No a todos nos parece que el verde sea "calmado" y el amarillo sea "extrovertido". Aun así esta bastante asentada la identificación de los colores con determinadas sensaciones. Esto me ayuda a la hora de impregnar significado a una comunicación grafica.

También he hallado numerosas representaciones graficas de las diferentes clasificaciones de color: lineal, triangular, hexagonal, circular, cuadrado, cónico, cúbico y hasta esférico. Todos ellos son intentos de plasmar bi o tri dimensionalmente las variedades del espectro cromático basándose en determinadas variables. Todos ellos son igual de validos si se saben utilizar.

A pesar de todo hay buenos estudios que son amenos y dirigidos a una utilización practica como por ejemplo la teoría del color de newsartesvisuales.com.

Sin embargo en muy pocas ocasiones he encontrado recomendaciones para el uso del color con el ordenador. Solo alguna nota accesoria al respecto de los significados de los diferentes modelos de color: HLS, HSB, RGB, CMYK, LAB... Ni siquiera los vendedores de software indican como sacar un rendimiento optimo de sus selectores de color.

En fin, que después de haberlo intentado mucho me encuentro prácticamente en el punto de partida: ¿cómo elijo los colores? ¿qué modelo utilizo?

 

Los modelos de color perceptivos y reproductivos

En 1905 Alber H. Münsell formulo un sistema de ordenación del color basado en la percepción humana. Percibimos el color a través de ondas luminosas que poseen varios atributos, ósea características distintivas de una sensación, percepción o modo de apariencia. Münsell identifico tres atributos:

Matiz, o Tono, que es el color en si mismo, es la longitud de la onda luminosa. Un tono es el verde, otro tono es el cian y otro tono es el violeta. Es el nombre técnico de lo que coloquialmente conocemos por "color". La espectro visible abarca entre el rojo y el violeta, es decir entre los 380 y 780 nanómetros de longitud de onda..

Saturación, o Croma, que es la mezcla del los colores entre si. Es decir la interferencia de las ondas con otras de diferentes frecuencias. Una saturación alta supone que apreciamos el color en toda su pureza, limpio de interferencias. Una menor saturación indica que el color tiene mezcla con otros colores con los que interfiere. Cuando las ondas de todos los colores se perciben con igual valor el matiz no se diferencia y se visualiza exclusivamente el color blanco.

Brillo, o Valor, se refiere a la intensidad lumínica. Es la frecuencia de la onda luminosa. Una luminosidad alta hace que el color se aprecie más vibrante e intenso y una bajada en la frecuencia produce que color se apague hacia el negro.

Un color viene definido por tanto por sus valores de tono, brillo y saturación. Cualquier color se puede identificar con unos valores de estas tres variables. El negro se obtiene cuando no hay brillo (ausencia de luz). Los grises se obtienen cuando la saturación es baja (mezcla o interferencia luminosa alta). De los grises el blanco es el más brillante (máxima frecuencia de ondas de distintas longitudes).

Este modelo de representación del color se conoce como HSB (Hue, Saturation, Bright):

HSB: Matiz es el color en si mismo,  Saturación es la mezcla del los colores entre si. Brillo se refiere a la intensidad lumínica.

Una variación de este modelo fue desarrollada por Tektronix en 1978 para proporcionar un modelo más fácil de usar y de percibir. Es conocido como modelo HLS (Hue, Light, Saturation).

En el modelo HLS la saturación no varia hacia el blanco sino que baja hasta el gris.
En este modelo el atributo de brillo se sustituye por el de Luminosidad:

Luminosidad, o Claridad. Es la mezcla del color con el blanco o el negro. Un color será más luminoso cuanto mayor cantidad de blanco posea o más oscuro cuando se le añada negro.

HLS: Matiz es el color en si mismo,  Saturación es la mezcla del los colores entre si. Luminosidad es la mezcla con blanco o negro.

El modelo HLS facilita la localización de muchos colores, los pasteles, los ocres muy utilizados industrialmente.

Los modelos HLS y HSB se denominan modelos perceptivos de color por tomar sus atributos de la observación del funcionamiento de la percepción humana de la luz.

Por otro lado las técnicas de reproducción del color necesita utilizar otros modelos no basados en la percepción:
El RGB para la representación a través de pantallas, televisores, monitores y escaner basados en haces luminosos.
El CMYK para la representación en pintura, imprentas, editoriales basados en mezcla de pigmentos.
El LAB para algunas cámaras fotográficas y escáner.

Estos modelos se basan en los condicionantes físicos para su reproducción, por eso se conocen como modelos reproductivos de color.

Estos modelos reproductivos han impuesto sus sistemas de representación (validos para la industria) en los diferentes programas informáticos y se han convertido (sobre todo el RGB, y CMYK) en los estándares de selección de color en el ordenador.

A pesar de no ser los más extendidos en el software, los modelos perceptivos (HLS, HSB) son los más adecuados para la selección del color en los procesos creativos, porque permiten realizar variaciones más acordes a las percepción humana. Posteriormente se pueden utilizar los modelos reproductivos para extraer los valores necesarios para su representación impresa o en pantalla.

Así lo entendió Bill Gates cuando desarrollo Windows. Creo un letrero de selección de color basado en el sistema HLS y el RGB. Permite seleccionar el color a través de los atributos HLS: Matiz, Saturación y Luminosidad y a su vez obtener los valores RGB para su reproducción en pantalla. Simple pero efectivo.
En este letrero las variaciones de matiz se representan sobre la horizontal del cuadrado. Las variaciones de saturación se representan en su vertical y las variaciones de luminosidad se representan en la barra lateral.

Selector de color de Windows basado en el sistema HLS y el RGB.

Otros desarrolladores de software también lo han entendido así creando letreros más o menos complejos en los que se muestran los atributos de diferentes modelos. Véase por ejemplo el caso de PhotoShop que compagina el modelo perceptivo HSB para seleccionar el color con los reproductivos RGB, Lab, CMYK, y web (igual al RGB) para su posterior representación.

Selector de color de PhotoShop que compagina el modelo perceptivo HSB para seleccionar el color con los reproductivos RGB, Lab, CMYK, y web

De acuerdo, pero ¿como utilizo esto de un modo productivo y fácil? ¿Cómo puedo utilizar los modelos para seleccionar un grupo de colores armónico?

 

Armonía perceptiva

Parece acertado pensar que los colores armónicos son aquellos que tienen cosas en común, que se parecen, y que los contrastados son los que tienen más diferencias entre si.

¿en que se parecen? Es evidente que varios naranjas son armónicos entre si, tienen el mismo color. Pero ¿en qué se parecen un verde un rojo y un amarillo que armonizan entre ellos?

Los modelos reproductivos de color se muestran poco adecuados para explicar (o seleccionar) grupos de colores armónicos. Difícilmente podremos encontrar un grupo de colores que sean consistentes entre si con solo variar alguno de sus colores básicos.

Los modelos perceptivos de color sí permiten seleccionar grupos de colores armónicos. Para ello solo se necesita variar uno de sus atributos y mantener iguales los otros dos. Serán armónicos entre si aquellos colores que tengan la misma saturación y brillo / luminosidad y diferente matiz. O también serán armónicos aquellos colores que tengan el mismo matiz y saturación pero diferente brillo / luminosidad.

No existe acuerdo entre cual de los dos modelos perceptivos, el HSB o el HLS, es más adecuado para este cometido. Cualquiera de los dos podría proporcionarnos colores similares. Hay quien considera el modelo HLS más próximo a la percepción humana y fácil de entender. Lo que si es seguro es que debe utilizarse un solo modelo. El creativo debe ceñirse a un único modelo en cada trabajo: ya sea el HSB, o el HLS, ya que los valores de sus atributos no son intercambiables.

Podríamos dividir el grado de similitud de los colores en tres niveles dependiendo de la cantidad de atributos que poseen iguales:

Armónicos: Aquellos que tienen dos atributos iguales y uno diferente

Consistentes: Aquellos que poseen un atributo igual y dos diferentes.

Contrastados: Aquellos que tienen los tres atributos diferentes.

Veamos ejemplos del modo en que pueden seleccionarse los colores.

Para el coloreado de un logotipo se decide utilizar el color azul, naranja y el verde por sus connotaciones psicológicas y simbólicas. Se desea por tanto encontrar tres colores armónicos. La solución más adecuada seria encontrar tres colores que tengan matices diferentes pero que mantengan la misma saturación y brillo / luminosidad. En base al modelo HSB se localizan tres colores armónicos con distinto matiz, igual saturación y brillo.

Logotipo con colores armonicos. Iguales saturación y brillo, distintos matices.

CorelDraw facilita mucho esta labor. Incorpora en su selector de color un "mezclador "y permite utilizar todos los modelos descritos. En este caso se ha utilizado el modelo HSB. Partiendo de unos determinados matices colocados geométricamente sobre la rueda del espectro cromático, Se han encontrar variaciones en saturación o brillo y se han añadido a la paleta de trabajo. Para estos colores se ha fijado el brillo a 100, y la saturación a 56 y se han variado los matices entre 48, 97 y 216.

Selector de color de Corel. Vease como se leleccionan los matices y posteriormente las variaciones.

Otro ejemplo:

Para la selección de los colores de las barras de menús de un sitio web se decide utilizar los colores GRIS, rojo y azul. Para los enlaces y los rollovers se decide utilizar diferentes luminosidades de estos colores. Se consigue así un grupo de colores "próximos". Para este caso se ha utilizado el modelo HLS a través del selector de color de Windows. Para ello se varia entre los matices 8 y 177, la saturación 187 (rojo y azul) y 0 (el gris), y las luminosidades 142 y 193. En total se localizan los siguientes colores:

Colores web obtenidos atraves de Dreamweaver y el selector de color de Windows.

Los programas de desarrollo web de Macromedia facilitan este proceso convirtiendo a hexagesimal los valores RGB hallados a través del selector de color de Windows. En ese letrero se pueden añadir los colores a una paleta de colores personalizados:

Selector de Windows para Macromedia. Vease como se pueden añadir a la paleta de colores personalizados..

En conclusión, un método simple pero efectivo para la selección de colores, es:

Primero seleccionar un determinado numero de matices basándose en sus connotaciones psicológicas y simbólicas. El matiz es el atributo en el que se aprecian mejor las variaciones. En ellos se mantiene el mismo valor de saturación y luminosidad para que sean armónicos.

En segundo lugar hallar una variación en el atributo de luminosidad de los anteriores matices. Se les asigna un determinado numero de variaciones en la luminosidad para que sean consistentes. Es preferible hacer esta variación en la luminosidad (intensidad) ya que las variaciones de este atributo se perciben mejor que las variaciones de la saturación (interferencia).

De este modo con un sistema gráfico y matemático se puede encontrar una cantidad concreta de colores armónicos o consistentes. Si se seleccionan 4 matices armónicos sobre los cuales se hacen 3 variaciones de luminosidad se obtendrán 12 colores consistentes.

Y por fin tenemos un sistema de selección de combinaciones de colores sencillo y efectivo que esta basado en la percepción y lo que resulta más interesante: funciona

 

Artículo original de Luis Miguel Richart

http://www.vectoraula.com/articulos/color/



Escribe un comentario

Expresa tu opinión sobre este recurso y compártela con los demás.

Validación

Por favor, introduce abajo el texto que se muestra en la imagen. De ese modo, evitamos los envíos automáticos masivos y podemos contestar antes a los mensajes legítimos como el tuyo.


Compartir
del.icio.us digg.com technorati.com yahoo.com meneame.net
Recursos relacionados:
Los 10 mayores errores del diseño web:     1. Malas búsquedas Los motores de búsqueda reducen la usabilidad ya que son incapaces de manejar errores tipográficos, plurales, guiones y demás variantes de las consultas. Estos motores son particularmente...
El proceso de diseño de un sitio Web: 1. ¿ Qué se busca al diseñar un sitio Web ? Veamos cuales son nuestros objetivos al diseñar un sitio. Observemos primero el hecho de que en los computadores personales, muchas cosas son similares entre sí. Distinto...
AJAX o el fin del clic y espera: A medida que los servicios van utilizando la www como soporte, el sistema operativo es sustituido por el navegador que se convierte en un cliente de acceso universal ya no únicamente a contenidos (o páginas web) sino a todo tipo de ser...
Análisis de los puntos débiles en los sistemas de estadísticas web: En este artículo analizaremos las causas de por qué los servicios básicos nos dan números erróneos, y daremos al lector los elementos de evaluación para que pueda por sí mismo determinar la fiabilidad...
Los dos principios básicos del diseño web accesible: Resumen: Los dos principios básicos del diseño accesible de sitios web son crear páginas que se transformen correctamente y ofrecer el contenido de manera comprensible para facilitar la navegación por el sitio web. Un si...
Las Tecnologías de las Páginas Web: Hay literalmente cientos de tecnologías a disposición del webmaster de hoy en día y, aprovechándolas adecuadamente, hacen que un sitio sea dinámico, amigable y exitoso. Junto con un buen diseño debemos monta...
Historia de Microsoft: La compañía fue fundada en 1975 por William H. Gates III y Paul Allen. Ambos se habían conocido durante su época de estudiantes por su afición común a programar con la computadora PDP-10 de Digital Equipment...
Documentos necesarios para un proyecto web: Resumen: Un proyecto web se puede resolver con 3 documentos. A. Un documento de proyecto. Objetivos, estrategia, etc... B. Una arborescencia. C. Un desarrollo de pantallas. Con estos documentos podremos llevar a cabo un proyecto web con confianza y,...
Uso de imágenes en la web: Uno de los factores que más dan que hablar es la inclusión de imágenes de todas las clases - las fotografías, diagramas, ilustraciones, multimedia etc. Los usuarios culparon a las imágenes por muchos de los problem...
Evaluación de Usabilidad Formativa: Índice Definición Cuestiones a las que puede dar respuesta la evaluación formativa Beneficios de la evaluación formativa PASO 1. DISEÑO DE LA EVALUACIÓN. PASO 2. DESARROLLO DE UN PROTOCOLO PARA LAS SESI...
Cortinas     Depresion     Colchones     Coches de segunda mano     
0.370589017868
eSedo.com - Compra, venta y registro de dominios y proyectos web infos proyecto: duamu.com estadísticas para proyecto: duamu.com etracker® web controlling en lugar de analisis de archivos log