Consejos para Desarrollar Sitios Webs Usables..

1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario.

2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito.

3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total).

4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.

5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas.

6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas

7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón esta en función de la distancia y el tamaño del objetivo. A menor distancia y mayor tamaño más fácilidad para usar un mecanismo de interacción.

8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario, permitiendo la realización de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalización de la tarea.

9. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.

10. El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje.

11. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error.

12. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande.

13. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida.

14. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.

Otros principios para el diseño de sitios web son:

a) Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo esfuerzo y unos resultados máximos.

b) Un sitio web no ha de tratar al usuario de manera hostil. Cuando el usuario comete un error el sistema ha de solucionar el problema, o en su defecto sugerir varias soluciones posibles, pero no emitir respuestas que meramente informen del error culpando al usuario.

c) En ningún caso un sitio web puede venirse abajo o producir un resultado inesperado. Por ejemplo no deben existir enlaces rotos.

d) Un sitio web debe ajustarse a los usuarios. La libertad en el uso de un sitio web es un término peligroso, cuanto mayor sea el número de acciones que un usuario pueda realizar, mayor es la probabilidad que cometa un error. Limitando el número de acciones al público objetivo se facilita el uso de un sitio web.

e) Los usuarios no deben sufrir sobrecarga de información. Cuando un usuario visita un sitio web y no sabe donde comenzar a leer, existe sobrecarga de información.

f) Un sitio web debe ser consistente en todos los pasos del proceso. Aunque pueda parecer apropiado que diferentes áreas tengan diseños diferentes, la consistencia entre los diseños facilita al usuario el uso de un sitio.

g) Un sitio web debe proveer de un feedback a los usuarios, de manera que éstos siempre conozcan y comprendan lo que sucede en todos los pasos del proceso.

fuente.desarrolloweb

Las tipografías en las páginas web

La misión principal de una composición gráfica es transmitir un mensaje determinado a los espectadores que la visualizan. Para ello, el diseñador dispone de dos herramientas principales: las imágenes y los contenidos textuales.

Las imágenes o contenidos gráficos aportan sin duda un aspecto visual muy importante a toda composición, siendo capaces de transmitir por sí solos un mensaje de forma adecuada. Ahora bien, el mejor medio de transmisión de ideas a un gran número de personas es por excelencia la palabra escrita, lo que hace que los contenidos textuales en una composición sean tanto más importantes cuanta más información se desea transmitir.

La esencia del buen diseño gráfico consiste pues en comunicar ideas por medio de la palabra escrita, combinada a menudo con dibujos o con fotografías.

Las representaciones visuales de los contenidos textuales son básicamente las letras, elementos formadores de los abecedarios de los diferentes idiomas. Con las letras se forman palabras, con las palabras frases, y con las frases se representan ideas y conceptos.

Además de su componente significativo, cada letra de una palabra es por sí misma un elemento gráfico, que aporta riqueza a la composición final. Por este motivo, el aspecto visual de cada una de las letras que forman los textos de una composición gráfica o una página web es muy importante, interviniendo en los mismos conceptos similares a los que caracterizan cualquier otro componente gráfico: forma, tamaño, color, escala, etc.

De este planteamiento se deriva que el diseñador gráfico debe emplear las letras en una composición tanto para comunicar ideas como para configurar el aspecto visual de la misma, siendo necesario para ello conocer a fondo los diferentes tipos existentes y sus propiedades, conocimientos que se agrupan en la ciencia o arte de la Tipografía.

Se denomina Tipografía al estudio, diseño y clasificación de los tipos (letras) y las fuentes (familias de letras con características comunes), así como al diseño de caracteres unificados por propiedades visuales uniformes, mientras que las técnicas destinadas al tratamiento tipográfico y a medir los diferentes textos son conocidas con el nombre de Tipometría.

Tradicionalmente el estudio de las letras, sus familias y sus tipos ha sido desarrollado por los impresores y, más modernamente, por diseñadores gráficos que realizan trabajos para ser luego impresos. Pero con la aparición de los ordenadores y de Internet ha sido necesario un replanteamiento de la Tipografía clásica, puesto que las fuentes que trabajan bien en imprenta no se adaptan correctamente al trabajo en un monitor de ordenador.

fuente.

Usabilidad y Analítica Web

¿Qué es la analítica Web?

La analítica Web consiste en grabar y analizar los datos de navegación de los usuarios en un sitio Web. En un primer momento, se utilizaban los datos grabados en los logs de los servidores. Actualmente, la mayoría de las herramientas de analítica Web funcionan mediante un código javascript que se inserta en el pie de página, y que recoge los datos que nos interesen para enviarlos a una base de datos que posteriormente podremos consultar.

¿Qué mide la analítica Web?

Las principales medidas (métricas) de cualquier herramienta de analítica Web son:

•Páginas vistas.

•Usuarios Únicos.

•Visitas.

•Tiempo de navegación.

Otros datos que manejan algunas herramientas de analítica Web son:

•datos de clicks (“clickstream”) que permiten reconstruir las rutas de navegación de los usuarios así como dibujar “mapas de calor” sobre una página, mostrando los elementos con más clicks.

•euros (por ejemplo, en un sitio de comercio electrónico, el importe de una compra; en un sitio de contenido, el valor de un click en un anuncio o de la impresión de un banner).

•orígenes del tráfico: es decir, los sitios Web que nos envían visitas, así como las palabras clave que los usuarios utilizan en los buscadores para llegar a nuestra Web.

•páginas de entrada: es decir, la página por la que un usuario entra en nuestro sitio.

•páginas de salida: es decir, la página desde la cual un usuario abandona nuestro sitio.

•eventos del sitio Web: por ejemplo, número de usuarios que se registran para recibir un newsletter, número de usuarios que hacen una búsqueda, número de formularios enviados, etc.

•abandono de formularios: número de veces que un formulario se empieza a rellenar y se abandona, así como el campo en el que se abandona el formulario.

Si le interesa profundizar en el tema de la analítica Web en general, como por ejemplo un interesante glosario de términos de analítica Web (en inglés) elaborado por la Web Analytics Association, cuya página Web es por supuesto de consulta indispensable.

Analítica Web y Usabilidad

Existen muchas técnicas y procedimientos que nos permiten aprovechar los datos recolectados por una herramienta de analítica Web a fin de mejorar la usabilidad de un sitio Web. Nos centraremos en los siguientes puntos:

•ClickMap.

•A/B Testing.

•Análisis de formularios.

•Rutas de navegación.

ClickMap

El “clickmap” (mapa de clics) es aparentemente parecido a los mapas de calor del 2eye tracking”, pero en lugar de mostrarnos dónde miran los usuarios, nos muestra dónde hacen clic los usuarios.

Algunas versiones del “clickmap” sólo muestran datos de clics en las zonas clicables (links, botones), como es al caso de la funcionalidad llamada “site overlay” de Google Analytics.

Otras herramientas como Clickdensity, sin embargo, son capaces de mostrar datos de clic en cualquier zona de la pantalla, independientemente de si tiene un link o no (os recomiendo que probéis la demo de Clickdensity, vale la pena)

Finalmente, herramientas como Omniture SiteCatalyst pueden mostrar los ingresos que genera cada clic en cada elemento de la página.
Además, es capaz de mostrar datos en tiempo real.

La utilidad del mapa de clics es evidente: de un vistazo, podemos ver dónde clican los usuarios en una pantalla determinada, y rápidamente actuar para mejorarla en tres aspectos principales:

•Visibilidad y posicionamiento de links y botones de la página.

•Elementos de la página que confunden al usuario: aquellas zonas de la página en donde hay muchos clics, a pesar de que no son clicables.

•Elementos de la página más “rentables”: no está directamente relacionado con la usabilidad, pero normalmente querremos dar más visibilidad a aquellos elementos más rentables, así como investigar por qué ciertos elementos de la página no son tan rentables como esperaríamos.

A/B Testing

El A/B Testing es de utilidad cuando dudamos entre dos diseños para una misma página. Lo que haremos es colocar ambas versiones de la página en el servidor, y utilizar una herramienta de analítica como Omniture SiteCatalyst o Google Optimizer para comparar los resultados de ambas páginas. Por ejemplo, podremos comparar:

•Ratios de conversión del objetivo de la página: por ejemplo, si el objetivo de la página es que el usuario rellene un formulario, compararemos el número de usuarios que rellenan el formulario en cada versión de la página.

•Ratio de abandono: si el objetivo de la página es invitar al usuario a moverse por el sitio Web, podremos comparar los ratios de abandono de las dos versiones de la página.

Así mismo, el A/B Testing lo podemos utilizar para comparar el resultado de una misma página en periodos de tiempo distintos, por ejemplo:

antes de aplicar un rediseño a la página.

•el día después de subir la página rediseñada.

•una semana después.

•un mes después.

Podremos así sacar conclusiones acerca de:

•El éxito o fracaso del rediseño, según si se cumplen mejor o peor los objetivos de la página

•El tiempo de aprendizaje de los usuarios: ¿cuánto tiempo tardan los usuarios en adaptarse a un nuevo diseño de página?

Análisis de formularios

El análisis de formularios consiste en analizar el número de veces que los usuarios dejan de rellenar un formulario en un campo concreto.
Por ejemplo, una Web para la que trabajé descubrió que, en el formulario de introducción de los datos de la tarjeta de crédito, un 0,2% de los usuarios dejaban de rellenar el formulario en el momento en que se les pedía marcar la casilla para suscribirse al newsletter de la empresa. No era obligatorio, pero lo parecía, y lo más grave es que los usuarios ya habían introducido los datos de su tarjeta de crédito (es decir, habíamos logrado convencerlos para comprar), y sin embargo abandonaban.

Es muy difícil detectar este tipo de cosas en un test de usuarios, puesto que afectan a un porcentaje de usuarios muy pequeño (a pesar de que en el ejemplo anterior, un 0.2% significaba una media de 3 compras menos por día, es decir unos 6000 euros al mes, cantidad nada despreciable)
Así mismo, el análisis de formularios permite detectar fallos en:

•el vocabulario que utilizamos para definir ciertos campos.

•las validaciones automáticas de los campos (que a veces no son válidas para todos los países, por ejemplo el formato del NIF o la longitud de un número de teléfono)

•los campos innecesarios o que incomodan al usuario, etc.

Rutas de navegación

Los reportes de “clickstream” son quizás el elemento más potente de herramientas de analítica Web avanzada como Omniture SiteCatalyst o Visual Sciences. Permite responder a preguntas como por ejemplo:

•¿Por qué páginas navegan los usuarios, y en qué orden?

•¿Qué páginas visitan los usuarios dadas una página inicial y una página final determinadas?

•¿En cada paso de un proceso de compra o de registro, cuántos usuarios pasan al siguiente paso, cuántos vuelven al paso anterior o cuántos abandonan? ¿Los que abandonan, a dónde van?

•¿Qué rutas llevan a una página determinada?

•¿Cuáles son las 5 rutas que realizan el 90% de los usuarios de mi sitio Web?

Ejemplo de reporte de rutas de navegación de Omniture SiteCatalyst.

Estos reportes son muy útiles para analizar qué realizan los usuarios en nuestro sitio Web y, quizás más importante todavía, qué no son capaces de realizar (seguramente debido a que la página no es usable).

Así mismo, nos ayudan a definir la arquitectura de la información y el esquema de navegación del sitio Web basándonos en la experiencia y preferencias de navegación de los usuarios.

Otras técnicas de analítica Web

Existen muchas otras técnicas de analítica Web que nos permiten mejorar la usabilidad de un sitio Web. A continuación menciono algunas, que en otros artículos comentaré en detalle:

•Análisis de “bounce rate”.

•Análisis de resultados de búsqueda.

•Segmentación de tascas y usuarios.

•Satisfacción de los usuarios.

Especialmente importante es la segmentación de tascas y usuarios, que permite agrupar a los usuarios según las tascas que realizan en el sitio Web, para después ofrecer contenidos e interfaces adaptados a cada perfil.

Conclusiones:

Espero haber contribuido a convenceros de que la analítica Web puede y debe jugar un papel muy importante en la mejora de la usabilidad de los sitios Web. Destacaría tres ventajas principales:

•Trabajar directamente con gran cantidad de datos de todos los usuarios del sitio Web nos permite detectar problemas de usabilidad muy específicos.

•Es muy fácil testear una mejora de usabilidad, así como demostrar el éxito o fracaso de un cambio de diseño (factor muy a tener en cuenta a la hora de convencer a quien toma las decisiones de que es necesario invertir en diseño o estudios de usabilidad).

•En un mercado en donde las aplicaciones Web cada vez disponen de menos tiempo en pre-producción, la analítica Web es indispensable para optimizar y mejorar todo sitio Web.

fuente.desarrolloweb

Que Fuentes Usar para Mejorar la Lectura y Usabilidad Web

Hay muchos factores que afectan a la usabilidad de un sitio Web. Uno de ellos son las fuentesde lectura. Continúe leyendo y averígüe lo que puede hacer mediante las fuentes para atraer usuarios…

Para hacer los sitios notables para los usuarios, los propietarios de los sitios deben hacer un uso atractivo de diseño y contenido funcional. El uso de fuentes es uno de los factores que pueden atraer o alejar a los visitantes a un sitio Web. Buenas fuentes son importantes porque tiene un efecto en los usuarios de lo rápido que pueden leer todo el contenido que está presente en la pantalla del ordenador.

Las Fuentes se utilizan para hacer la mayoría de los elementos de la página Web, tales como barras de navegación, botones, links, y los menús. Es el texto el que expresa la mayoría de los contenidos del sitio Web.

En la actualidad, las fuentes que se utilizan comúnmente en la Internet son Times New Roman, un tipo serif, y la Arial, una fuente sans serif. El borde principal de serif es que es más cómodo para leerlo en papel, ya que las serifas ayudan a la individualización de cada letra. Sin embargo, esta ventaja puede ser inutilizada cuando las fuentes se ven en las pantallas del ordenador, ya que factores como la resolución de la pantalla pueden afectar a la claridad de los textos.

Entonces, ¿cómo influyen las fuentes de usabilidad y legibilidad global de un sitio Web?

Hay dos categorías principales de los rostros de fuente:

1. Serif

Estas son fuentes que contienen pequeños apéndices en la parte superior e inferior de una carta. Ejemplos de ello son Times New Roman, Century, Bookman y Courier. Estas son las que se deben utilizar cuando la pagina lleva grandes cantidades de texto.

2. Sans-serif

Estas fuentes tienen sólo trazos de línea primaria, y poseen una forma más simple. Ejemplos de estas fuentes son Futura, Helvética, y Arial. Suelen ser utilizada para frases cortas.

Estilo de fuente se refiere a la utilización de elementos tales como cursiva, subrayado, negrita para dar mejor atención a los contenidos de una página. No se recomienda utilizar subrayado en las páginas Web, ya que la mayoría de los usuarios están acostumbrados a asociar el subrayado con los enlaces. Negrita se debe utilizar en forma estratégica. También mucho uso de negrita puede ser una distracción de los contenidos, puesto que son muy visibles. La cursiva no es muy legible en la pantalla, deben ser utilizadas con poca frecuencia, únicamente para dar énfasis y definiciones.

Evite el uso de tamaños de fuente absolutos. Si lo hace, puede dificultar a los usuarios la posibilidad de ajustar el tamaño del texto para ir junto con los detalles de los dispositivos de visualización que están utilizando. Se recomienda que los usuarios puedan manipular el tamaño de los textos, sobre todo si se planea mantener las páginas Web con poco contenido.

Elegir colores de la fuente debe hacerse con cuidado, se debe maximizar la legibilidad del texto en contraste con el fondo de la página, mientras que lo distingue de los colores utilizados para los enlaces. Para los fondos claros, se deben utilizar tipos de letra en negro, azul oscuro, verde, marrón oscuro. Si el fondo está oscuro, las fuentes en naranja blanco, verde pálido, debe ser utilizado. Si es posible, utilice sólo uno o dos colores en una página, con exclusión de los colores de las páginas de enlace.

Hay imágenes que se parecen a las fuentes. Evite el uso de ellos. Hay varias razones por las que no se debe utilizar. Jpg o. Imágenes GIF para adquirir los efectos especiales. En primer lugar, las imágenes toman mucho tiempo para descargar, y cuando aparece, la calidad no es la misma que la de un texto elaborado por los navegadores. En segundo lugar, por lo general hay un problema al cambiar el tamaño de las imágenes. Se dice que las fuentes Sans Serif se deben utilizar para el estándar y superior-de-los diseño del sitio Web en línea, específicamente la Arial y la Verdana. Se recomienda utilizar la misma fuente a través de una página, pero los tamaños de titulares pueden ser agregadas y los subtítulos se pueden escribir en forma enérgica para prevenir la monotonía. Una vez más, es preferible dar a los usuarios la capacidad de controlar el tamaño de los textos, ya que algunos de los usuarios pueden tener algún tipo de problema visual.

Algunos estudios muestran que las fuentes que son más pequeñas de 10 puntos se hacen más lenta la reacción de los usuarios. Es recomendable utilizar fuentes de por lo menos 12 o 14 puntos de tamaño cuando se trata de personas mayores de 65 años de edad.

fuente.articulosinformativos

Tabla de Colores para las Webs en Hexadecimal

Tabla de Colores para las Webs en Hexadecimal

Nombre Hexadecimal RGB Muestra
R G B
aliceblue #F0FAFF 240 250 255 ____________________
antiquewhite #FAEBD7 250 235 215 ____________________
aqua #00FFFF 0 255 255 ____________________
aguamarina #7FFFD4 127 255 212 ____________________
azulado #F0FFFF 240 255 255 ____________________
beige #F5F5DC 245 245 220 ____________________
bIsque #FFE4C4 255 228 196 ____________________
black #000000 0 0 0 ____________________
blanchedalmond #FFEBCD 255 235 205 ____________________
blue #0000FF 0 0 255 ____________________
blueviolet #8A2BE2 138 43 226 ____________________
brown #A52A2A 165 42 42 ____________________
burlywood #DEB887 222 184 135 ____________________
cadetblue #5F9EA0 95 158 160 ____________________
chartreuse #7FFF00 127 255 0 ____________________
coral #FF7F50 255 127 80 ____________________
cornflowerblue #6495ED 100 149 237 ____________________
cornsilk #FFF8DC 127 255 0 ____________________
crimson #DC143C 127 255 0 ____________________
cyan #00FFFF 127 255 0 ____________________
darkblue #00008B 127 255 0 ____________________
darkcyan #008B8B 127 255 0 ____________________
darkgoldenrod #B8860B 127 255 0 ____________________
darkgray #A9A9A9 127 255 0 ____________________
darkgreen #006400 127 255 0 ____________________
darkkhaki #BDB76B 127 255 0 ____________________
darkmagenta #8B008B 127 255 0 ____________________
darkolivegreen #556B2F 127 255 0 ____________________
darkorange #FF8C00 127 255 0 ____________________
darkorchid #9932CC 127 255 0 ____________________
darkred #8B0000 127 255 0 ____________________
darksalmon #E9967A 127 255 0 ____________________
darkseagreen #8FBC8F 127 255 0 ____________________
darkslateblue #483D8B 127 255 0 ____________________
darkslategray #2F4F4F 127 255 0 ____________________
darkturquoise #00CED1 0 206 209 ____________________
darkviolet #9400D3 148 0 211 ____________________
deeppink #FF1493 255 20 147 ____________________
deepskyblue #00BFFF 0 191 255 ____________________
dimgray #696969 105 105 105 ____________________
dodgerblue #1E90FF 30 144 255 ____________________
feldspar #D19275 209 146 117 ____________________
firebrick #B22222 178 34 34 ____________________
floralwhite #FFFAF0 255 250 240 ____________________
forestgreen #228B22 34 139 34 ____________________
fuchsia #FF00FF 255 0 255 ____________________
gainsboro #DCDCDC 220 220 220 ____________________
Ghostwhite #F8F8FF 248 248 255 ____________________
gold #FFD700 255 215 0 ____________________
goldenrod #DAA520 218 165 32 ____________________
gray #808080 128 128 128 ____________________
green #008000 0 128 0 ____________________
greenyellow #ADFF2F 173 255 47 ____________________
honeydew #F0FFF0 240 255 240 ____________________
hotpink #FF69B4 255 105 180 ____________________
indianred #CD5C5C 205 92 92 ____________________
indigo #4B0082 75 0 130 ____________________
ivory #FFFFF0 255 255 240 ____________________
khaki #F0E68C 240 230 140 ____________________
lavender #E6E6FA 230 230 250 ____________________
lavenderblush #FFF0F5 255 240 245 ____________________
lawngreen #7CFC00 124 252 0 ____________________
lemonchiffon #FFFACD 255 250 205 ____________________
lightblue #ADD8E6 173 216 230 ____________________
lightcoral #F08080 240 128 128 ____________________
lightcyan #E0FFFF 224 255 255 ____________________
lightgoldenrodyellow #FAFAD2 250 250 210 ____________________
lightgrey #D3D3D3 211 211 211 ____________________
lightgreen #90EE90 144 238 144 ____________________
lightpink #FFB6C1 255 182 193 ____________________
lightsalmon #FFA07A 255 160 122 ____________________
lightseagreen #20B2AA 32 178 170 ____________________
lightskyblue #87CEFA 135 206 250 ____________________
lightslateblue #8470FF 132 112 255 ____________________
lightslategray #778899 119 136 153 ____________________
lightSteelblue #B0C4DE 176 196 222 ____________________
lightyellow #FFFFE0 255 255 224 ____________________
lime #00FF00 0 255 0 ____________________
limegreen #32CD32 50 205 50 ____________________
linen #FAF0E6 250 240 230 ____________________
magenta #FF00FF 255 0 255 ____________________
maroon #800000 128 0 0 ____________________
mediumaquamarine #66CDAA 102 205 170 ____________________
mediumblue #0000CD 0 0 205 ____________________
mediumorchid #BA55D3 186 85 211 ____________________
mediumpurple #9370D8 147 112 216 ____________________
mediumseagreen #3CB371 60 179 113 ____________________
mediumslateblue #7B68EE 123 104 238 ____________________
mediumspringgreen #00FA9A 0 250 154 ____________________
mediumturquoise #48D1CC 72 209 204 ____________________
mediumvioletred #C71585 199 21 133 ____________________
midnightblue #191970 25 25 112 ____________________
mintcream #F5FFFA 245 255 250 ____________________
mistyrose #FFE4E1 255 228 225 ____________________
moccasin #FFE4B5 255 228 181 ____________________
navajowhite #FFDEAD 255 222 173 ____________________
navy #000080 0 0 128 ____________________
oldlace #FDF5E6 253 245 230 ____________________
olive #808000 128 128 0 ____________________
olivedrab #6B8E23 107 142 35 ____________________
orange #FFA500 255 165 0 ____________________
orangered #FF4500 255 69 0 ____________________
orchid #DA70D6 218 112 214 ____________________
palegoldenrod #EEE8AA 238 232 170 ____________________
palegreen #98FB98 152 251 152 ____________________
paleturquoise #AFEEEE 175 238 238 ____________________
palevioletred #D87093 216 112 147 ____________________
papayawhip #FFEFD5 255 239 213 ____________________
peachpuff #FFDAB9 255 218 185 ____________________
peru #CD853F 205 133 63 ____________________
pink #FFC0CB 255 192 203 ____________________
plum #DDA0DD 221 160 221 ____________________
powderblue #B0E0E6 176 224 230 ____________________
purple #800080 128 0 128 ____________________
red #FF0000 255 0 0 ____________________
rosybrown #BC8F8F 188 143 143 ____________________
royalblue #4169E1 65 105 225 ____________________
saddlebrown #8B4513 139 69 19 ____________________
salmon #FA8072 250 128 114 ____________________
sandybrown #F4A460 244 164 96 ____________________
seagreen #2E8B57 46 139 87 ____________________
seashell #FFF5EE 255 245 238 ____________________
sienna #A0522D 160 82 45 ____________________
silver #C0C0C0 192 192 192 ____________________
skyblue #87CEEB 135 206 235 ____________________
slateblue #6A5ACD 106 90 205 ____________________
slategray #708090 112 128 144 ____________________
snow #FFFAFA 255 250 250 ____________________
springgreen #00FF7F 0 255 127 ____________________
steelblue #4682B4 70 130 180 ____________________
tan #D2B48C 210 180 140 ____________________
teal #008080 0 128 128 ____________________
thistle #D8BFD8 216 191 216 ____________________
tomato #FF6347 255 99 71 ____________________
turquoise 40E0D0 64 224 208 ____________________
violet #EE82EE 238 130 238 ____________________
violetred #D02090 208 32 144 ____________________
wheat #F5DEB3 245 222 179 ____________________
white #FFFFFF 255 255 255 ____________________
whitesmoke #F5F5F5 245 245 245 ____________________
yellow #FFFF00 255 255 0 ____________________
yellowgreen #9ACD32 154 205 50 ____________________