Análisis de esquemas de color en

el diseño de interfaces de usuario

Eugenio Jacobo Hernández Valdelamar
Gerardo Sierra López
Héctor Hernández Reynoso

Versión original: 2006

Revisión: 2010
Material distribuido bajo licencia Creative Commons
 La pregunta de los 64,000...

¿Qué hace que una aplicación o sitio web

se vea bien?

Bien implica: agradable, armónico, estético.

 Look & feel de la interfaz
• Creación de un prototipo de baja
fidelidad
– Perspectiva de diseño gráfico
• Define el estilo de la interfaz
• Establece el logotipo de la aplicación
• Establece un esquema de colores
• Define la distribución de elementos.
• Identifica y establece el uso de imágenes que
refuerzan el contexto del tema
• Toma en cuenta la percepción del publico
objetivo
 Look & feel de la interfaz
• Creación de un prototipo de baja fidelidad
– Perspectiva de ingeniería de software
• Establece las áreas de despliegue de cada módulo de la
aplicación y sus capacidades funcionales
• Establece el flujo de navegación entre los módulos de
la aplicación
• Establece el uso de controles para la interacción del
usuario
• Permite identificar elementos de interfaz nuevos, y que
deben ser desarrollados
• Permite identificar funcionalidad adicional no
contemplada en el diseño abstracto
Los colores son muy importantes
• La aplicación puede funcionar
correctamente, pero los elementos de la
interfaz deben distinguirse.
• El entorno debe ser no solo agradable, sino
también permitir su uso sin cansar la mirada
del usuario (incluso su ánimo).
• Los programadores no son muy buenos
seleccionando colores; no es su trabajo.
 Análisis de colores en sitios web
• Un primer enfoque para encontrar una respuesta, fue
analizar los colores usados en sitios “que se veían
bien”.
• De hecho, algo que se encontró en el proceso fueron
los llamados “templates” o plantillas. Hay quienes
incluso venden estos diseños.
• El objetivo fue identificar los colores de fondo, del
texto, vínculos, marcos, bordes y controles.
Fondo 1

Fondo 2 Texto

Plecas

Ligas

Botones
Fondo 1

Texto
Fondo 1

Toolbars Texto

Botones

TextBox
Fondo 1 Texto

Fondo 2 Texto

Fondo 3 Texto

Fondo 4 Texto

Pleca Texto

Botones Texto

TextBox

Ligas
Fondo 1 Texto

Fondo 2 Texto

Fondo 3 Texto

Fondo 4 Texto

GroupBox Texto

Botones Texto

Ligas
Fondo 1 Texto

Fondo 2 Texto

Texto
Fondo 3 Texto

Fondo 4 Texto

Pleca Texto

Botones Texto

TextBox

Ligas
Fondo 1 Texto

Fondo 2 Texto

Fondo 3 Texto

Botones Texto

Ligas
Fondo 1 Texto

Fondo 2 Texto

Fondo 3 Texto

Pleca Texto

Botones Texto

TextBox

Ligas
 ¿Qué sigue?
• Podemos seguir analizando más sitios para
encontrar un patrón que nos indique como
elegir colores.
• O podemos investigar como lo hacen los
artistas gráficos.
 La teoría del color
• La teoría del color es un grupo de reglas
básicas en la mezcla de colores para
conseguir el efecto deseado combinando
colores de luz o pigmento.
 Modelos de color
• Los modelos de color proporcionan varios métodos para
definir los colores, y cada modelo define los colores
mediante componentes de color específicos.
• Se han elaborado distintos modelos de color, y existen
diferencias en la construcción de los círculos cromáticos
que responden a cada modelo.
• El avance que significaron los estudios de Newton es la
posibilidad de identificar objetiva y no subjetivamente un
color nominándolo por las mezclas con las que fue creado.
Modelos de color

Circulo cromático RYB

 Rueda (círculo) del color
• La rueda del color o círculo de color es una
organización de color tonalidades alrededor
de un círculo, demostrando relaciones entre
los colores considerados ser colores
primarios, colores secundarios, colores
complementarios, etc.
 Esquemas de color
• Al hacer un diseño, hay que elegir una serie
de colores que deben resultar armónicos, o
sea, que vayan bien unos con otros.
• No hay reglas que gobiernen la selección de
un esquema de color, pero hay algunas
combinaciones armónicas
inspiradas en el círculo
cromático.
Principios de diseño: selección de
un esquema de colores
 Esquemas de color comunes
Complementarios Complementarios cercanos

Triadas complementarias Contiguos

http://www.desarrolloweb.com/articulos/1878.php
 Esquema de Color Análogo
Los esquemas de color análogos, utiliza los colores que están adyacente a
uno en la rueda del color. Un color se utiliza como color dominante
mientras que los otros se utilizan para enriquecer el esquema.
Energy  

F7AFB3 FFA8AC F7C4AF FFC0A8 FBDBAC FFDCA8

 
F15F66 FF5159 F1885F FF8151 F1B75F FFBA51

EA151E FF000B EA5015 FF4700 EA9515 FF9A00

                                 9A0E14 A80007 9A350E A82E00 9A620E A86500

  

Aqua  

BAEDD3 A8FFD4 BAEDED A8FFFF BAD3ED A8D4FF

 
74DCA8 51FFA9 74DCDC 51FFFF 74A8DC 51A9FF

33CB80 00FF82 33CBCB 00FFFF 3380CB 51A9FF

                                  
228654 00A855 228686 00A8A8 225486 0055A8

Sunny  

F7D9AF FFDBA8 F7E8AF FFECA8 F7F5AF FFFCA8

 
F1B55F FFB851 F1D15F FFD951 F1EC5F FFFA51

EA9415 FF9800 EABC15 FFC800 EAE515 FFF900

                                  
9A610E A86400 9A7C0E A88400 9A970E A8A400
 Esquemas complementarios divididos
Los esquemas complementarios divididos utilizan un color y
los dos colores adyacentes a su complementario. Esto
proporciona alto contraste sin la tensión fuerte del esquema
complementario.
Red Accents  

F6BFB1 FFBAA8 FDC7AA FFC6A8 FDD3AA FFD2A8

 
EE8062 FF7651 FC8F54 FF8E51 FCA654 FFA551

E64419 FF3600 FB5B04 FF5900 FB7D04 FF7C00

                                 982D10 A82300 A53B03 A83A00 A55203 A85100

    

C7DFDE BFE7E5 C7D6DF BFD9E7 C7CEDF BFCAE7

90C0BE 80D0CD 90AFC0 80B4D0 909DC0 8095D0

5CA2A0 44BBB6 5C89A2 4491BB 5C6FA2 4464BB

2D7B78 3D5B6B 2D5F7B 3D496B 2D427B 2D427B

Eggplant   Contrast  

D3EDBA D2FFA8 C6EDBA BCFFA8 BAEDBB A8FFAA F6D2B1 FFD1A8 F6D9B1 FFDBA8 F6E1B1 FFE5A8

   
A7DC74 A6FF51 8DDC74 7AFF51 74DC77 51FF55 EEA562 FFA451 EEB462 FFB851 EEC562 FFCC51

7ECB33 7DFF00 57CB33 3CFF00 33CB37 00FF06 EEA562 FFA451 EEB462 FFB851 EEC562 FFCC51

                                538622 52A800 398622 27A800 228624 00A803                                985110 A85000 986010 A86400 987010 A87700

            

D8BAED DCA8FF E0BAED EAA8FF E9BAED F9A8FF BAE2ED A8EDFF BACFED A8CBFF BABAED A8A9FF

B274DC B951FF C374DC D651FF D574DC F351FF 74C6DC 51DBFF 749EDC 5197FF 7476DC 5154FF

8E33CB 9900FF A733CB C300FF C133CB EE00FF 33ACCB 00CBFF 3371CB 0067FF 3336CB 0004FF

5D2286 6400A8 6E2286 8000A8 7F2286 9D00A8 227186 0085A8 224A86 0043A8 222386 0002A8
 Esquemas de color Triádico
Los esquemas de color Triádico utilizan tres colores
equidistantes alrededor de la rueda del color. El esquema es
popular entre artistas porque ofrece contraste visual fuerte
mientras que conserva el balance, y riqueza del color.

Fantasy  

 
FDC7AA FFCDA8 EDD4BA FFD6A8 EDDABA FFDFA8

FC8F54 FF8E51 DCAB74 FFAE51 DCB674 FFC051

                             
FB5B04 FF5900 CB8533 FF8900 CB9433 FFA300

A53B03 A83A00 865722 A85A00 866122 A86B00

D9C2E4 DEB6F0 E3C2E4 F0B6EC E4C2D3 F0B6D7

B586CA BE6DE3 C986CA E16DE3 CA86A8 E36DAF

934DB2 A129D6 B04DB2 D329D6 B24D80 D6298A

603375 691B8D 743375 8B1B8D 753354 8D1B5B

C0EDBA B2FFA8 BAEDBA A8FFA8 BAEDD4 A8FFD5

81DC74 66FF51 75DC74 52FF51 74DCAA 51FFAC

46CB33 1FFF00 34CB33 01FF00 33CB82 00FF85

2E8622 14A800 228622 00A800 228655 00A857

 Science
Esquemas de color Triádico  

CFC8DE CDC0E6 D6C8DE D8C0E6 DEC8DE E1C4E2

 
A091BF 9B81CF AF91BF B381CF BD91BF C48AC6

745DA1 6C46B8 895DA1 9046B8 9F5DA1 A953AB

                               
4D3E6A 472F79 5A3E6A 5F2F79 693E6A 6F3771
   
 

F3B4BA FFA8B0 F3BDB4 FFB5A8 F3CEB4 FFCBA8

E86875 FF5162 E87C68 FF6C51 E89C68 FF9751

DD2234 FF0019 DD3E22 FF2700 DD6E22 FF6700

921622 A80010 922916 A81900 924816 A84300

C8DEDE C0E6E5 C8DBDE C0E0E6 C8D7DE C0DAE6

91BFBE 81CFCC 91B8BF 81C3CF 91B0BF 81B5CF

5DA19F 46B8B5 5D97A1 46A7B8 5D8BA1 4693B8

3E6A69 2F7977 3E636A 2F6E79 3E5C6A 2F6179

Sports  

F7E4AF FFE8A8 F7EDAF FFF2A8 F7F5AF FFFCA8

 
F1CB5F FFD251 F1DC5F FFE651 F1EC5F FFFA51

EAB315 FFBD00 EACC15 FFDB00 EAE515 FFF900

                                  
9A750E A87C00 9A860E A89000 9A970E A8A400

F3B4C8 FFA8C3 F3B4B5 FFA8A9 F3BDB4 FFB4A8

E76990 FF5187 E7696B FF5154 E77B69 FF6951

DC235C FF004F DC2326 FF0004 DC3C23 FF2300

91173D A80034 911719 A80002 912817 A81700

BAD3ED A8D4FF BEBAED AFA8FF D0BAED CDA8FF

74A8DC 51A9FF 7D74DC 5F51FF A174DC 9B51FF

3380CB 0082FF 4033CB 1500FF 7433CB 6C00FF

225486 0055A8 2A2286 0D00A8 4D2286 4700A8

 Colores fríos y cálidos

# El tiempo de permanencia en el sitio es largo. # El tiempo de permanencia en el lugar es corto.

# Si se desea una atmósfera tranquilizante. # Se desea una atmósfera estimulante .

http://sobrecolores.blogspot.com/2010/05/esquemas-de-color-en-el-diseno.html
 Comentarios finales
• Un buen diseño gráfico no es cosa de suerte, buen
gusto o instinto; tiene bases científicas y técnicas
(claro que el talento también cuenta).
• El secreto es la matemática y la geometría
(aplicada a un esquema de referencia que relaciona
a los colores).
• Los ingenieros son malos para hacer UIs, pero con
los principios y elementos adecuados, podemos
hacerlo bien.
 Referencias
• http://es.wikipedia.org/wiki/Teor%C3%ADa_del_color
• http://www.webnova.com.ar/articulo.php?recurso=312
• http://www.fotonostra.com/grafico/modeloscolor.htm
• http://www.worldlingo.com/ma/enwiki/es/Color_wheel
• http://es.wikipedia.org/wiki/CMYK
• http://s3.accesoperu.com/wp6/includes/htmlarea/mezclador/ayuda/ec.htm