COLOR EN DISEÑO DE

INTERFACES
¿QUÉ ES EL COLOR?
¿Qué es el color?

El color es una sensación que

producen los rayos luminosos en los
órganos visuales y que es
interpretada en el cerebro.

Se trata de un fenómeno
físico-químico donde cada color
depende de la longitud de onda.
FUNCIONES DEL COLOR EN EL
DISEÑO DE INTERFACES
FUNCIONES DEL COLOR EN EL DISEÑO DE
INTERFACES

● Centrar la atención
● Atractivo visual ● Informar decisiones
● Comunicación de marca
● Inspirar acciones
● Jerarquía visual
● Organización y ● Significado cultural y
emocional
legibilidad
● Accesibilidad
FUNCIONES DEL COLOR EN EL DISEÑO WEB

Using Color to Enhance Your Design

https://youtu.be/xN59Hzp46vo
El círculo cromático

El círculo cromático es una

representación gráfica que
segmenta y organiza los
colores con base en el tono o
matiz de cada uno.
PROPIEDADES DEL COLOR
PROPIEDADES DEL
COLOR

Tono (hue), matiz o croma es el

atributo que diferencia el color y
por la cual designamos los
colores: verde, violeta,
anaranjado.

H
PROPIEDADES DEL
COLOR

Saturación (saturation): es la
intensidad cromática o pureza
de un color.

S
PROPIEDADES DEL
COLOR
• 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

B
lo mismo.
FAMILIAS DE COLOR
FAMILIAS DE
COLOR
• Colores
PRIMARIOS

• Colores
SECUNDARIOS

• Colores
TERCIARIOS
RELACIONES DE COLOR
RELACIONES DE
COLOR
• Monocromáticos

• Análogos

• Triadas

• Tetradas

• Complementarios
MONOCROMÍA
MONOCROMÍA
MONOCROMÍA
MONOCROMÍA

www.evolvewealth.co.uk
ANÁLOGOS
ANÁLOGOS
ANÁLOGOS
ANÁLOGOS

https://www.monographcomms.ca/
TRIADAS
TRIADAS
TRIADAS
TRIADAS

http://12dishes.com
TETRADAS
TETRADAS
TETRADAS

www.busyb.co.uk
COMPLEMENTARIOS
COMPLEMENTARIOS
COMPLEMENTARIOS

http://mathemagiker.de/
MODELOS DE COLOR
COLORES PIGMENTO
SÍNTESIS SUSTRACTIVA
• 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.
COLORES LUZ
SÍNTESIS ADITIVA

• 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.
MODELO DE COLOR
CMYK

• 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.
MODELO DE COLOR RGB

• 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.
MODELO DE COLOR RGB

• 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)
ASPECTOS TÉCNICOS DEL USO
DEL COLOR EN DISEÑO WEB
COLORES
WEB SAFE
Los 216 colores seguros para la web fueron
seleccionados porque fueron compatibles con
la mayoría de los navegadores web y sistemas
operativos populares en el momento en que
las pantallas de las computadoras estaban
limitadas a 256 colores.

Solo 216 de los 256 colores disponibles en las

primeras PC se consideraba que tenían un
soporte lo suficientemente consistente en
todas las plataformas para formar parte de
este estándar informal.
COLORES WEB SAFE

Las computadoras de hoy soportan millones de colores. Los

monitores, los sistemas operativos y el software no siempre
muestran cada uno de estos colores de la misma manera,
pero las representaciones de color son lo suficientemente
similares para la mayoría de las situaciones.
VALOR HEXADECIMAL, RGB Y RGB ALFA

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)

CODIFICACIÓN HEXADECIMAL DE COLOR

• 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.
CODIFICACIÓN HEXADECIMAL DE COLOR

Creadas a partir de letras y dígitos que expresan los valores RGB

ABCDEF
1234567890
Estas combinaciones producen

16,777,216
POSIBLES COLORES
 Codificación Hexadecimal

¿CÓMO SE COMPONE UN CÓDIGO HEXADECIMAL?

16,777,216
POSIBLES COLORES
MATERIAL DESIGN
Estas paletas de color, creadas originalmente por Material Design en 2014,
se componen de colores diseñados para trabajar juntos en armonía, y
pueden usarse para desarrollar una paleta de color.

https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
HERRAMIENTAS PARA MANEJO DE COLOR
• Adobe Color
https://color.adobe.com

• Muzli
https://colors.muz.li/

• COLOURlovers
http://www.colourlovers.com/

• Color Scheme Designer // Paletton

http://colorschemedesigner.com/

• Hex Color Tool

http://hexcolortool.com/

• Radix
https://www.radix-ui.com

58
MÁS HERRAMIENTAS PARA MANEJO DE COLOR
• Coolors
coolors.co

• Accesible Color Generator

https://learnui.design/tools/accessible-color-generator.html

• Color Claim
https://vanschneider.com/colors

• Material Design - Color Tool

https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.
color=FFD740

59
JUGANDO CON EL COLOR
• Color A color matching game
http://color.method.ac/
• RGB Challenge
https://filmosofia.com/RGBChallenge-master/index.html
• What the Hex?
http://yizzle.com/whatthehex
• Color Controversy
https://colorcontroversy.com/

• Cymbolism
http://cymbolism.com/
COMPLEMENTOS

• ColorPicker (Firefox y Chrome)

https://addons.mozilla.org/es/firefox/addon/colorpicker/
https://chrome.google.com/webstore/detail/color-picker

• Digital Color Meter (MacOs)

¿Tienes preguntas?