Skip to main content

Una de las cosas más fascinantes es que el color realmente no existe… al menos no en sentido literal. Los plátanos y el sol no son amarillos, el cielo no es azul y ninguna cebra es objetivamente blanca y negra: lo que existe es la luz y el color se produce por como esta se refleja en los objetos.

La importancia del color

Según Aarish Sherin, “En un mundo en que las primeras impresiones se forman en nada más que una vigésima parte de segundo, el color puede ayudar al diseñador a captar la atención del espectador y a comunicar información en un entorno visual saturado. El color puede también ayudar al espectador a realizar rápidamente una asociación correcta o a tener la reacción adecuada ante la marca de un producto o un servicio” (Fundamentos del Color, pág. 10).

Por tanto, la selección de las paletas de color en un proceso de diseño es primordial. En cualquier proyecto riguroso no debemos olvidar que hay elementos como la forma, el color, la tipografía, la composición o el material que están en conjunto por encima del artefacto final. La dedicación al estudio preliminar de estos puntos es básico para asegurar el éxito de cualquier propuesta creativa.

Adobe Color Wheel, ¿qué es?

Adobe Color es la web de Adobe que se centra en el uso del color. Basada en un círculo cromático, se trata de una aplicación en donde podremos trabajar con él: bien para realizar nuestra propia selección cromática o bien para elegir entre otras paletas de color que son tendencia o se han creado por otros usuarios a modo colaborativo.

Seleccionar paletas tendencia

Esta sección nos permitirá descubrir paletas de color que son tendencia dentro de las comunidades creativas de Behance y Adobe Stock. Bien mediante selección visual o mediante búsqueda, el site dispone de ciertos apartados para bucear entre selecciones dentro de la moda, naturaleza, viajes, diseño, arquitectura o comida. ¿Que es ahora tendencia?

Paletas Color Moda

Paletas de Moda

Últimas tendencias de moda con estilos que van desde el boho natural hasta la vibrante moda de vanguardia. Ver más.

#01233f

#65888c

#f2b705

#d9a74e

#a75d04

Paletas Color Packagiing

Paletas de Diseño

Desde carteles hasta logotipos y marcas, Ver más.

#d9d0c7

#da4b2b

#a63922

#582417

#f28973

Paletas Color Arquitectura

Paletas de Arquitectura

Crea tu historia de color a partir de la elegancia arquitectónica. Ver más.

#b0d1da

#cfecf2

#be9a78

#a67a61

#251a16

Gama cromática naturaleza

Paletas de Naturaleza

Inspírate con los colores de los paisajes más salvajes de Adobe Stock. Ver más.

#34401a

#647330

#cad95a

#b4c05e

#252618

Gama cromática ui-ux

Paletas de UI UX

Encuentra las mejores creaciones interactivas, desde diseños punteros de UI/UX hasta iconos con el máximo detalle. Ver más.

#80a6f1

#3dd2f2

#022624

#87d80d

#f28a07

Colores de viaje

Paletas de Viajes

Encuentra la playa azul perfecta o el mar verde que buscabas con paletas inspiradoras basadas en las mejores imágenes de viajes. Ver más.

#45868c

#a1d9da

#d9c58a

#bf9764

#d92c04

Paletas Color Fooding

Paletas de Fooding

Explora colores tan ricos que casi podrás probarlos. Ver más.

#333e40

#f1a921

#d88014

#732002

#d94f1e

Crear nuestras paletas de color

Además de explorar gamas cromáticas, Adobe Color nos permite crear manualmente las nuestras propias. La selección de nuestros cinco colores puede realizarse de forma individual y selectiva, pero también usando reglas que se han demostrado ser efectivas: por ejemplo, los colores complementarios, la triada o los que se encuentran bajo una misma tonalidad son una apuesta segura en cerebros propios y ajenos.

Circulo Cromatico Adobe

También es muy interesante la extracción de una paleta de color o degradado de una imagen; para ellos simplemente has de ir a “Extraer Tema” o “Extraer Degradado” respectivamente en el menú superior. Por descontado, la plataforma nos permite trabajar en RGB, HSB y LAB y el código de color en HTML siempre estará visible para que lo puedas usar con facilidad.

Contraste de color y accesibilidad

Hasta ahora, para comprobar un contraste de colores era adecuado, debíamos recurrir a páginas webs como Contrast Ratio, Color Contrast Checker o WebAIM. Adobe incorpora recientemente esta funcionalidad bajo su sección de “Accesibilidad”. Habitualmente lo que se suele medir es el ratio de contraste (con un máximo de 21:1)  de los colores elegidos para que cumplan con las buenas prácticas en Web Content Accessibility Guidelines. Suele aplicarse a la relación existente entre el fondo y el texto u objetos gráficos y se rigen por:

  • Texto Pequeño nivel AA: ratio 4.5:1 o superior.
  • Texto Pequeño nivel AAA: ratio 7:1 o superior.
  • Texto Grande nivel AA: ratio 3:1 o superior.
  • Texto Grande nivel AAA: ratio 4.5:1 o superior.
  • Objetos gráficos y componentes UI nivel AA: ratio 3:1 o superior.

Una relación de contraste de 3:1 es el nivel mínimo recomendado por la ISO-9241-3 y ANSI-HFES-100-1988 para texto y visión estándar. La proporción de 4.5:1 es usada para tener en cuenta la pérdida de contraste que resulta de una agudeza visual moderadamente baja, deficiencias cromáticas congénitas o adquiridas, o la pérdida de sensibilidad al contraste que normalmente acompaña al envejecimiento.

Por su lado, el texto grande se define como un texto con un tamaño mínimo de 14 puntos o 18px en negrita o 18 puntos (normalmente 24px) en otros estilos.

Contrast Ratio WCAG

Contrast Ratio en otras aplicaciones

Como hemos adelantado Contrast RatioContrast Checker o WebAIM son otras plataformas en donde comprobar unos contrastes correctos. Además de las funcionalidades en cualquiera de ellas, Adobe se adelanta e incluye alguna adicional como la posibilidad de limitar a aquellos los colores seguros para daltónicos. ¡Bravo!

Color Contrast con Google Chrome

Para finalizar, si te dedicas al desarrollo de páginas web esta utilidad te será de gran ayuda. Seguro que estás muy acostumbrado a usar el inspector de Google Chrome o Firefox dentro de las herramientas de desarrollador que los navegadores ofrecen.

En el caso del primero, además de las funciones de debug, podrás comprobar cual es el ratio de contraste entre dos elementos de la web, especialmente entre los textos y el fondo. Lo único que debes hacer es pinchar sobre uno de los colores incluidos en Elements > Style. Si hay información de contraste la obtendremos inmediatamente, diferenciando entre los niveles AA y AAA del las Web Content Accessibility Guidelines (WCAG).

Google Chrome inspector

Ponle color a tu vida y pregúntanos lo que necesites.

Presupuestos, felicitaciones, quejas, dudas existenciales ·  hola@vivraestudio.com | +34 657035131 | +34 659648310  · 
Presupuestos, felicitaciones, quejas, dudas existenciales ·  hola@vivraestudio.com | +34 657035131 | +34 659648310  · 
Presupuestos, felicitaciones, quejas, dudas existenciales ·  hola@vivraestudio.com | +34 657035131 | +34 659648310  ·