Color & Diseño web

Color

El color es tanto un fenómeno físico como una percepción. Como fenómeno físico es una pequeña porción visible del espectro electromagnético. La luz visible tiene una longitud de onda de 400 a 700 nanómetros. Diferentes longitudes de onda corresponden a diferentes colores del arcoíris. Longitud de onda Color 610-700 nm Rojo 480-610 nm Verde 450-480 nm Azul Si se combinan equitativamente las tres longitudes de onda surge el blanco. De otra manera la ausencia total de luz es el negro. Cuando la luz golpea la retina del ojo, esta puede estimular tres tipos de conos, que perciben el color: Unos para el rojo, otros para el verde y otros para el azul. En los rangos límites de un color y otro se ubican las combinaciones de ellos. del azul al verde se encuentra el rango del amarilllo por ejemplo. El ojo humano es más sensible al rango de verde y mucho menos al rango de azul. La mayoría de las luces y colores en la vida real son una mezcla de las tres longitudes de onda. De acuerdo a la cantidad que haya de cada rango, el cerebro interpreta la mezcla final como un color determinado. La manera en que el cerebro percibe el color se explica a través de la teoría del triestímulo. Basado en que físicamente existen tres tipos de conos, se concluye que cuando los tres perciban iguales cantidades de luz, el cerebro interpretará esta mezcla como luz blanca. Modelos del color. Una persona normal puede percibir alrededor de 1 a 2 millones de colores, por lo cual es prácticamente imposible describir un color específico sin utilizar un modelo de color. Un modelo de color es un sistema de representación para describir un color más precisamente de lo que podría hacerse con nombres y adjetivos.

Existen cuatro modelos de color útiles para el diseño web: 1. RYB: Red-Yellow-Blue. P al en se 2. RGB: Red-Green-Blue. El modelo RGB describe a los colores como una mezcla de rojo, verde y azul. Es un modelo de color aditivo, en donde mezclar dos colores da uno más brillante. Por ello este tipo de modelos se usan para describir colores que emanan de cuerpos fluorescentes como luces, televisores. y monitores de computadora. rimer modelo de color creado en 1613 por Francis Aguilon. Define como colores primarios rojo, amarillo y azul. Isaac Newton los ordena un patrón circular. Este modelo de color aun utiliza por artistas para crear esquemas de color.

Al mezclar los tres rayos de color primarios se obtienen en sus superposiciones de dos colores el cyan, amarillo y magenta. Donde se superponen los tres se forma el blanco, y donde no hay luz, está el negro. Por su propia naturaleza lo que se vea en un monitor depende de la luz del cuarto en el que se vea. En un cuarto oscuro, los colores serán más vivos y por ende sus cambios más ligeros serán notables, mientras que en un cuarto bien iluminado sucederá lo contrario. Este modelo de color tiene algunas variantes en cuanto a los valores numéricos que tiene. En algunas aplicaciones sus valores van del 0 al 255. En otras, se expresa como un porcentaje.

3. CMYK: Cyan-Magenta-Yellow-blacK. Modelo de color diseñado para los objetos que reflejan la luz. Es sistema de color sustractivo en el que la mezcla de dos colores da un tercero más obscuro. Esta es el área de la pintura y la tinta para impresión. Así la mezcla de dos de los colores primarios da el azul, verde o rojo y los tres superpuestos dan un gris oscuro como resultado en vez del negro que teóricamente debería resultar. Para obtener el negro se debe de imprimir con tinta negra. Este modelo de color es el utilizado por las impresoras de color, llamado impresión a cuatro colores. Cuando se imprime una imagen a color, ciertos controladores convierten los valores RGB de la imagen a otros CMYK para poder imprimirla.

4. HSB: Hue-Saturation-Brightness. Es el sistema más parecido a los tradicionales basados en pintura. Matiz es el nombre del color (rojo, azul, naranja) que se presentan en un arreglo circular, donde cada color tiene un valor entre 0 y 360. La saturación se refiere a la pureza del color. Un color puro sin mezclarse con otro, es un color totalmente saturado. Al contrario, un color pálido incluye gran cantidad de blanco mezclado por lo que está pobremente saturado. La saturación tiene valores de porcentaje. El blanco, los grises y el negro tienen saturación cero. El brillo describe el tono del color en una escala que va de blanco a negro, siendo el blanco el máximo brillo. Al igual que la saturación sus valores van del 0 al 100%. Relacionando las tres variables resulta que a menor brillo, hay un menor rango de saturación y el matiz se vuelve más pequeño. Esto se debe a que los humanos somos menos capaces de percibir diferencias de matiz y saturación en los colores oscuros. Comparando los cuatro modelos

El modelo RGB está orientado al hardware, debido a que los puntos de un monitor brillan en colores rojo azul y verde. De manera similar el modelo CMYK está pensado a la tecnología porque describe los colores de la tinta. El objetivo de crear el sistema HSB y otros similares fue obtener una manera de describir los colores fácilmente. Tanto en RGB como en CMYK es muy difícil para el cliente reconocer un color en términos numéricos, por lo que era frustrante conseguir un color determinado sin la ayuda de algún asistente. En cambio el sistema HSB es más cercano a las descripciones que hacen los clientes. Cada sistema de colores tiene una gama o rango de expresión de colores, pues no todos los colores pueden ser expresados en todos los modelos de color. CMYK tiene una gama de colores más pequeña que el RGB o el HSB, provocando que no pueda reproducir colores con alta saturación y brillo. Esto se comprueba con algunos colores brillantes en la pantalla que al imprimirse resultan en un tono más oscuro, pues el color esta fuera de la gama CMYK Esquemas de armonía de color. Un esquema de c olores efectivo puede aumentar considerablemente el atractivo de un sitio web. Los esquemas de armonía de color son combinaciones de colores que suelen ser agradables. Existen cuatro esquemas de armonía de color:

1. 2. 3. 4.

Monocromático. Complementario. Análogos. Triádico.

Cada uno de ellos tiene una metodología sistemática para escoger los colores que combinan efectivamente.Los esquemas de color se basan en las mezclas entre colores primarios según la posición que tienen en la rueda de color. De las mezclas surgen colores secundarios y terciarios, duplicándose cada vez. Los 12 colores resultantes pueden considerarse calientes o fríos. Lo calientes son los colores del sol (amarillo, naranja y rojo) y los colores de los cuerpos de agua (lagos, océanos) son fríos (verde y azul). Esquema Monocromático. En el esquema monocromático todos los colores tienen el mismo matiz, variando únicamente en saturación y brillo. Además aumenta el sentido de uniformidad en el diseño general de una página web. Es posible crear páginas atractivas usando pocos tonos. http://www.iusacell.com.mx/

http://www.u3.com/smart/default.aspx http://portableapps.com/apps Esquema Complementario.

Usa un par de matices complementarios. Dos colores son complementarios si están opuestos en la rueda de color. Los colores de un esquema complementario pueden tener cualquier saturación o brillo, siempre y cuando pertenezcan a uno de los dos matices. De los dos matices uno debe de ser el dominante, que debe de llenar áreas grandes de la interfaz y el otro se debe usar para resaltar pequeñas áreas. http://www.pan.org.mx/ http://www.pemex.com/ http://www.presidencia.gob.mx/

Esquema Análogo

Dos o más colores cuyos matices están cerca en la rueda de color. Los esquemas análogos asemejan los esquemas de colores encontrados en la naturaleza, como el pasto, el pelaje de un animal o una puesta de sol. Las combinaciones de color en un esquema análogo son más interesantes si los colores no tienen la misma saturación y brillo. http://selenguolatraba.com/

http://www.nokia.fr/ http://www.movistar.com.mx/ Esquema Triádico Triada: Los tres colores que lo componen están dispuestos más o menos a la misma distancia en la rueda de color. Este esquema usa colores cuyos matices forman una triada. Por ello ofrece una amplia variedad al elegir colores y puede provocar emoción, sin embargo, puede volverse tan fuerte que interfiera con la comunicación textual de la página. Una forma de evitarlo es elegir colores que varíen en saturación y brillo. http://a.viary.com/home

Se recomienda limitar el número de colores para texto y fondo a siete, además del blanco y negro. Todos los esquemas de color pueden ser de utilidad en situaciones en las que un cliente tiene ciertas especificaciones sobre el uso de colores, como por ejemplo. • • Cuando el cliente quiere que el color de su logo predomine en el sitio. Universidades que prefieren que la página inicial y el subsitio administrativo tengan los colores institucionales.

En estos casos, una vez conocidos los colores que se deben usar, un esquema de armonía de color ayudan a elegir que otros colores que se verán bien. De la misma manera cuando se tiene control total en el sitio, los esquemas de color ayudan a darle un mejor acabado y profesionalismo al mismo. Color en el Texto y en el Fondo. Para permitir que el texto sea legible, los colores deben de proveer comodidad y velocidad al leer. En general se debe buscar un gran contraste entre los colores de texto y fondo. Las mejores opciones son el texto negro con fondo blanco o gris claro. El texto oscuro en un fondo claro es mejor al texto claro en fondo oscuro, por ello se recomienda usar texto oscuro en un fondo blanco o algún otro que como en los ejemplos anteriores, tenga alto brillo y baja saturación.

Del otro lado están las combinaciones menos efectivas: aquellas que de acuerdo al sistema RGB varían únicamente en la cantidad de azul, como el amarillo y el blanco. Esto se debe a la poca sensibilidad del ojo humano al espectro de luz azul. En cuanto al contraste es mejor no usar combinaciones muy brillantes y saturadas como el rojo-verde, rojo-azul, magenta-cyan, pues provocan cansancio visual. http://www.havenworks.com/ El color como organizador y atractor de atención. Los colores pueden ayudar a organizar visualmente una página web. Basados en el principio de proximidad de la psicología Gestalt, los colores pueden dividir los niveles de navegación. http://a.viary.com/halloffame http://www.glittergraphicsnow.com/es/ De la misma manera los colores pueden organizar la página en distintas áreas, diferenciando la barra de navegación, los titulares y la información general. De esta forma se da mayor estructura al sitio. http://www.ciudaddelasideas.com/ http://www.softonic.com/ Otra manera de usar los colores es para llamar la atención del usuario. Los colores brillantes y saturados también pueden llamar la atención. En la vida real un rojo saturado puede dar signos de peligro o el naranja de los signos de tráfico permite que los conductores vean fácilmente los señalamientos. De la misma manera en un sitio los colores brillantes y saturados compiten por la atención del usuario y deben ser usados con moderación. Se recomienda aplicarlos a pequeñas áreas de la pantalla http://free.avg.com/ http://pixlr.com/ Conclusión. 1. Los colores generalmente deben ajustarse a las elecciones del cliente y las armonías de color dan opciones para elegir colores que son compatibles con los deseados por el cliente. 2. Usar colores adecuados para texto y fondo mejorará la legibilidad. 3. Usar el color para organizar el texto y centrar la atención del usuario resultará en una mejor navegación.

4. Bien usado, el color mejora tanto la usabilidad como el atractivo de un sitio.

Sign up to vote on this title
UsefulNot useful