Color en diseño web

Post on 05-Jul-2015

524 views 0 download

description

Teoría del color aplicada al diseño web

Transcript of Color en diseño web

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 designamos los colores: verde, violeta, anaranjado.

H

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, está determinado por la cantidad de luz que un color tiene.

• Valor y luminosidad expresan lo mismo. B

FA M I L I A S D E C O L O R

• Colores PRIMARIOS

• Colores SECUNDARIOS

• ColoresTERCIARIOS

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.

• 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

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.

• 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

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.

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)

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.

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

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)

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ón

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

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/

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/

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)

atzimbatm@gmail.com @Atzimba

Adriana Atzimba Tienda Martínez