Términos del color

El color es posiblemente la herramienta más poderosa que puede utilizar un diseñador. Una paleta de colores fuerte puede convertir incluso el diseño más básico en algo especial. Los colores equivocados, por el contrario, pueden desanimar a los usuarios y enviarlos a otra parte.

Pero la teoría del color es algo más que elegir colores bonitos. Es un arte y una ciencia. Entender la ciencia que hay detrás de cómo se percibe el color y cómo influye en el comportamiento del usuario es vital para utilizarlo de forma eficaz en el diseño.

Teoría del color #

La teoría del color incluye todas las reglas y directrices que utilizan los diseñadores para crear paletas de colores que comuniquen el mensaje adecuado a los usuarios. El color tiene un profundo impacto en la psicología y el comportamiento de los usuarios.

La teoría del color combina el conocimiento de la capacidad óptica humana, la psicología, la cultura y otros aspectos para crear las paletas de colores más eficaces[1]. Los diseñadores que dominan la teoría del color pueden utilizar esa información para generar experiencias de usuario más atractivas.

Paleta de colores #

Una paleta de colores es la gama de colores que un diseñador utiliza en su composición. Las paletas de colores más básicas pueden constar solo de dos colores: a menudo el blanco y el negro. Pero los diseñadores suelen incorporar más colores a su paleta de colores en función de los estados de ánimo y las emociones que quieren evocar en los usuarios.

RGB #

RGB son las siglas de Rojo-Verde-Azul y es el espacio de color utilizado para las pantallas digitales (llamado sistema de color aditivo, ya que se suman los colores para crear el blanco). La mezcla de diferentes cantidades de luz roja, verde y azul permite a las pantallas digitales generar más de 16 millones de colores visibles para el ojo humano.

CMYK #

CMYK significa cian, magenta, amarillo y Key (que generalmente es el negro). Estos colores son los colores primarios del sistema de color sustractivo, comúnmente utilizado en los materiales impresos. Puedes producir prácticamente cualquier color del espectro visible sumando estos cuatro colores en distintas proporciones.

En la impresión a 4 colores, la «clave» suele ser el negro, pero técnicamente es cualquier tinta que proporcione el mayor detalle a la imagen que se imprime. Si no se utiliza tinta negra, otro color puede ocupar la posición de “key».

HEX #

Los códigos de color HEX se utilizan habitualmente en CSS para definir el color de un elemento. Son códigos alfanuméricos de 6 dígitos formados por 3 pares de dígitos, precedidos por un signo de almohadilla (#)[3] Cada uno de estos pares define el valor de un color primario: rojo, verde y azul. Cada par se convierte de la escala de valores de color de 0 a 255 a un código de base-16 que puede estar formado por los números 0-9 y las letras A-F.

No te preocupes, no es necesario que sepas exactamente cómo se calculan esos valores: hay muchas herramientas que convierten los colores en sus valores HEX por ti.

Degradado #

Los degradados de color son una mezcla gradual de un color a otro (o entre varios colores en algunos casos)[2] Los degradados se utilizan a menudo para añadir interés a los diseños o para añadir profundidad a elementos como los botones.

Los degradados pueden darse dentro de un mismo color (como del verde claro al verde bosque) o entre distintos colores (del rojo al amarillo, por ejemplo). En el espacio de transición hay muchos otros colores.

Contraste #

El contraste puede lograrse de muchas maneras, siendo el color una de las más obvias. El contraste se refiere a las diferencias entre dos puntos de una composición. El blanco y el negro, por ejemplo, tienen un alto contraste.

El contraste es también una consideración importante para crear diseños accesibles. El contraste entre los colores del texto y del fondo debe ser de al menos 4.5:1 para el texto pequeño y de 3:1 para el texto más grande[1].

Matiz #

El matiz se refiere a la forma más pura de un color (es decir, a plena saturación, sin añadir blanco, negro o gris). Puede ser rojo, azul, verde, amarillo, magenta, etc. Es un término técnicamente más preciso que el de color, que también puede referirse a tonos, tintes y matices, pero los dos términos suelen utilizarse indistintamente en el uso coloquial.

Sombra #

Una sombra, o sombra paralela, es un efecto visual que imita las sombras de la vida real que tienen los objetos tridimensionales en relación con una fuente de luz. En el diseño digital, las sombras dan la ilusión de profundidad y hacen que un elemento parezca elevado respecto a la superficie del fondo o de otros elementos circundantes.

Opacidad #

La opacidad se refiere a lo transparente que es un color. Con la opacidad total, el color no es en absoluto transparente. Al ajustar la opacidad, permites que se vea el fondo, ya sea otro color o una imagen.

Cuando un color tiene una opacidad reducida sobre un fondo blanco, aparecerá más claro. Sobre un fondo negro, aparecerá más oscuro. Los cambios de opacidad también pueden utilizarse para crear degradados sobre un color de fondo.

Referencias #

Funciona con BetterDocs