Color en diseño web
-
Upload
adriana-atzimba -
Category
Documents
-
view
524 -
download
0
description
Transcript of Color en diseño web
![Page 1: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/1.jpg)
C O L O R E N D I S E Ñ O W E B
![Page 2: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/2.jpg)
![Page 3: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/3.jpg)
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
![Page 4: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/4.jpg)
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
![Page 5: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/5.jpg)
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
![Page 6: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/6.jpg)
FA M I L I A S D E C O L O R
• Colores PRIMARIOS
• Colores SECUNDARIOS
• ColoresTERCIARIOS
![Page 7: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/7.jpg)
R E L A C I O N E S D E C O L O R
• Monocromáticos
• Análogos
• Triadas
• Tetradas
• Complementarios
![Page 8: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/8.jpg)
M O N O C R O M Í A
![Page 9: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/9.jpg)
M O N O C R O M Í A
![Page 10: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/10.jpg)
M O N O C R O M Í A
![Page 12: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/12.jpg)
A N Á L O G O S
![Page 13: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/13.jpg)
A N Á L O G O S
![Page 14: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/14.jpg)
A N Á L O G O S
![Page 15: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/15.jpg)
A N Á L O G O S
https://www.getdonedone.com/
![Page 16: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/16.jpg)
T R I A D A S
![Page 17: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/17.jpg)
T R I A D A S
![Page 18: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/18.jpg)
T R I A D A S
![Page 19: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/19.jpg)
T R I A D A S
http://12dishes.com
![Page 20: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/20.jpg)
T E T R A D A S
![Page 21: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/21.jpg)
T E T R A D A S
![Page 23: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/23.jpg)
C O M P L E M E N TA R I O S
![Page 24: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/24.jpg)
C O M P L E M E N TA R I O S
![Page 25: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/25.jpg)
C O M P L E M E N TA R I O S
http://mathemagiker.de/
![Page 26: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/26.jpg)
• 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
![Page 27: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/27.jpg)
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.
![Page 28: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/28.jpg)
• 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
![Page 29: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/29.jpg)
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.
![Page 30: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/30.jpg)
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)
![Page 31: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/31.jpg)
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.
![Page 32: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/32.jpg)
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
![Page 33: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/33.jpg)
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
ColorValor
HexadecimalValor 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)
![Page 34: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/34.jpg)
1 6 , 7 7 7 , 2 1 6 P O S I B L E S C O L O R E S
![Page 35: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/35.jpg)
![Page 36: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/36.jpg)
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
![Page 37: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/37.jpg)
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
![Page 38: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/38.jpg)
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
• COLOURlovershttp://www.colourlovers.com/
• Color Scheme Designer // Palettonhttp://colorschemedesigner.com/
• Hex Color Tool http://hexcolortool.com/
• Color Blenderhttp://meyerweb.com/eric/tools/color-blend/
• Cohesive colorshttp://javier.xyz/cohesive-colors/
![Page 39: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/39.jpg)
J U G A N D O C O N E L C O L O R
• Color A color matching gamehttp://color.method.ac/
• What the Hex?http://yizzle.com/whatthehex
• RGB Challengehttp://www.rgbchallenge.com/
![Page 40: Color en diseño web](https://reader034.fdocuments.es/reader034/viewer/2022052217/55991f371a28abe4158b46c4/html5/thumbnails/40.jpg)
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)