Gilberto 🦁 PRO
Desarrollo visualizaciones y aplicaciones en línea, colaboro con distintos medios digitales
Diseño de interfaz digital
Color
Colores
Lo que percibimos como colores no son otra cosa que ondas que rebotan de las superficies
Como se aprecia en la imagen, lo que podemos ver es tan sólo una parte minúscula de todo el espectro electromagnético
Colores
Los conos y los bastones del ojo son los que convierten la luz que llega a éste en impulsos nerviosos que el cerebro transforma en imágenes
Los bastones pueden distinguir entre negro, blanco y tonos de gris mientras que los conos pueden distinguir colores
Modelos de colores
Un modelo de color es un modelo abstracto matemático que describe formas en que se pueden representar colores a través de conjuntos ordenados de números (o tuplas) en los que cada valor representa uno de los componentes del color
Al conjunto de todos los colores posibles de acuerdo a un modelo se le conoce como espacio de color
Dos de los modelos más conocidos, y con los que probablemente se encuentren familiarizados ya, son el CMYK y el RGB
CMYK
El modelo CMYK (Cyan, Magenta, Yellow, Black) es un modelo sustractivo
Cada color se representa con cuatro números
Se usa en impresiones
RGB
El modelo RGB (Red, Green, Blue) es un modelo aditivo
Cada color se representa con tres números
Se usa en medios digitales
Clasificación de colores
Los primarios no se pueden obtener a partir de otros colores
Los secundarios se obtienen a partir de mezclar primarios
Los terciarios se obtienen a partir de mezclar primarios con secundarios
Los colores se clasifican en:
- Primarios
- Secundarios
- Terciarios
P
P
P
S
S
S
T
T
T
T
T
T
Rangos de colores
P
P
P
S
S
S
T
T
T
T
T
T
Activos
Pasivos
De acuerdo a la posición de los colores en la rueda cromática se dividen en dos rangos
Los colores activos, que se perciben como de menor peso y adelante de otros colores
Los colores pasivos, que se perciben como de mayor peso y detrás de otros 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
Paleta de colores
Nop, no de esas...
Paleta de colores
Sin importar el tipo de armonía que uses para generar una paleta de colores, hay ciertas consideraciones a tener en cuenta sobre su uso
A veces tenemos una paleta así...
Paleta de colores
...y terminamos con una interfaz así:
Paleta de colores
Más bien queremos una interfaz como la de la imagen
Noten que no se usan sólo los cinco colores de la paleta de ejemplo sino que hay diferentes variaciones de los colores de la misma
De hecho, también hay gradaciones de grises que casi llegan al blanco y al negro
Paleta de colores
Una estrategia que resulta muy útil es tener una escala de un color primario, uno escala de un color neutro, y una escala de otros tres o cuatro colores de uso general
Primario
Neutro
Uso general
Paleta de colores
No hay ninguna receta que garantice una buena paleta de colores, aunque sí hay varias consideraciones que ayuda tener en mente:
- Se elige un color central para cada escala, y las variaciones de tonos se hacen a partir de éste comenzando por los bordes (las variaciones más extremas) y se llena el resto
- Entre cinco y siete tonos bastan para tener una escala de colores adecuada
- Procuren evitar el negro o blanco, tiendan mejor a tonos casi blancos o casi negros relacionados con sus colores
- En pantallas digitales ambos colores son muy luminosos y tienden a fatigar los ojos
- Una vez que usamos negro y blanco deja de tener sentido usar gradaciones de color cercanos a ellos
Paleta de colores
Colores en CSS
Además del color en los bordes que ya hemos mencionado, podemos agregar color al texto y al fondo de cualquier elemento con las propiedades color y background-color, respectivamente
section {
background-color:#cdcdcd;
}
p
color: #ababab;
}color establece el color del texto de un elemento y cualquier decoración del mismo (como una línea para subrayarlo)
background-color establece el color del fondo de cualquier elemento
Ambas propiedades pueden admitir colores expresados en los modelos hexadecimal, RGB, RGBA, HSL y HSLA
Modelo RGB
Es el modelo más conocido y usado
Un color se representa por una tupla de tres elementos, cada uno representando un color primario (rojo, verde y azul) que van del 0, más obscuro, hasta el 255, más claro
Pueden verlo como las coordenadas de un cubo en el que cada uno de los colores primarios es un eje
Representación en 3D del modelo RGB
Modelo RGBA
Es el modelo RGB con un valor de transparencia agregado, el canal alfa
El cuarto valor es un número entre 0, totalmente transparente, y 1, totalmente opaco
Modelo hexadecimal
Es el modelo por defecto de varios lenguajes de programación y de CSS, aunque no es otra cosa que el modelo RGB disfrazado
Cada color se representa con 6 caracteres hexadecimales (del 0 al 9 y de la a a la f), cada par representa un color primario (rojo, verde y azul)
Modelo HSL
Este modelo es muy usado en medios digitales y también usa tres valores para representar un color
El primer valor 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 valor 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 valor es la luminosidad (lightness) del color expresada como un porcentaje entre 0% y 100%. Una luminosidad de 0% resulta en negro, una del 50% resulta en el color más puro mientras que una del 100% resulta en blanco
Modelo HSL
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
Modelo HSLA
Es el modelo HSL con un valor de transparencia agregado, el canal alfa
El cuarto valor es un número entre 0, totalmente transparente, y 1, totalmente opaco
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
Contraste
El contraste es la diferencia de las características de dos o más colores interactuando en un diseño, así como la manera en que se afecta la percepción de los mismos
Aunque es importante cuidar el contraste entre todos los elementos de una página, se tiene que prestar una atención muy especial al contraste entre el fondo de un elemento (un botón, sección o la página completa) y el texto que contiene
Si el contraste entre el texto y el fondo es muy alto, con colores muy distintos y que chocan entre sí, hace que la vista se canse
Si el contraste entre el texto y el fondo es muy bajo, con colores muy parecidos, hace que el texto sea difícil de leer
Hay herramientas para verificar que el contraste entre el fondo y el texto de un elemento sea adecuado, como esta
Revisa el contraste de los colores de los ejemplos anteriores y córrigelos para que el resultado en este verificador sea super
Escalas de color
Una ventaja que tiene el modelo HSL sobre el RGB es que es más intuitivo* y se presta mejor para generar escalas de color:
- En esta escala sólo se fue aumentando la saturación del color
- En esta escala sólo se fue aumentando la luminosidad del color
Aunque también hay herramientas que les ayudan a crear escalas de color en RGB si prefieren ese modelo
Problema
¿Hay algún problema con las dos escalas presentadas anteriormente?
Problema
La diferencia entre los colores de la primera columna con los de la segunda es de 20 grados de saturación pero ¿se ven igual de distintos?
Problema
La luminosidad de los dos colores es la misma pero ¿se ven igual de luminosos?
Problema
Los dos colores tienen el mismo tono y saturación pero ¿son variaciones del mismo color?
Uniformidad perceptual
Los problemas de los ejemplos pasados se deben a la forma en que percibimos los colores y sus características
Aunque los cambios en una, o varias, de las características de un color sean iguales, simplemente no los percibimos iguales
Modelo HCL
Este modelo de color es muy parecido al HSL pero está calculado para que los cambios entre colores o características sean perceptiblemente uniformes
El primer valor es el matiz (hue), expresado como un ángulo en el círculo cromático en el que el magenta está en 0°, y hay un verde azulado en 180°
El segundo valor es el chroma, o una medida de la cantidad de color, expresado como un valor que va desde 0 -un gris por la ausencia de color- hasta un valor superior que depende del matiz pero que, normalmente, puede ir hasta 132
El tercer valor es la luminosidad (lightness) del color expresada como un porcentaje entre 0% y 100%
Modelo HCL
Generador de paletas
Trabajar en el modelo HCL puede ser complicado al inicio porque no es tan intuitivo como el HSL pero, afortunadamente, siempre podemos contar con herramientas que nos ayuden:
Consideraciones generales
Consideraciones generales
Daltonismo
Podemos (del verbo deberíamos) revisar nuestras paletas de colores con herramientas que nos ayuden a simular los diversos tipos de daltonismo que existen para garantizar una experiencia accesible a todas las personas que usen nuestra interfaz
Diseño de interfaz digital: Color
By Gilberto 🦁
Diseño de interfaz digital: Color
Color
