Diseño de interfaz digital
Práctica sobre colores
Armonía
La armonía es la composición de colores utilizados para lograr un efecto funcional o estético
Hay distintos tipos de armonía, de acuerdo a la cantidad de colores usadas y a la relación que exista entre ellos
Vamos a usar esta herramienta para explorar los distintos tipos de armonías
Armonía complementaria
Ícono:
Se compone de un un color base y su color complementario (opuesto) en la rueda cromática
Se debe tener cuidado al usar esta armonía porque hay contrastes que lastiman los ojos
Como este
Armonía monocromática
Ícono:
Se compone de un sólo color pero con distintos tonos y matices del mismo
Armonía análoga
Ícono:
Se compone de un un color base y sus dos colores adyacentes
Armonía complementaria-dividida
Ícono:
Se compone de un un color base y dos colores adyacentes o equidistantes a su color complementario (opuesto) en la rueda cromática
Armonía triádica
Ícono:
Se compone de un un color base y dos colores adyacentes o equidistantes a éste en la rueda cromática
Armonía tetrádica
Ícono:
Se compone de dos colores base y el complementario de cada uno en la rueda tetrádica
La distancia entre los colores base afecta la composición final
En esencia es como tener dos armonías complementarias
Post-imágenes
Last post-imágenes (afterimages) ocurren cuando los conos y bastones se adaptan a la sobre-estimulación, se fatigan y pierden sensibilidad
Mira la imagen por treinta segundos y luego mira una superficie clara
Modelo HSV/HSB
Este modelo es muy usado en medios digitales y también usa tres valores para representar un color
El primer número es el matiz (hue), expresado como un ángulo en el círculo cromático en el que el rojo está en 0°, el verde en 120° y el azul en 240°
El segundo número es la saturación (saturation), o la cantidad de color, expresado como un porcentaje entre 0% -un gris por la ausencia de color- y 100% -el color más puro-
El tercer número es el valor (value) del brillo del color expresado como un porcentaje entre 0% y 100%. Un brillo de 0% resulta en negro, mientras que un brillo de 100% significa un color sin negro o gris mezclado. En algunos programas se usa brightness en vez de value
Modelo HSV/HSB
Aunque los componentes del color, y su representación cilíndrica, pueden parecer extraños al inicio, reconocer un color por sus componentes o generar uno a partir de otro es más fácil que en el modelo RGB
Estudios de color
¿Cómo revisamos si dos, o más, colores se ven bien juntos?
Estudios de color
¿Cómo revisamos si dos, o más, colores se ven bien juntos?
Estudios de color
¿Cómo revisamos si dos, o más, colores se ven bien juntos?
Estudios de color
¿Cómo revisamos si dos, o más, colores se ven bien juntos?
Estudios de color
¿Cómo revisamos si dos, o más, colores se ven bien juntos?
Estudios de color
¿Cómo revisamos si dos, o más, colores se ven bien juntos?
Estudios de color
¿Cómo revisamos si dos, o más, colores se ven bien juntos?
Nuestra proporción básica
Ajustando tonos
Ajustando tonos
Ajustando tonos
Para generar tonos más obscuros hacemos dos cosas:
- Se aumenta la saturación
- Se disminuye el brillo
Ajustando tonos
Para generar tonos más obscuros hacemos dos cosas:
- Se aumenta la saturación
- Se disminuye el brillo
Ajustando tonos
Para generar tonos más obscuros hacemos dos cosas:
- Se aumenta la saturación
- Se disminuye el brillo
Ajustando tonos
Para generar tonos más obscuros hacemos dos cosas:
- Se aumenta la saturación
- Se disminuye el brillo
Ajustando tonos
Para generar tonos más obscuros hacemos dos cosas:
- Se aumenta la saturación
- Se disminuye el brillo
Ajustando tonos
Mientras que para generar tonos más brillantes:
- Se disminuye la saturación
- Se aumenta el brillo
Ajustando tonos
Mientras que para generar tonos más brillantes:
- Se disminuye la saturación
- Se aumenta el brillo
Ajustando tonos
Mientras que para generar tonos más brillantes:
- Se disminuye la saturación
- Se aumenta el brillo
Ajustando tonos
Mientras que para generar tonos más brillantes:
- Se disminuye la saturación
- Se aumenta el brillo
¿Y los matices?
¿Cuál de los rectángulos es más brillante?
Luminosidad
Luminosidad
Luminosidad
Luminosidad
Máximos
Luminosidad
Mínimos
Ajustando tonos (redux)
Si queremos un tono más obscuro a partir de un tono base:
- Disminuimos el brillo
- Aumentamos la saturación
- Acercamos el matiz hacia el mínimo luminoso más cercano (rojo, verde o azul)
Si queremos un tono más brillante a partir de un tono base:
- Aumentamos el brillo
- Disminuimos la saturación
- Acercamos el matiz hacia un máximo luminoso más cercano (amarillo, cyan o magenta)
Tonalidades
Tonalidades
Tonalidades
Contraste en grises
Consideraciones generales
Consideraciones generales
Consideraciones generales
Consideraciones generales
Consideraciones generales
