• Página 1 de 2
  • 1
  • 2
  • »
Moderador del foro: ZorG  
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Colores (y todo relacionado con éstos)
Colores
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 4:32 PM
Selección de colores armónicos


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 gráfica.

También he hallado numerosas representaciones gráficas 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):

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.

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 escáner 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.

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.

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.

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.

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:

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:

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.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 2 | 3:40 PM
El uso adecuado de los colores

Siempre es bueno asegurarse que el primer plano y las combinaciones del color de fondo proporcionen suficiente contraste cuando sea visto por alguien con deficiencia visual o para visualizarlas con pantallas monocromáticas; estableciendo conformidad con el Punto de Verificación 2.2 de las Pautas de Accesibilidad al Contenido en la Web 1.0

Se considera que dos colores ofrecen buena visibilidad de color si la diferencia en brillo y la diferencia en color entre ambos es mayor que un intervalo dado.
El proceso para definir el nivel de "visibilidad del color" se basa en los algoritmos que sugiere el Consorcio de la World Wide Web (W3C). El intervalo que sugiere es > 125 para el brillo de color y > 500 para la diferencia de color.

El brillo de color se determina por medio de la siguiente fórmula:

Quote
((valor de Rojo * 299) + (valor de Verde * 587) + (valor de Azul * 114)) / 1000

La diferencia entre el brillo de fondo y el brillo de primer plano debería ser mayor a 125.

La diferencia de color se determina por medio de la siguiente fórmula:

Quote
(máximo (valor Rojo 1, valor Verde 2) - mínimo (valor Rojo 1, valor Rojo 2)) + (máximo (valor Verde 1, valor Verde 2) - mínimo (valor Verde 1, valor Verde 2)) + (máximo (valor Azul 1, valor Azul 2) - mínimo (valor Azul 1, valor Azul 2))

La diferencia entre el color de fondo y el color de primer plano debería ser mayor que 500.

Veamos un ejemplo:

Color de primer plano:

Quote
(hex.) #80FF80

(RGB.) 128, 255, 128

Color de fondo:

Quote
(hex.) #000000

(RGB.) 0, 0, 0

Fórmula de Brillo de Color:

Quote
(128 * 299) + (255 * 587) + (128 * 114) / 1000 = 202

La diferencia en brillo entre los dos colores es suficiente. El límite es 125, y el resultado para los colores de fondo y primer plano es 202.

Fórmula de Diferencia de Color:

Quote
128 - 0 + 255 - 0 + 128 - 0 = 511

La diferencia en color entre los dos colores es suficiente. El límite es 500, y el resultado para los colores de fondo y primer plano es 511.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 3 | 4:43 PM
Combinaciones de color

¿Pueden los usuarios daltónicos distinguir los colores de su sitio Web?
En mis últimos artículos he tratado problemas relacionados con el color y, en consecuencia, bastantes lectores me han solicitado información adicional sobre la selección de colores en sitios Web para que un daltónico pueda verlos con claridad. Tratando de satisfacer estas peticiones me he dedicado a investigar un poco más sobre el tema. En este artículo desearía proporcionar información que ayude a entender mejor esta necesidad y que, a la vez, permita diseñar sitios Web de fácil lectura.

Para comenzar, me dedicaré a analizar con mayor profundidad el término daltónico. En primer lugar, debo aclarar que ser daltónico no significa que no sea posible apreciar los colores o que sólo se puedan ver los objetos en blanco y negro. Por tanto, quizás nos podríamos referir a esta discapacidad como visión cromática deficiente.

El mundo en color
El proceso se inicia en el ojo, concretamente en los conos del ojo. En la escuela nos enseñaron que en el ojo hay bastones y conos que son sensibles a la luz. Estos bastones y conos transmiten lo que captan al cerebro, donde se forma una imagen que nos permite ver todo aquello que nos rodea.

A continuación, me dedicaré a profundizar en la esencia de los bastones y los conos, así que aquellos que prefieran ir al grano pueden pasar con toda libertad a consultar la sección sobre búsqueda de soluciones.

Los bastones, que superan en número a los conos, captan la diferencia de brillo en la porción media del espectro de luz. Si sólo tuviéramos bastones, podríamos ver únicamente en blanco y negro. A través de los conos conseguimos la visión en color. Existen tres tipos de conos.

• Los protoconos son sensibles principalmente a la porción roja del espectro visible.
• Los deutoconos captan la porción verde.
• Los tritaconos son sensibles a la porción azul.

Si bien los colores rojo, verde y azul se distribuyen casi de igual modo en el espectro visible, no ocurre lo mismo con la respuesta específica de cada tipo de cono. Esto puede resultar un poco confuso, especialmente debido a que los protoconos ni siquiera enfocan totalmente la zona en rojo del espectro. Afortunadamente, la respuesta espectral de los conos es sólo uno de los recursos que el cerebro utiliza en una fase posterior del proceso completo de descodificación de las imágenes en color.

Houston, tenemos un problema
Los trastornos de la visión en color surgen cuando todos los conos, ya sea de uno o varios tipos, ven reducida su capacidad funcional. La visión cromática deficiente afecta en mayor número a hombres que a mujeres, ya que los genes que regulan la apreciación del color forman parte del cromosoma X. Aproximadamente un 8% de los hombres sufre algún tipo de deficiencia en la visión cromática frente al 0,5 % de las mujeres.

Más abajo aparecen descritas las diferentes clases de visión cromática deficiente. He preparado una paleta y una rueda de colores a modo de ejemplo para cada una de ellas. Apenas pude encontrar referencias prácticas sobre cómo se aprecia el color en cada una de las clases siguientes. No obstante, las representaciones mostradas parecen ser las correctas. Puede que al mirarlas se pregunte por qué no se relacionan directamente con la ausencia de "rojo", "verde" o "azul". Intervienen dos factores importantes en este aspecto. Uno de éstos consiste en que, tal y como se muestra en la tabla anterior, la sensibilidad cromática de los conos no se centra de modo directo en sus áreas especificas del espectro. El segundo factor comprende el proceso siguiente que tiene lugar en el cerebro, durante el cual se asocian el color y la imagen con las respuestas procedentes de los bastones y los conos. En aquellos usuarios con una visión cromática deficiente los colores definitivos apreciados variarán para tratar de compensar la percepción.

La protanopiaafecta aproximadamente al 1% de la población masculina.
La protanopiaes la carencia de sensibilidad al color rojo, denominada también dicromacia roja. Consiste en la ausencia de actividad funcional de los protoconos, que son sensibles a la porción roja del espectro visible. Al encontrarse el rojo situado al final del espectro visible, se produce solamente una superposición parcial de respuesta con los otros dos tipos de conos. Por tanto, los individuos que sufren protanopia padecen una pérdida clara de sensibilidad a la luminosidad del extremo rojo del espectro.

La protanomalíaafecta aproximadamente al 1% de la población masculina.
La protanomalíaconsiste en una percepción mas débil del rojo y se produce como consecuencia de una disminución en la capacidad funcional de los protoconos.

La deuteranopiaafecta aproximadamente al 1,1% de la población masculina.
La deuteranopiaconsiste en la carencia de sensibilidad al color verde, denominada también dicromacia verde. Es el resultado de la ausencia de actividad de los deutoconos, que son sensibles a la porción verde del espectro visible. Debido a la ubicación del verde en el espectro, a la superposición de la respuesta de los deutoconos (sensibles al verde) y los protoconos (sensibles al rojo) y a la superposición parcial de los tritaconos (sensibles al azul), las personas que padecen deuteranopia pueden percibir casi con total normalidad toda la gama del espectro, si bien experimentarán confusión entre los colores por separado.

La deuteranomalíaafecta aproximadamente al 4,9% de la población masculina.
La deuteranomalíaconsiste en una percepción menos intensa del color verde y se origina cuando los deutoconos ven disminuida su capacidad funcional.

La tritanopiaafecta aproximadamente al 0,001% de la población masculina.
La tritanopiaconsiste en la carencia de sensibilidad al color azul, denominada también dicromacia azul. Se trata de una de las alteraciones de la visión cromática menos frecuentes. Surge cuando los tritaconos, que captan la porción azul del espectro visible, experimentan una pérdida de actividad. Debido a que el azul se sitúa en el extremo opuesto al rojo en el espectro, y a que la respuesta de los tritaconos se superpone en menor medida con las respuestas de los otros dos tipos de conos, las personas con tritanopia sufren una mayor pérdida en la percepción del espectro.

La tritanomalíaharía referencia a la captación disminuida del azul. Sin embargo, no existe ningún caso conocido de esta clase de deficiencia cromática. Esto podría deberse, sobre todo, a que los tritaconos representan tan sólo un 10% del total de conos presentes en el ojo. Para cuando una anomalía pudiera resultar perceptible, los conos carecerían en su mayoría de actividad alguna.

Si se observan los colores de las paletas anteriores, se podrá entender mejor la incapacidad de las personas con algún tipo de deficiencia cromática para ver los colores que tan minuciosamente ha seleccionado para su sitio Web.

A modo de ejemplo, imagine que se encuentra en la siguiente situación:

Parece fácil ¿verdad?. Pero, ¿que ocurriría si sólo se viera esto?

O bien

O bien

Francamente, espero que esta tipo de caso apenas aparezca en los sitios Web. Resulta más sencillo definir los botones con etiquetas del estilo de "Continuar", "Ayuda" o "Salir" que, además, ocupan menos espacio en la página. Por desgracia, este tipo de situaciones suceden, no sólo en las páginas Web, sino también en la vida real.

La solución pasa por evitar utilizar los colores como indicadores exclusivos de instrucciones o de la información a la que pretende obtener acceso. El color debería usarse sólo a modo de señal que no sea relevante.

Contrastes de color
Tal y como hemos podido leer en mis artículos anteriores sobre el color, un aspecto importante a la hora de diseñar la página es el contraste pronunciado entre los colores en primer plano y los de fondo, ya que así se facilita la lectura del texto. Este hecho resulta aún más esencial al dirigirnos a usuarios con visión cromática disminuida.

Observe primero las ruedas de colores mostradas anteriormente y, a continuación, la que aparece al principio de la página.

Podrá advertir que la variedad de colores apreciados por los usuarios con visión cromática deficiente es bastante más reducida que la de una persona con visión normal y que para ellos muchos de los colores cercanos en la rueda de color presentan una aspecto prácticamente idéntica. Examinemos la siguiente muestra de color para ver cómo afecta al diseño de su sitio Web.

Sí, soy consciente de que no es la selección de color más acertada, pero la he visto en un gran número de sitios Web. Puede que los colores parezcan chillones—pero si tiene una visión normal no tendrá dificultad para leer el mensaje que aparece escrito. Sin embargo, ¿qué ocurre si alguien sufre de visión cromática deficiente?

Es probable que algunos opinen que basta con comprobar que la selección realizada se sigue apreciando incluso cuando se aplica una paleta de escala de grises para asegurarnos de que los colores serán distinguidos por los usuarios con visión cromática deficiente. Personalmente, no creo que esto sea así. Probemos a reducir la paleta utilizada en la siguiente imagen a una escala de grises y veamos qué aspecto tiene.

Podría pensar que, aunque esta combinación de colores no resulta muy llamativa, al menos será percibida por el usuario con visión cromática deficiente. ¿Está seguro? Vamos aplicar ahora una paleta que refleja con mayor precisión el tipo de imágenes vistas por estos usuarios. Observemos con más detenimiento:

Protanopia:

Deuteranopia:

Tritanopia:

Según la imagen, los individuos con tritanopia no tendrían problema alguno en este caso. En mi opinión, pueden ver los colores incluso en un tono más llamativo que yo, por ejemplo, con mi visión normal. Sin embargo, aunque la imagen era clara en una paleta de escala de grises, no resulta en absoluto una combinación apropiada para la mayoría de los usuarios con visión cromática deficiente.

Cualquier diseñador que se dedique a la selección adecuada de colores nunca hubiera elegido esta combinación en concreto. En su lugar, optaría por colores que produjesen un contraste más marcado con el fin de hacer que la información resulte más atractiva para el ojo humano. Imaginemos que por alguna razón fuese preciso recurrir a esta clase de combinación de verde sobre amarillo. ¿Qué podría hacer el diseñador? Hemos aprendido, tras leer mis artículos anteriores, que si se oscurece un color y se aclara el otro, el contraste aumenta, así que trataremos de cambiar la claridad y la saturación de los colores, manteniendo el mismo matiz, para producir un contraste mayor:

Visión normal:

Protanopia:

Deuteranopia:

Tritanopia:

Esta selección de colores concreta no produce tampoco un efecto del todo satisfactorio, pero sin duda es mucho mejor que la original. Con sólo un pequeño cambio, hemos logrado mantener los colores de la selección original y elaborar un texto legible para los usuarios con visión cromática deficiente.
Podrá comprobar sus propias selecciones de color en las siguientes imágenes si dispone de un programa de dibujo, como por ejemplo PaintShop Pro (en inglés), que es el que utilizo, que permita extraer paletas de color de archivos de imagen y aplicarlas tanto en la modalidad de color más cercano ("nearest color") como en la de mantener índices ("maintain indexes"). La imagen "Normal" representa a la Paleta de seguridad de 216 colores; las otras imágenes mantienen los mismos índices, pero se han cambiado los colores para reflejar lo que capta una persona con visión cromática deficiente.

Visión normal:

Protanopia:

Deuteranopia:

Tritanopia:

Una vez que haya guardado las paletas de cada una de estas imágenes en un archivo específico, realice los siguientes pasos para poder examinar sus propias imágenes:
• Utilice la tecla "IMPR PANT" para capturar una pantalla de su combinación de colores.
• Pegue esta imagen en su herramienta de imágenes.
• Aplique la paleta "Normal" utilizando el método "Nearest Color".
• Aplique una de las paletas que reflejan el modo de visión cromática deficiente utilizando el método "Maintain Indexes".

Tenga en cuenta que la mayoría de los programas de dibujo admiten el uso y la manipulación de las paletas de colores, aunque pueden ofrecer la opción de mantener los índices de color al agregar una nueva paleta. Para comprobar si su aplicación incluye esta opción, consulte con el fabricante o con otros usuarios del software.

Selección de color cooperativa
Tal y como habrán podido comprobar tras el ejercicio anterior, la selección de colores que puedan apreciar correctamente todos los usuarios puede suponer todo un reto. Si tenemos en cuenta que, además, existen diferentes grados de visión cromática deficiente, con lo cual la variación de los colores se incrementa, y el hecho de que algunos monitores no se hallan bien configurados y ofrecen un contraste poco marcado incluso para usuarios con visión normal, la combinación de estos factores convierte a la selección de colores en un proceso no sólo importante sino también difícil.

Al seleccionar colores para su sitio Web, puede permitir al usuario que especifique los colores que desea visualizar en la página. No, esta operación no resulta tan complicada como parece. El programa de hojas de estilo en cascada ya incluye la idea de una "Hoja de estilo del usuario", que permita a éste especificar un estilo que se superponga al establecido por el diseñador de la página. No obstante, puede que al usuario le resulte un tanto complejo crear esta hoja y estropee de forma accidental el diseño de la página Web.

Un modo más sencillo para trabajar con los usuarios consiste en tomar como referencia los mismos colores que han elegido para el sistema operativo Windows y utilizarlos para visualizar los diversos componentes de la interfaz de usuario. El usuario habrá cambiado los colores en la pantalla, a través del subprograma del panel de control Configuración de pantalla, para así poder ver y utilizar las aplicaciones de Windows. Si recurre a la misma combinación de colores, asegurará que su sitio Web será visto por este tipo de usuarios. No obstante, existe un inconveniente en este método: no resulta neutral con respecto a los exploradores ya que, por el momento, sólo Microsoft Internet Explorer emplea estas palabras clave.

Para poder usar los colores del sistema, basta con utilizar las palabras clave apropiadas en lugar de los valores de colores. Por ejemplo, en vez de utilizar:

Quote
<font color="#FFCC9">

emplearíamos:

Quote
<font color="windowtext">

De este modo, aplicaríamos para el color de fuente el mismo color que el seleccionado para el texto del sistema operativo Windows.

A continuación, se enumeran las palabras clave. La primera lista contiene aquellas que se emparejan para lograr una combinación de color adecuada de fondo y texto.

Haga click aquí para ver la tabla. (Debo advertir que posiblemente no vaya a funciona en un navegador distinto a Internet Explorer).

En la siguiente lista se incluyen los colores que no se combinan con colores de contraste correspondientes. Por ello, no se recomienda utilizarlos como fondo o como color del texto, sino sólo para reflejar las funcionalidades que implican sus propios nombres:

Haga click aquí para ver la tabla. (Debo advertir que posiblemente no vaya a funciona en un navegador distinto a Internet Explorer).


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 4 | 5:10 PM
Colores RGBA en CSS 3

Veremos qué son los colores RGBA y su notación, que se incluyen en la especificación de Hojas de Estilo en Cascada CSS 3.

Como sabemos, los colores en HTML se expresan en valores RGB, igual que en CSS, que admite diversas notaciones para definir el color, a través de números en hexadecimal e incluso en decimal. Todo esto suponemos no será un misterio para los lectores, que sin duda habrán experimentado con CSS y probablemente estén familiarizados con las distintas notaciones para especificar color en las hojas de estilo.

Ahora queremos hablar de una nueva notación, que no es simplemente una manera nueva de expresar lo mismo, sino una que nos permite definir colores por medio de valores adicionales. Se trata de la notación RGBA, que a partir de CSS 3 está disponible para los desarrolladores.

La notación RGBA es una manera de especificar colores en la que se definen cuatro valores. Los tres primeros son los bien conocidos canales RGB (rojo, verde y azul) y el cuarto parámetro es el canal Alpha, que no es más que el grado de transparencia u opacidad del color. El canal Alpha es un valor entre cero y uno, siendo 0 totalmente transparente y 1 totalmente opaco.

En el mundo del diseño quizás ya habremos visto otros formatos o sistemas que soportan colores con canal Alpha y por ello puede que estemos familiarizados con este parámetro. El formato de imagen PNG, que tanto nos gusta por soportar transparencia que se ve correctamente en todos los fondos posibles, implementa justamente este canal alpha en la definición del color para conseguir una transparencia ideal.

Ahora, por medio de los colores en RGBA en CSS 3, podremos aplicar nuevas transparencias a los colores que especificamos con CSS, abriendo nuevas posibilidades a los diseñadores sin necesidad de complicarse con pequeños trucos como el uso de imágenes de fondo semitransparentes en PNG, etc. Además, como los colores RGBA se pueden aplicar a cualquier elemento que soporte asignación de color, las aplicaciones aumentan todavía más. El único pero, al menos a la hora de escribir este artículo, es que CSS 3 no está ampliamente soportado por todos los navegadores. Por ejemplo Internet Explorer 8 no lo soporta por el momento.

Notación de color RGBA
Para definir un color RGBA, se deben especificar cuatro valores, de la siguiente manera:

Quote
rgba (255, 125, 0, 0.5);

Los tres primeros valores son números en sistema decimal, que corresponden con los valores de rojo, verde y azul. Siempre tienen que ser números entre 0 y 255.

El cuarto valor es un número entre 0 y 1. Por ejemplo 0 sería totalmente transparente, 1 sería totalmente opaco y 0.5 sería una transparencia al 50%, es decir, mitad opaco mitad transparente.

Ejemplos de estilos CSS con colores definidos por RGBA
Ahora veamos varios ejemplos de colores definidos con CSS y la notación RGBA.

Quote
<span style="font-family:Courier"><div style="background-color: rgba(0, 0, 255, 0.1);">Esta capa tiene fondo azul, casi transparente</div>

<span style="color: rgba(0,255,0,0.8);">Este texto es verde y tiene un poco de transparencia</span>

Pero aparte de estos ejemplos, lo ideal es ver el efecto de transparencia en marcha, para poder hacernos una idea más aproximada de las posibilidades. Para ello hemos construido una página donde se muestran varias capas con colores y transparencias, tanto en el fondo como en el texto.

Ver ejemplos #1 y #2 de colores CSS RGBA.

Pero nuevamente llamamos la atención de los lectores sobre el hecho que, dependiendo del navegador que se utilice, se verán o no los distintos colores, puesto que las CSS 3 no son compatibles con todos los sistemas. Este ejemplo funcionará bien en navegadores que cumplen los estándares, como Firefox, Chrome o Safari, pero no en navegadores como Internet Explorer, que hacen la guerra por su cuenta.

El código del anterior ejemplo es el siguiente:

Quote
<html>
<head>
<title>Colores RGBA con CSS 3</title>
<style type="text/css">
div.cuadrado{
width: 150px;
height: 40px;
border: 1px solid #dddddd;
margin: 5px;
}
div.textogrande{
font-family: verdana, arial, helvetica;
font-weight: bold;
font-size: 40pt;
}
</style>
</head>

<body>
<h1>Colores RGBA con CSS 3</h1>

<h2>Ejemplo de capas con fondo azul y varias transparencias</h2>
<div class="cuadrado" style="background-color: rgba(0, 0, 255, 0.1);"></div>
<div class="cuadrado" style="background-color: rgba(0, 0, 255, 0.4);"></div>
<div class="cuadrado" style="background-color: rgba(0, 0, 255, 0.7);"></div>
<div class="cuadrado" style="background-color: rgba(0, 0, 255, 1);"></div>

<h2>Ejemplo de capas con fondo verde y varias transparencias, sobre una capa con fondo amarillo</h2>
<div style="background-color: #ff3; padding: 10px;">
<div class="cuadrado" style="background-color: rgba(0, 255, 0, 0.1);"></div>
<div class="cuadrado" style="background-color: rgba(0, 255, 0, 0.4);"></div>
<div class="cuadrado" style="background-color: rgba(0, 255, 0, 0.7);"></div>
<div class="cuadrado" style="background-color: rgba(0, 255, 0, 1);"></div>
</div>

<h2>Ejemplo de capas con fondo naranja y varias transparencias, sobre una capa con una imagen de fondo</h2>
<div style="background-image: url(http://www.desarrolloweb.com/articulos/ejemplos/photoshop/fondo-nieve/nieve.gif); padding: 10px;">
<div class="cuadrado" style="background-color: rgba(255, 125, 0, 0.1);"></div>
<div class="cuadrado" style="background-color: rgba(255, 125, 0, 0.4);"></div>
<div class="cuadrado" style="background-color: rgba(255, 125, 0, 0.7);"></div>
<div class="cuadrado" style="background-color: rgba(255, 125, 0, 1);"></div>
</div>

<h2>Ejemplo de texto de color rojo y varias transparencias, sobre una capa con una imagen de fondo</h2>
<div style="background-image: url(http://www.desarrolloweb.com/articulos/ejemplos/photoshop/fondo-nieve/nieve.gif); padding: 10px;">
<div class="textogrande" style="color: rgba(200, 0, 0, 0.3);">Este texto está para que se vea que puede ser también medio transparente</div>
<div class="textogrande" style="color: rgba(200, 0, 0, 0.7);">Este texto está para que se vea que puede ser también medio transparente</div>
</div>

</body>
</html>

Si se permite mi opinión, es una pena que esta gestión de color con canal alpha no esté disponible en Internet Explorer 8, en el momento de escribir estas líneas, porque así se hace complicado usar este tipo de efectos. No obstante, es de suponer que las personas de Microsoft pondrán al día su navegador un año de estos, para hacerlo compatible con las CSS 3 y los colores RGBA.[/size]


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 5 | 5:10 PM
Los colores y HTML

En este reportaje tratamos de acercarte todos los detalles relativos al buen uso de colores en HTML. Colores compatibles con todos los sistemas.

El la composición de webs juegan un papel muy importante los colores. Se indican en valores RGB, es decir, que para conseguir un color cualquiera mezclaremos cantidades de Rojo, Verde y Azul.

Los valores RBG se indican en numeración hexadecimal, en base 16. (Los dígitos pueden crecer hasta 16. Como no hay tantos dígitos numéricos se utilizan las letras de la A a la F.

Para conseguir un color, mezclaremos valores de esta manera:

RRGGBB
Donde cada valor puede crecer desde 00 hasta FF.

Ejemplo: Cómo se cambiaría la fuente para escribir en rojo:

Quote
<font color=“#FF0000”>Rojo</font>

Al Atributo color le damos un valor RGB en formato hexadecimal. El carácter # se coloca al principio de la cadena.

Otros colores:

Colores compatibles en todos los sistemas

Como las páginas web las tienen que ver todos los usuarios, y los sistemas que utilizan para entrar son distintos, hay que utilizar colores compatibles con la paleta de todos ellos.

La forma de conseguir esto es limitando nuestros colores a los que se pueden conseguir utilizando la siguiente norma:

Ejemplos:

Se consiguen los colores siguientes:



Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 6 | 6:50 PM
Degradados de colores usando CSS

Tradicionalmente cuando uno va a incluir un degradado (la transición de un color a otro) en un sitio, uno debe crear una imagen que represente dicha transición. Ahora esta es no es la única forma de lograrlo, también es posible obtener el mismo resultado usando solamente CSS. Claro, esto no funciona en todos los navegadores por ahora.

Hace algunos meses el equipo de Webkit publicó su propuesta para crear degradados CSS; semanas atrás el equipo de Mozilla también publicó la suya (que será incluida en la siguente versión de firefox). Ambas propuestas son muy similares como veremos en los siguientes ejemplos.

Si queremos representar esta imagen como degradados usando CSS, con Webkit (528) la definición sería:

Quote
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

Donde los parámetros corresponden a:

Quote
-webkit-gradient(tipo , punto inicio, punto final, color inicio, color final, color-stop(porcentaje, color), color-stop(porcentaje, color) ).

Con Firefox / Gecko (1.9.2) la definición solo varía al inicio, el resto de parámetros siguen en el mismo orden/significado:

Quote
background: -moz-linear-gradient(left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

Veamos un ejemplo más complicado, la imagen anterior se puede representar en Webkit de esta forma:

Quote
-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
?
background: -moz-radial-gradient(45px 45px, 10px, 52px 50px, 30px, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)) no-repeat,
-moz-radial-gradient(105px 105px, 20px, 112px 120px, 50px, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)) no-repeat,
-moz-radial-gradient(95px 15px, 15px, 102px 20px, 40px, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)) no-repeat,
-moz-radial-gradient(0 150px, 50px, 0px 140px, 90px, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)) no-repeat;

Pueden ver el código funcionando de estos ejemplos acá. A partir de estos podemos observar algunas diferencias:
• Para definir el tipo de degradado en Gecko se utiliza una propiedad diferente (-moz-linear-gradient) mientras que en Webkit se usa la misma propiedad (-webkit-gradient), pero se utiliza un parámetro adicional para indicar el tipo.
• En Webkit se especifican las posiciones y radios sin unidad de medida, pero se interpretan como si fueran píxeles. En el caso de Gecko se necesita indicar la unidad de medida. Ambos interpretan también medidas en porcentajes o palabras claves.
• En una misma definición de la propiedad background se pueden combinar tantos degradados como se necesite.
• En el caso de Gecko para los degradados radiales debemos especificar el parámetro no-repeat después de la definición de cada degradado, en el caso de webkit no hace falta hacerlo. Si en Gecko no está presente el parámetro no-repeat, entonces el degradado se repetirá en forma radial respecto al centro de este.

Diferencias respecto al usar imágenes
• Una de las primeras ventajas al definir degradados con CSS, es que eliminas las peticiones de las imágenes que hubiesen sido necesarias hacia el servidor web. Y de paso reduces el tiempo promedio para cargar del sitio
• Cambiar el CSS de un sitio es mucho más sencillo que modificar las imágenes necesarias para el diseño. Incluso puedes definir el CSS dinámicamente si fuera necesario, usando imágenes esto sería más complicado.
• Obviamente si lo incluyes en un sitio, muy poca gente será capaz de verlos. La versión actual de Firefox aún no los interpreta, tendrías que bajar la versión alpha para empezar a jugar con estos. En el caso de Webkit, las últimas versiones de Google Chrome y Safari ya interpretan los degradados CSS.
• Aún así del lado de los móviles (iPhone, Android, Pre, etc), las ultimas versiones de estos ya incluyen una versión de Webkit que los interpreta. Acá es donde yo les veo mayor opción a usarlos.

Un ejemplo más real
Imaginemos que tenemos un hipotético sencillo/ligero cliente para twitter que nos interesa que no desperdicie transferencia de datos en imágenes innecesarias (clave para usarlo sobre la red celular), pero a la vez queremos que no se vea tan feo como la interfaz móvil de twitter.

Nos interesa resaltar tweets de diferente color:
• Verde para los tweets propios
• Naranja para las respuestas/menciones
• Azul para los mensajes directos/privados
• Blanco para todo lo demás

Para ser compatibles con la mayor cantidad posible de navegadores, definiremos el color de fondo de cada tweet de esta forma:

Quote
#t li{
background:#FAFAFA;
background:-webkit-gradient(linear,left top,left bottombottom,from(#FAFAFA),to(#eaeaea));
background:-moz-linear-gradient(left top,left bottombottom,from(#FAFAFA),to(#eaeaea));
}

Primero usamos la definición más general, para que los navegadores que no interpretan los degradados CSS la usen, luego especificamos las definiciones para los navegadores que si los interpretan. Pueden ver el ejemplo de degradados CSS, si tienen la ultima versión de Google Chrome, Safari o la versión alpha de Firefox 3.6 deberían verlo así:


Click on the image to view it in full size.

Si este supuesto cliente lo usáramos en un iPhone, iPod Touch, Android, Palm Pre o cualquier otro que tenga un navegador con una versión reciente de Webkit, verían correctamente los degradados CSS. En la parte de Escritorio, la mayoría de gente aún usa Internet Explorer o Firefox, ninguno de estos interpreta los degradados CSS en sus versiones finales, no vale tanto la pena usarlos en algo general… por ahora.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 7 | 6:57 PM
Gradientes en Javascript

Veremos cómo crear gradientes que consuman pocos recursos sin usar bucles, clipeo de capas o imágenes

Hasta ahora los ejemplos que he visto de creación de gradientes en Javascript no me convencen demasiado ya que, o usan imágenes de fondo con el degradado aplicado en ellas (imágenes que es necesario generar con algún editor o con lenguaje de servidor), o utilizan diferentes métodos de clipeo o división de capas (todo termina en un largo bucle en el que se recorre cada una de las subdivisiones generadas con el fin de aplicarle el color necesario para lograr el gradiente). En especial este último método puede consumir demasiados recursos si la superficie a cubrir es extensa.

Afortunadamente, gracias a la compatibilidad del elemento canvas con todos los navegadores modernos y a los filtros propietarios de Explorer, podemos, de manera crossBrowser, generar gradientes livianos en javascript, con un mínimo consumo de recursos y sin usar imágenes u otros extras.

Veamos algunos ejemplos:

Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gradientes</title>
<style>
#v,#h,#v2,#h2{ width:500px;height:100px; border:1px solid #000; margin-bottom:2px}
</style>
<script>
function $(x){return document.getElementById(x);}
function css(id,prop){
if(window.getComputedStyle){
return document.defaultView.getComputedStyle($(id),null).getPropertyValue(prop);
}else{
var re = /(-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return $(id).currentStyle[prop] ? $(id).currentStyle[prop] : null;
}
}
function gradiente(idObj,col1,col2,tipo){
if (document.createElement("canvas").getContext) {
/* ---- canvas ---- */
var b1=parseInt(col1.substr(5,2),16);
var g1=parseInt(col1.substr(3,2),16);
var r1=parseInt(col1.substr(1,2),16);
var b2=parseInt(col2.substr(5,2),16);
var g2=parseInt(col2.substr(3,2),16);
var r2=parseInt(col2.substr(1,2),16);
var ref = document.createElement("canvas");
ref.width = parseInt(css(idObj,'width'));
ref.height =parseInt(css(idObj,'height'))
var context = ref.getContext("2d");
context.translate(0,0);
context.scale(1,1);
if(tipo){
context.translate(ref.width,0);
context.rotate(Math.PI/2);
var gradient = context.createLinearGradient(0, 0, 0, ref.width);
gradient.addColorStop(1, "rgba("+r1+","+g1+","+ b1+", 1.0)");
gradient.addColorStop(0, "rgba("+r2+","+g2+","+ b2+", 1.0)");
context.fillStyle = gradient;
context.fillRect(0,0,ref.height, ref.width);
}else{
var gradient = context.createLinearGradient(0, 0, 0, ref.height);
gradient.addColorStop(0, "rgba("+r1+","+g1+","+ b1+", 1.0)");
gradient.addColorStop(1, "rgba("+r2+","+g2+","+ b2+", 1.0)");
context.fillStyle = gradient;
context.fillRect(0,0,ref.width, ref.height);
}
$(idObj).appendChild(ref);
} else {
/* ---- DXImageTransform ---- */
$(idObj).style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+col1+", endColorstr="+col2+", GradientType="+tipo+")"
}
}
window.onload=function(){
gradiente('v','#FF0000','#FFFF00',0);
gradiente('h','#00FF00','#FFFF00',1);
gradiente('v2','#663399','#CCFFFF',0);
gradiente('h2','#00FFCC','#CCFFFF',1);
}
</script>
</head>

<body>
<div id="v"></div>
<div id="h"></div>
<div id="v2"></div>
<div id="h2"></div>
</body>
</html>

Adherido: 2647904.jpg (5.2 Kb)

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 8 | 12:29 PM
Una función para crear gradientes en Flash
Gradientes en Flash

Usando flash.geom y el método beginGradientFill es posible crear gradientes de manera muy sencilla

Este ejemplo muestra cómo rellenar un movieClip con un gradiente entre 2 colores usando el método beginGradientFill:

El código utilizado es el siguiente:

Quote
import flash.geom.*;
function gradiente(color1,color2,obj,ancho,alto,tipo){
var fillType:String = "linear"
var colors:Array = [color1,color2];
var alphas:Array = [100, 100];
var ratios:Array = [0, 255];
var matrix:Matrix = new Matrix();
var r=tipo?0:1.57;
matrix.createGradientBox(ancho, alto, r, 0, 0);
var spreadMethod:String = "pad";
obj.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);
with(obj){
moveTo(0, 0);
lineTo(ancho, 0);
lineTo(ancho, alto);
lineTo(0, alto);
lineTo(0, 0);
endFill();
}
}
var pp=this.createEmptyMovieClip('pp',this.getNextHighestDepth());
var pp2=this.createEmptyMovieClip('pp2',this.getNextHighestDepth());
gradiente(0xFF0000,0xFFFF00,pp,400,100,0);
pp2._y=102;
gradiente(0xFF0000,0xFFFF00,pp2,400,100,1);

Como vemos, quien hace todo el trabajo es la función gradiente, la cual requiere los siguientes argumentos:
color1, color2: colores desde y hasta del gradient
obj: clip a rellenar
ancho, apto: dimensiones del relleno
tipo: 0=vertical, 1=horizontal

Adherido: 8753456.jpg (0.9 Kb)

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 9 | 11:44 AM
Simbolismo de los colores y su uso en el diseño web

El diseñador de páginas web debe tener en cuenta que el color es mucho más que un elemento decorativo. En el diseño web, siempre se debe pensar que la creación que se está llevando adelante tiene como finalidad gustar al destinatario, el usuario de la página web, y no simplemente satisfacer el gusto del propio creador o de su cliente.

Al elaborar una página web debemos tener en cuenta el tipo de usuario que la misma va a tener. El gusto por los colores y sus diferentes combinaciones se encuentra íntimamente relacionado con la edad, nivel socio-económico, la cultura a la que pertenece, nivel educativo e incluso el país o región del mundo a la cual se pertenece.

Todos estos elementos deben ser tenidos en cuenta a la hora de diseñar una página web, no solo para definir los colores que se emplearán en el diseño. Los colores tienen diferente simbología según la cultura a la que se pertenezca y el gusto por los mismos es variable con la edad.

Los colores también influyen en el estado de ánimo de las personas. Mientras que algunos colores tienden a dar sensación de paz y tranquilidad, otros resultan irritantes o estimulantes. No se debe despreciar el efecto psicológico que los colores de nuestra página web tendrán sobre nuestros usuarios. La mayoría de los usuarios de internet basan su navegación en la web en aspectos que están más ligados al sub-consiente que a aspectos racionales, sobre todo si la navegación está relacionada con el ocio.

Influencia de los colores en los usuarios según su edad
No hay que ser un gran observador para ver cuales son los colores preferidos por las personas de acuerdo a su edad. Si observamos a un grupo de jóvenes, veremos que se visten con colores fuertes o tienen algunos elementos de este tipo de colores. Los niños también se sienten atraídos por los colores fuertes. Si observamos los colores con los que se diseñan los juguetes, veremos que en éstos predominan esta clase de colores.

Si nos encontramos diseñando una página web destinada a niños o adolescentes, debemos tener en cuenta este gusto por los colores fuertes. Si diseñáramos una página web destinada al público infantil con colores pastel o con gran influencia de los grises, seguramente los usuarios ni siquiera terminarán la carga de la misma cuando ya estén buscando otra. El siguiente es un ejemplo de una página web diseñada para público infantil cuyos colores son los adecuados:

El empleo de colores fuertes y un marcado contraste caracterizan a esta página, que es notoriamente destinada a un público infantil. En las páginas destinadas a los adolescentes, si bien los colores pueden ser también llamativos, puede apreciarse el empleo de otros colores.

El público adulto tiene por lo general una tendencia a disfrutar de colores más sobrios. En las páginas destinadas a este tipo de público, la gama de colores es más amplia y con una clara tendencia a alejarse de los colores estridentes. A modo de ejemplo, mostramos la siguiente página:

El empleo del color gris acompañado de verdes en tonos opacos, hace que esta página solo pueda ser del gusto de un público adulto. La austeridad del diseño también denota claramente el tipo de público para el cual está destinada.

Influencia de los colores en los usuarios según el género
Aún a edades tempranas, hay diferencias en la predilección de colores según el género. En el caso de los adultos, mientras que las mujeres tienen tendencia a preferir colores suaves y fríos o una combinación de estos, en los hombres la tendencia indica que prefieren los colores cálidos, como el rojo o el naranja.

Esto es aplicado en muchos tipos de páginas web. Por ejemplo, es notorio que las páginas destinadas a los deportes tienen combinaciones de colores cuya base son los colores cálidos, mientras que en páginas cuyo público predominante es el femenino, como páginas de cocina, jardín, hogar y modas, las preferencias de los diseñadores profesionales se inclinan por los colores suaves y fríos.

Usos de los colores según otros tipos de público
El nivel socio-cultural también influye en la preferencia de colores. Mientras que el público con un nivel educativo y económico entre medio y bajo tienen una marcada tendencia a gustar de los diseños confeccionados con colores primarios y fuertes, el público con mayor nivel educativo y económico prefiere los colores más apagados.

El significado de los colores es muy variable entre diferentes culturas, por lo que la ubicación geográfica de los usuarios también debe ser tenida en cuenta a la hora de seleccionar la paleta de colores. Por ejemplo, mientras que en occidente las bodas y las vestimentas de las novias tienen una íntima relación con el color blanco, el mismo color en culturas orientales está vinculado con los funerales.

¿Cómo hacer que la paleta de colores tenga el efecto deseado?
Una vez definida la paleta de colores para la página, debemos ver como hacemos para lograr que estos colores tengan el efecto visual deseado. No basta con colocar el color en los diferentes elementos de la página web, sino que además debemos hacer que estos elementos sean fácilmente visibles, empleando uno de los principios básicos del diseño web: el contraste.

Para ello es absolutamente necesario el empleo de otros colores, que pueden ser neutros u opuestos a los colores que integran la paleta. Por ejemplo, si empleamos imágenes con colores fuertes, estas imágenes pueden ser distribuidas sobre un fondo negro o de colores pálidos, haciendo que sea sencillo contrastar y separar cada uno de los elementos. En el siguiente ejemplo hemos tomado una página de juegos para niños, la cual está diseñada con elementos de colores fuertes y llamativos.


Click on the image to view it in full size.

Para lograr que estos elementos se destaquen y sean de sencilla visualización, el diseñador ha empleado un fondo que va desde el blanco hasta el gris pálido, lo que hace que los elementos, sobre todo las imágenes, se vean perfectamente definidas.

En una palabra, además de definir el tipo de color de nuestra página, debemos pensar en como resaltar los elementos coloreados empleando colores opuestos para, por contraste, marcar, definir y resaltar cada uno de los elementos.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 10 | 12:49 PM
Empleo del color en el diseño de páginas web

Imaginemos por un instante que en este momento nos estamos conectando a la web y comenzamos nuestra navegación abriendo una página web. ¿Cuál es la primera impresión que recibe nuestro cerebro de los órganos sensibles a la luz, nuestros ojos? La respuesta será casi inmediata: el color. Mucho antes de que nuestra mente comience a descifrar los contenidos que tiene la página, lo primero que se percibe es una sensación a través del color.

El color tiene el poder de transmitir sensaciones. Es sabido que los rojos, amarillos y naranjas resultan estimulantes e inclusive irritantes, mientras que los verdes y los azules brindan una sensación de tranquilidad y sosiego. Es por esta razón que los diseñadores web emplean las diferentes combinaciones de colores (en adelante denominaremos paleta de colores) para que sean el complemento del mensaje que los contenidos de la página.

La adecuación de la paleta de colores al mensaje que la página debe transmitir a sus usuarios es una de las claves del éxito de cualquier diseño. Los usuarios de internet dedican muy poco tiempo a decidir si se quedan o no en una página, por lo que esta primera impresión resulta fundamental.

¿Qué es el color?
Nuestro cerebro tiene la capacidad de recibir las señales que le envían los ojos, cuya función es recibir la luz que llega del entorno. Los diferentes materiales tienen la capacidad de reflejar y absorber diferentes colores (que en definitiva son diferentes longitudes de onda) y los reflejos de los materiales estimulan los terminales nerviosos de nuestros ojos que es lo que nuestro cerebro recibe.

Así por ejemplo, cuando un material no refleja ninguno de los colores, nosotros percibimos el color negro; por el contrario, cuando un material refleja todos o casi todos los colores, tenemos la percepción del color blanco. Cuando un cuerpo absorbe los colores rojos y azules, lo vemos de color verde; cuando un cuerpo absorbe los colores verdes y azules, lo vemos rojo. Los diferentes grados de reflexión de los colores de la luz por parte de los materiales son los que nos dan los diferentes matices.

Combinación de colores
Cuando un objeto o figura de un color dado se encuentra en contacto con otro objeto de color diferente, se produce lo que llamamos combinación de colores. En el diseño web, el contraste entre los diferentes colores empleados para decorar y los colores propios de las imágenes, resulta determinante a la hora de definir la estética de la página.

Las propiedades de los colores (luminosidad, valor, temperatura y saturación), hace que haya muchas variedades de colores y, por ende, muchas posibilidades de combinaciones y contrastes.

El contraste entre elementos con diferencias en la luminosidad de los colores, puede verse muy claramente en la combinación del color blanco con el negro, ya que estos son los extremos de la luminosidad. El contraste por luminosidad es uno de los más empleados en el diseño de páginas web, fundamentalmente en el destaque de los textos sobre el fondo sobre el que se colocan. En la siguiente figura, podremos apreciar combinación de colores cuya diferencia radica en la luminosidad.



También es posible emplear los demás tipos de contrastes de colores, como los contrastes por el valor, por la saturación, etc. Cuando el contraste se produce entre colores complementarios, las diferencias son muy nítidas, aunque las diferencias que se producen son extremas, lo que hace que debamos emplear este tipo de contraste de color con sumo cuidado, porque se pueden producir estridencias que pueden dar problemas estéticos importantes al diseño en su conjunto.

Hasta hace unos años, era frecuente encontrar diseños web en los que se empleaba una combinación de colores seleccionados de una paleta muy exigua, de apenas 256 colores, dada la tecnología que se empleaba para formar colores en los monitores. Con el avance tecnológico de los últimos años, esto se ha resuelto y los diferentes hardware y software pueden crear e interpretar una gama de colores de varios millones de ellos, lo que permite una gran libertad a los diseñadores web.

Ejemplos de utilización de colores
Las combinaciones que se pueden hacer entre los muchos colores para decorar la página y alentar a los posibles usuarios a quedarse en ella son muchas. Sin embargo, los estudios indican que a las personas les gustan ciertas combinaciones más que otras.

Así como en los restos de los elementos de una página web, el diseñador debe tener presente el tipo de público al que va dirigida la página para definir la combinación de colores que predominará en su página.

El ejemplo que sigue es sencillo de ver que se quiso dar una combinación tal que diera sensación de formalidad, elegancia y modernidad. La formalidad está dada en los colores por la falta de colores cálidos, que brindan por lo general, sensaciones más informales. La elegancia del blanco del encabezamiento y la tipografía. La modernidad está ejemplificada por el empleo del azul, que no es un azul opaco ni oscuro. Por el contrario, tiene una tendencia a ser brillante. Aquí también podemos ver que la combinación de colores empleados es de un contraste muy elevado, lo que permite destacar los contenidos escritos por encima de otros elementos, lo que nos indica claramente que el principal contenido de la página son sus textos.


Click on the image to view it in full size.

En la siguiente página, tiene una paleta de colores suaves y pastel, cuya finalidad es la de brindar a los visitantes una sensación de placidez, comodidad y familiaridad. Observemos la escasa cantidad de colores cálidos. Por el contrario, los colores empleados en abundancia son los azules claros y los verdes.


Click on the image to view it in full size.

Muy por el contrario, en la siguiente página podemos apreciar que casi la totalidad del diseño está dominado por uno de los colores cálidos: el naranja. Esta es una página de alto impacto visual. La intensión es sorprender (y vaya si lo logra) al visitante, dándole además un aspecto audaz, atrevido y trasgresor. El altísimo contraste hace que cada uno de los elementos componentes de la página se encuentren perfectamente definidos, haciendo muy sencilla su visibilidad.


Click on the image to view it in full size.

Como puede verse, la combinación de colores en la página web está íntimamente ligada a los fines que se persiguen con la misma y los efectos que se pretende ocasionar al visitante. De la elección de la paleta de colores y del buen uso que se haga de ella, depende en gran medida el éxito del diseño.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 11 | 2:50 PM
Seleccionar con distinto color mediante CSS

¿Alguna vez te has preguntado porqué algunas web tienen el “don” de poder seleccionar el texto de manera distinta, es decir, con otro color? Pues es muy fácil, ¡aquí tienes la solución!

Para seleccionar el texto con el color que queramos, solo tendremos que pegar este código CSS. Usaremos la propiedad moz-selection en Firefox:

Quote
p {
font-size: 1.5em;
margin-bottom: 2.2em;
}
p.rojo::selection {
background: #ffb7b7;
}
p.rojo::-moz-selection {
background: #ffb7b7;
}
p.azul::selection {
background: #a8d1ff;
}
p.azul::-moz-selection {
background: #a8d1ff;
}
p.amarillo::selection {
background: #fff2a8;
}
p.amarillo::-moz-selection {
background: #fff2a8;
}

Obviamente, los colores de selección del párrafo se pueden cambiar por lo que queramos.Después deberemos seguir esta estructura en nuestro documento HTML:

Quote

Texto de ejemplo.
Si lo seleccionas, el texto seleccionado se muestra en rojo


Texto de ejemplo.
Si lo seleccionas, el texto seleccionado se muestra en azul


Texto de ejemplo.
Si lo seleccionas, el texto seleccionado se muestra en amarillo.

Se puede ver un ejemplo en funcionamiento.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 12 | 3:11 PM
Selección de la paleta de colores para un diseño web

La selección de una adecuada paleta de colores para el diseño de una página web, puede ser factor decisivo en el éxito o el fracaso. Si bien es cierto que los colores y sus combinaciones dependen en cierta medida de la moda y de factores subjetivos, existen ciertas reglas elementales que deben conocerse. La combinación de colores intenta provocar una reacción emocional en el observador. No todas las personas tienen el mismo gusto por los colores, aunque es posible establecer una tendencia de acuerdo con el grupo social al que el posible usuario pertenece.

Dentro de la selección de los colores de una página, hay que tener en cuenta varios factores, como el tipo de página, la estructura del diseño y la temática de la misma. Cada uno de estos factores puede alterar sustancialmente los criterios para la selección. Como se podrán imaginar, la página de una empresa de seguros y otra de ventas de juguetes deben emplear combinaciones de colores basados en criterios muy diferentes. Otro factor a tener en cuenta es la armonía de los colores que se desea emplear. Los tipos de armonía son varios, y cada uno de ellos arroja resultados muy dispares.

Tipos de combinaciones de color
Las combinaciones del color ha sido motivo de investigación por parte de artistas y diseñadores por milenios. Desde las primitivas pinturas rupestres puede verse la preocupación de los artistas y diseñadores de todos los tiempos por armonizar y combinar los colores para lograr los efectos deseados en el observador.

Combinaciones monocromáticas
La primera y más sencilla de las combinaciones de color es la monocromática. En estas combinaciones las únicas variaciones están dadas por la luz. Si se toma un color base y se le agrega blanco o negro (que es la forma de agregar o quitar luz) en diferentes proporciones, se obtiene una gama del mismo color. Estas combinaciones pueden abarcar al blanco y el negro, dando una gama de grises, algo que es posible apreciar en algunas páginas web.

Las combinaciones monocromáticas empleadas en el diseño web, suelen emplearse en páginas en la que se busca un efecto de sobriedad y de elegancia. Evidentemente si lo que se pretende es llamar la atención de los usuarios, este tipo de combinaciones no son las indicadas. Se emplean en páginas en las que se desea provocar una sensación de tranquilidad y seriedad. Analicemos el ejemplo siguiente:


Click on the image to view it in full size.

Esta página corresponde a la edición digital de un periódico. La paleta de colores empleada tiene como base el color azul, cuyos matices pueden verse en el color de fondo, el encabezado, el menú y la tipografía. Posiblemente el motivo de la selección de esta combinación se deba a que se desea presentar un diseño sobrio (el ejemplo lo es en extremo) y elegante. Esto puede deberse a varios motivos. El primero es que posiblemente su público esté conformado por personas de mediana a avanzada edad y con tendencias más o menos conservadoras. Otro efecto conseguido con el establecimiento de una paleta de colores monocromática es que el contenido gráfico y textual adquiere una relevancia mucho mayor al no verse opacado por la coloración del diseño.

Combinación de colores análogos
Se denominan colores análogos a aquellos que, ubicados en la rueda de colores, se encuentran en lugares próximos. Este tipo de combinaciones se dan muy frecuentemente en ambientes naturales. Si se observa un bosque o una pradera, veremos que los colores que se combinan son amarillos, verdes y celestes, colores que se encuentran próximos en la rueda de colores.

Es frecuente encontrar este tipo de paleta de colores en páginas web destinadas a los productos naturales o se desea exaltar la vinculación de lo que se publica con los ambientes naturales. En el ejemplo siguiente, se utiliza una paleta de colores que incluye naranja, amarillo y verde como base (con diferentes grados de luminosidad) para dar un toque natural al estilo.


Click on the image to view it in full size.

Combinación de colores opuestos
Cuando lo que se desea generar es un alto impacto visual a través del color, una de las formas de lograrlo es utilizando una paleta de colores que incluya colores opuestos. Los colores opuestos son aquellos que se encuentran en oposición dentro de la rueda de colores, como por ejemplo rojo y celeste, verde y violeta, amarillo y azul. Estas combinaciones suelen emplearse en el diseño de carteles para la vía pública, dado que consiguen atrapar la atención de los usuarios de las mismas.

El siguiente es un ejemplo de utilización de colores opuestos en la paleta de una página web. En este sencillo pero llamativo diseño, se pretende atraer la atención del público hacia los contenidos con fuertes colores opuestos, además de distinguir claramente unos de otros gracias a que los colores opuestos también generan contraste.


Click on the image to view it in full size.

Otra forma de emplear los colores opuestos es hacer una tríada de colores, empleando dos colores complementarios y uno opuesto de forma que se obtiene las ventajas de ambos sistemas, aunque el impacto visual conseguido es algo menor que en el empleo de combinaciones de opuestos. Tal es el caso de la web que hemos tomado como ejemplo, donde la combinación incluye dos colores análogos, como el naranja y el amarillo, que se encuentran opuestos al verde, incluido en la paleta de colores de este sitio.


Click on the image to view it in full size.

Modelos de paletas de colores
A pesar de que las posibilidades de combinar los diferentes colores son casi infinitas, no todas las combinaciones resultan efectivas en su utilización en el diseño de páginas web. Existe una gran cantidad de paletas de colores cuya efectividad y atractivo se encuentran probados gracias a su uso.
Dentro de las posibilidades de aplicación del color, también se debe distinguir algunos elementos que son importantes. Por ejemplo, los colores pueden ser tomados tal como se encuentran en el círculo de colores, dando como resultado una combinación de colores vivos muy llamativos. Sin embargo, también es posible emplear matices con variaciones en la luminosidad, dando colores pasteles o apagados.

Otras formas de combinación emplean el blanco y el negro, ya que ambos colores se combinan con mucha facilidad con cualquiera de los demás colores. Esta facilidad de combinación del blanco y el negro ha hecho que sean incluidos en la mayoría de las paletas de colores.
A continuación, les mostramos algunos ejemplos de paletas de colores de las muchas posibles, aunque animamos a la experimentación como método de obtener las paletas adecuadas para el sitio web que se encuentra en creación:


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 13 | 6:21 PM
Elección de una buena paleta de colores para tu web

La parte más complicada del diseño de un interfaz de usuario es conseguir un interfaz que se atractivo y útil para la gran mayoría de los usuarios, lo más importante es llegar a conectar con el usuario y la mejor manera es ofrecerle la mayor cantidad de información posible para que se llegue a sentir parte del proyecto pero todo esto muchas veces no lo llegamos a conseguir por una mala elección en la combinación de los colores que se integran en nuestra interfaz.

Debemos tener en cuenta que el usuario lo primero que percibirá serán los colores antes que la tipografía, botones o imágenes que estén en nuestra página, por eso debemos ser especialmente cuidadosos con la elección de la paleta de colores]/b] que será la base de todos los elementos de nuestra página.

[b]Elegir una Paleta de Colores
Para hacer una buena elección de los colores que vamos a incluir en la paleta debemos tener unas nociones básicas de la “teoría básica del color”, en HTML qué es lo que nos interesa a nosotros la paleta de colores RGB se compone de tres colores primarios: Rojo, Verde y Azul, estos colores primarios están representados según el siguiente formato: #RRGGBB (ROJO, VERDE, AZUL).

Los valores que puede adoptar cada uno de los tres colores primarios van de 0 a 255 (en decimal) y las combinaciones cómo te puedes imaginar son múltiples, por ello estamos ante una gran cantidad de combinaciones de colores lo que nos dificulta la elección a la hora de trabajar, pero cómo en casi todo en la vida podemos agarrarnos a unas reglas en este caso son reglas simples de armonía de color lo que nos va servir de gran ayuda para crear la paleta de colores.

Los esquemas de color más comunes de utilizar son monocromos, análogos, complementarios, división complementaria y triada en inglés (monochrome, analog, complementary, split complementary and triad). Los nombres en inglés nos sirven para utilizar esta magnífica herramienta web en la que conseguir los esquemas de colores deseados.

Yafla Color (Selección de colores)

Bueno vamos a tratar de explicar el funcionamiento de cada uno de los esquemas de color y cómo conseguirlos en la herramienta web ofrecida.

Monocromo
Un esquema de color monocromo usa un color con modificaciones de brillo, si tuviéramos por ejemplo el color rojo utilizariamos colores con mucha luz roja sin llegar a utilizar el blanco y colores rojos muy oscuros sin llegar al negro.

En la herramienta web que hemos citado anteriormente estos esquemas corresponderían a los dos laterales.

Análogo
Se utilizan tres colores para la composición de este esquema estos colores serán los colores adyacentes a los elegidos en una hipotética rueda de color del mismo. Por ejemplo si tuviéramos cómo base un color salmón estos serían nuestros colores.

En la herramienta web que hemos citado anteriormente los colores serían (selected color, analog -30 y analog +30).

Complementario
En este esquema utilizaríamos dos colores que serían el color elegido y su opuesto en la rueda de color, el motivo del uso de estos colores es para mantener un buen equilibrio en el diseño final. Por ejemplo si elegimos el color azul tendriamos cómo complementario el color amarillo, lo que se podía ver como una representación del frío y del calor.

En la herramienta web que hemos citado anteriormente los colores serían (selected color y complementary).

División Complementaria
En los esquemas de división complementaria se utiliza dos colores opuestos de cada cara de lo colores complementarios del color elegido, de esta manera podemos conseguir un contraste suave.

En la herramienta web que hemos citado anteriormente los colores serían (selected color, Split.Comp -150 y Split.Comp +150).

Trial
En este esquema de color utilizaremos tres colores que estan en posiciones equidistantes en la rueda de color. Conseguiremos un nivel alto de contraste en nuestro diseño final.

En la herramienta web que hemos citado anteriormente los colores serían (selected color, Triad Color -120y Triad Color +120).

Conclusión
Bueno, espero que estos ejemplos de colores para una interfaz de usuario con cada uno de los esquemas de colores explicados os sirvan de utilidad, ahora sólo tienes que elegir cual es el esquema de color que deseas aplicar y cual es el color elegido, si quieres tener una apariencia “Web 2.0″ prueba a ver estos colores que son un buen repertorio de colores “2.0″ que no deben faltar en tu hoja de estilos (divididos en tres categorías).




Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Violinista
Mensajes: 104
Reputación: 3
Mensaje Nº 14 | 9:36 AM
esto es exelente, me servira sin duda
Para escritores nobeles mirar aquí: http://skare.at.ua/
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 15 | 2:35 PM
Una función para crear gradientes en Flash
Gradientes en Flash
Usando flash.geom y el método beginGradientFill es posible crear gradientes de manera muy sencilla

Este ejemplo muestra cómo rellenar un movieClip con un gradiente entre 2 colores usando el método beginGradientFill:

El código utilizado es el siguiente:

Quote
import flash.geom.*;
function gradiente(color1,color2,obj,ancho,alto,tipo){
var fillType:String = "linear"
var colors:Array = [color1,color2];
var alphas:Array = [100, 100];
var ratios:Array = [0, 255];
var matrix:Matrix = new Matrix();
var r=tipo?0:1.57;
matrix.createGradientBox(ancho, alto, r, 0, 0);
var spreadMethod:String = "pad";
obj.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);
with(obj){
moveTo(0, 0);
lineTo(ancho, 0);
lineTo(ancho, alto);
lineTo(0, alto);
lineTo(0, 0);
endFill();
}
}
var pp=this.createEmptyMovieClip('pp',this.getNextHighestDepth());
var pp2=this.createEmptyMovieClip('pp2',this.getNextHighestDepth());
gradiente(0xFF0000,0xFFFF00,pp,400,100,0);
pp2._y=102;
gradiente(0xFF0000,0xFFFF00,pp2,400,100,1);

Como vemos, quien hace todo el trabajo es la función gradiente, la cual requiere los siguientes argumentos:

  • color1, color2: colores desde y hasta del gradiente
  • obj: clip a rellenar
  • ancho, alto: dimensiones del relleno
  • tipo: 0=vertical, 1=horizontal
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Colores (y todo relacionado con éstos)
    • Página 1 de 2
    • 1
    • 2
    • »
    Búscar: