C O L O R E N D I S E Ñ O W E B
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 des...
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
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, e...
FA M I L I A S D E
C O L O R
• Colores 

PRIMARIOS
• Colores 

SECUNDARIOS
• Colores

TERCIARIOS
R E L A C I O N E S
D E C O L O R
• Monocromáticos
• Análogos
• Triadas
• Tetradas
• Complementarios
M O N O C R O M Í A
M O N O C R O M Í A
M O N O C R O M Í A
M O N O C R O M Í A
www.evolvewealth.co.uk
A N Á L O G O S
A N Á L O G O S
A N Á L O G O S
A N Á L O G O S
https://www.getdonedone.com/
T R I A D A S
T R I A D A S
T R I A D A S
T R I A D A S
http://12dishes.com
T E T R A D A S
T E T R A D A S
T E T R A D A S
www.busyb.co.uk
C O M P L E M E N TA R I O S
C O M P L E M E N TA R I O S
C O M P L E M E N TA R I O S
http://mathemagiker.de/
• Los colores sustractivos, son colores
basados en la luz reflejada de los
pigmentos aplicados a las superficies.
• Colore...
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 ...
• El modelo CMYK se basa en
la cualidad de absorber y
rechazar luz de los objetos.
• Se utiliza el modo CMYK en
la prepara...
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
represent...
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 l...
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...
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...
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 R...
1 6 , 7 7 7 , 2 1 6
P O S I B L E S
C O L O R E S
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...
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 accione...
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....
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.co...
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:...
atzimbatm@gmail.com
@Atzimba
Adriana Atzimba
Tienda Martínez
Color en diseño web
Color en diseño web
Upcoming SlideShare
Loading in …5
×

Color en diseño web

1,404 views

Published on

Teoría del color aplicada al diseño web

Color en diseño web

  1. 1. C O L O R E N D I S E Ñ O W E B
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. FA M I L I A S D E C O L O R • Colores 
 PRIMARIOS • Colores 
 SECUNDARIOS • Colores
 TERCIARIOS
  6. 6. R E L A C I O N E S D E C O L O R • Monocromáticos • Análogos • Triadas • Tetradas • Complementarios
  7. 7. M O N O C R O M Í A
  8. 8. M O N O C R O M Í A
  9. 9. M O N O C R O M Í A
  10. 10. M O N O C R O M Í A www.evolvewealth.co.uk
  11. 11. A N Á L O G O S
  12. 12. A N Á L O G O S
  13. 13. A N Á L O G O S
  14. 14. A N Á L O G O S https://www.getdonedone.com/
  15. 15. T R I A D A S
  16. 16. T R I A D A S
  17. 17. T R I A D A S
  18. 18. T R I A D A S http://12dishes.com
  19. 19. T E T R A D A S
  20. 20. T E T R A D A S
  21. 21. T E T R A D A S www.busyb.co.uk
  22. 22. C O M P L E M E N TA R I O S
  23. 23. C O M P L E M E N TA R I O S
  24. 24. C O M P L E M E N TA R I O S http://mathemagiker.de/
  25. 25. • 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
  26. 26. 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.
  27. 27. • 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
  28. 28. 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.
  29. 29. 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)
  30. 30. 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.
  31. 31. 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
  32. 32. 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)
  33. 33. 1 6 , 7 7 7 , 2 1 6 P O S I B L E S C O L O R E S
  34. 34. 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
  35. 35. 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
  36. 36. 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/
  37. 37. 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/
  38. 38. 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)
  39. 39. atzimbatm@gmail.com @Atzimba Adriana Atzimba Tienda Martínez

×