Teoría del color aplicada al diseño web

1. C O L O R E N D I S E Ñ O W E B

3. P R O P I E D A D E S
D E L C O L O R
• Tono (hue), matiz o
croma es el atributo que
diferencia el color y por la
cual designamos los
colores: verde, violeta,
anaranjado.
H

4. P R O P I E D A D E S
D E L C O L O R
• Saturación (saturation):
es la intensidad cromática
o pureza de un color.
S

5. P R O P I E D A D E S
D E L C O L O R
• Valor, luminosidad o
brillo (brightness) es la
claridad u oscuridad de un
color, está determinado
por la cantidad de luz que
un color tiene.
• Valor y luminosidad
expresan lo mismo.
B

6. FA M I L I A S D E
C O L O R
• Colores
PRIMARIOS
• Colores
SECUNDARIOS
• Colores
TERCIARIOS

7. R E L A C I O N E S
D E C O L O R
• Monocromáticos
• Análogos
• Triadas
• Tetradas
• Complementarios

8. M O N O C R O M Í A

9. M O N O C R O M Í A

10. M O N O C R O M Í A

11. M O N O C R O M Í A
www.evolvewealth.co.uk

12. A N Á L O G O S

13. A N Á L O G O S

14. A N Á L O G O S

15. A N Á L O G O S
https://www.getdonedone.com/

16. T R I A D A S

17. T R I A D A S

18. T R I A D A S

19. T R I A D A S
http://12dishes.com

20. T E T R A D A S

21. T E T R A D A S

22. T E T R A D A S
www.busyb.co.uk

23. C O M P L E M E N TA R I O S

24. C O M P L E M E N TA R I O S

25. C O M P L E M E N TA R I O S
http://mathemagiker.de/

26. • Los colores sustractivos, son colores
basados en la luz reflejada de los
pigmentos aplicados a las superficies.
• Colores primarios:
Rojo, Amarillo, Azul
• La mezcla de los tres colores
primarios pigmento debería producir
el negro, el color más oscuro y de
menor cantidad de luz, por lo cual
esta mezcla es conocida como
síntesis sustractiva.
C O L O R E S P I G M E N T O
S Í N T E S I S S U S T R A C T I VA

27. C O L O R E S L U Z
S Í N T E S I S A D I T I VA
• Colores producidos por luces
• Colores primarios,
Rojo, Verde y Azul (RGB).
• La fusión de estos, crean y
componen la luz blanca.
• A esta mezcla se le denomina,
síntesis aditiva.

28. • El modelo CMYK se basa en
la cualidad de absorber y
rechazar luz de los objetos.
• Se utiliza el modo CMYK en
la preparación de imágenes
que se van a imprimir en
cualquier sistema de
impresión de tintas.
M O D E L O D E
C O L O R C M Y K

29. M O D E L O D E
C O L O R R G B
• RGB es un modelo de color basado en
la síntesis aditiva, con el que es posible
representar un color mediante la
mezcla por adición de los tres colores
de luz primarios.
• En las pantallas, la sensación de color
se produce por la mezcla aditiva de
rojo, verde y azul.
• Las pantallas se dividen en puntos
minúsculos llamados píxeles formados
por tres subpíxeles de colores
primarios de luz, cada uno de los
cuales brilla con una determinada
intensidad.

30. M O D E L O D E
C O L O R R G B
• Escala de 0 a 255, donde el 255
equivale al total de la luz
emitida por color y el 0 a la
ausencia de luz de ese color
• Se expresa de la siguiente
forma: rgb (255,255,255)

31. C O D I F I C A C I Ó N H E X A D E C I M A L
D E C O L O R
• La codificación hexadecadecimal del color permite
expresar fácilmente un color concreto de la escala
RGB, utilizando la notación hexadecimal.
• Este sistema utiliza la combinación de tres códigos de
dos dígitos para expresar las diferentes intensidades
de los colores primarios RGB.

32. 1 2 3 4 5 6 7 8 9 0
C O D I F I C A C I Ó N
H E X A D E C I M A L D E C O L O R
A B C D E F
Creadas a partir de letras y dígitos
Estas combinaciones producen
1 6 , 7 7 7 , 2 1 6
P O S I B L E S C O L O R E S

33. C O D I F I C A C I Ó N
H E X A D E C I M A L D E C O L O R
Color
Valor
Hexadecimal
Valor Rgb Valor Rgb A
Blanco #Ffffff Rgb(255,255,255) Rgba(255,255,255,1.0)
Negro #000000 Rgb(0,0,0) Rgba(0,0,0,1.0)

34. 1 6 , 7 7 7 , 2 1 6
P O S I B L E S
C O L O R E S

36. F U N C I O N E S D E L C O L O R
E N E L D I S E Ñ O W E B
• Usabilidad
• Engagement
• Experiencia de usuario
• Inspiración

37. F U N C I O N E S D E L C O L O R
E N E L D I S E Ñ O W E B
• Centrar la atención
• Informar decisiones
• Inspirar acciones
• Organizar información
• Resaltar elementos
• Balancear la composición
• Enriquecer experiencias

38. H E R R A M I E N TA S PA R A
PA L E TA S D E C O L O R
• Adobe Color
https://color.adobe.com
• COLOURlovers
http://www.colourlovers.com/
• Color Scheme Designer // Paletton
http://colorschemedesigner.com/
• Hex Color Tool
http://hexcolortool.com/
• Color Blender
http://meyerweb.com/eric/tools/color-blend/
• Cohesive colors
http://javier.xyz/cohesive-colors/

39. J U G A N D O C O N E L C O L O R
• Color A color matching game
http://color.method.ac/
• What the Hex?
http://yizzle.com/whatthehex
• RGB Challenge
http://www.rgbchallenge.com/

40. C O M P L E M E N T O S
• ColorPicker (Firefox y Chrome)
https://addons.mozilla.org/es/firefox/addon/colorpicker/
https://chrome.google.com/webstore/detail/color-picker
• Digital Color Meter (Mac)

41. atzimbatm@gmail.com
@Atzimba
Adriana Atzimba
Tienda Martínez