Para aquellos que pueden no tener experiencia en diseño, la selección de una paleta de colores a menudo se basa en preferencias personales. La elección de colores se puede hacer con una herramienta de color en línea, tomando muestras de una imagen, “tomando prestado” de marcas favoritas, o simplemente eligiendo al azar de una rueda de colores hasta que una paleta “se sienta bien”.
Nuestro objetivo es comprender mejor qué hace que una paleta se “sienta bien” al explorar los atributos de color clave con las funciones de color de Sass. Al final, se familiarizará más con:
- El valor de graficar la luminancia, la luminosidad y la saturación de una paleta para ayudar a crear paletas equilibradas
- La importancia de incorporar comprobaciones de contraste accesibles en sus herramientas
- Funciones avanzadas de Sass para ampliar sus propias exploraciones, incluido un CodePen que puede manipular y bifurcar
Sin embargo, lo que finalmente encontrará es que el color en la web es una batalla entre el hardware y la percepción humana.
Lo que hace que los gráficos en color sean útiles
Es posible que esté familiarizado con las formas de declarar colores en las hojas de estilo, como los valores RGB y RGBA, los valores HSL y HSLA y los códigos HEX.
rbg(102,51,153)
rbga(102,51,153, 0.6)
hsl(270, 50%, 40%)
hsla(270, 50%, 40%, 0.6)
#663399Esos valores dan instrucciones a los dispositivos sobre cómo reproducir el color. Los atributos más profundos de un color se pueden exponer mediante programación y aprovechar para comprender cómo se relaciona un color con una paleta más amplia.
El valor de graficar atributos de color es que obtenemos una imagen más completa de la relación entre los colores. Esto revela por qué una colección de colores puede o no sentirse bien juntos. Graficar múltiples atributos de color ayuda a sugerir qué ajustes se pueden hacer para crear una paleta más armoniosa. Veremos ejemplos de cómo determinar qué cambiar en una sección posterior.
Dos medidas útiles que podemos obtener fácilmente usando las funciones de color integradas de Sass son la luminosidad y la saturación.
- La luminosidad se refiere a la mezcla de blanco o negro con el color.
- La saturación se refiere a la intensidad de un color, con un 100 % de saturación que da como resultado el color más puro (sin presencia de gris).
$color: rebeccapurple;
@debug lightness($color);
// 40%
@debug saturation($color);
// 50%;Sin embargo, podría decirse que la luminancia es el atributo de color más útil. La luminancia, tal como se representa en nuestra herramienta, se calcula utilizando la fórmula WCAG que asume un espacio de color sRGB. La luminancia se usa en los cálculos de contraste y, como un concepto más amplio, también tiene como objetivo acercarse a la cuantificación de la percepción humana del brillo relativo para evaluar las relaciones de color. Esto significa que es probable que el ojo humano perciba un rango de valores de luminancia más ajustado dentro de una paleta como más equilibrado. Pero las máquinas son falibles y existen excepciones a esta regla que puede encontrar al manipular los valores de la paleta. Para obtener información más detallada sobre la luminancia y un espacio de color único llamado CIELAB que tiene como objetivo representar con mayor precisión la percepción humana de la uniformidad del color, consulte los enlaces al final de este artículo.
Además, el contraste de color es excepcionalmente importante para la accesibilidad, particularmente en términos de legibilidad y elementos distintivos de la interfaz de usuario, que se pueden calcular mediante programación. Eso es importante porque significa que las herramientas pueden probar los valores de paso. También significa que los algoritmos pueden, por ejemplo, devolver un color de texto apropiado cuando se les pasa el color de fondo. Por lo tanto, nuestra herramienta incorporará la verificación de contraste como una forma adicional de evaluar cómo ajustar su paleta.
Las funciones demostradas en este proyecto se pueden extraer para ayudar a planificar una paleta de sistema de diseño de contraste seguro, o integrarse en un marco Sass que permite definir un tema personalizado.
Sass como herramienta de creación de paletas
Sass proporciona varias funciones de programación tradicionales que lo hacen perfecto para nuestras necesidades, como la creación e iteración de matrices y la manipulación de valores con funciones personalizadas. Cuando se combina con un IDE en línea, como CodePen, que tiene procesamiento en tiempo real, esencialmente podemos crear una aplicación web para resolver problemas específicos, como crear una paleta de colores.
Aquí hay una vista previa de la herramienta que vamos a usar:
Ver la pluma
Sass Color Palette Grapher de Stephanie Eckles (@5t3ph)
en CodePen.
Características del generador de paletas Sass
- Produce un gráfico receptivo controlado por relación de aspecto para una ubicación precisa del punto de la trama y una comparación de valores.
- Aprovecha el resultado de las funciones de color y los cálculos matemáticos de Sass para trazar puntos correctamente en una escala de 0 a 100 %.
- Genera un degradado para proporcionar una vista de “muestra” más tradicional.
- Utiliza funciones integradas de Sass para extraer valores de saturación y luminosidad.
- Crea funciones de luminancia y contraste (bifurcadas de Material Web Components además de vincular los valores de canal de color lineal precalculado requeridos).
- Devuelve el color de texto apropiado para un fondo determinado, con una variable de configuración para cambiar la proporción utilizada.
- Proporciona funciones para escalar uniformemente la saturación y la luminosidad en una paleta determinada.
Usando el generador de paletas
Para comenzar, es posible que desee cambiar entre las paletas de ejemplo proporcionadas para tener una idea de cómo cambian los valores del gráfico para diferentes tipos de gamas de colores. Simplemente copie el nombre de una variable de paleta y cámbielo por $default como el valor de la $palette variable que se puede encontrar debajo del comentario SWAP THE PALETTE VARIABLE.
A continuación, intente cambiar el $contrastThreshold valor variable entre las proporciones predefinidas, especialmente si está menos familiarizado con garantizar que el contraste pase las pautas de las WCAG.
Luego intente ajustar el $palette-scale-lightness o $palette-scale-saturation valores. Esos alimentan el palette y escalar uniformemente esas medidas en toda la paleta (hasta el límite del color individual).
Finalmente, intente agregar su propia paleta o intercambie algunos colores dentro de los ejemplos. La herramienta es una excelente manera de explorar las funciones de color de Sass para ajustar atributos particulares de un color, algunos de los cuales se muestran en el $default paleta.
Interpretar los gráficos y crear paletas equilibradas y accesibles
La herramienta de gráficos muestra de forma predeterminada la luminancia debido a que es el indicador más confiable de una paleta equilibrada, como discutimos anteriormente. Dependiendo de sus necesidades, la saturación y la luminosidad pueden ser métricas útiles por sí solas, pero en su mayoría son señales que pueden ayudar a señalar qué necesita ajustarse para alinear más la luminancia de una paleta. Una excepción puede ser crear una escala de luminosidad basada en cada valor en su paleta establecida. Puedes cambiar a la $stripeBlue ejemplo para eso.
El $default la paleta realmente necesita un ajuste para acercarse a la luminancia equilibrada:
El $default gráfico de luminancia de la paleta
Una paleta que muestra una luminancia bien equilibrada es la muestra de Stripe ($stripe):
El $stripe gráfico de luminancia de paleta
Aquí es donde la herramienta invita a un cambio de mentalidad. En lugar de manipular una rueda de colores, aprovecha las funciones de Sass para ajustar los atributos de color mediante programación.
Revisa el gráfico de saturación para ver si tienes espacio para jugar con la intensidad del color. Mi ajuste recomendado es envolver su valor de color con el scale-color función y pasar un ajustado $saturation valor, por ejemplo: scale-color(#41b880, $saturation: 60%). La ventaja de scale-color es que ajusta de forma fluida el valor en función del porcentaje dado.
La luminosidad puede ayudar a explicar por qué dos colores se sienten diferentes al asignar un valor a su brillo comparado con mezclarlos con blanco o negro. En el $default paleta, la change-color función se utiliza para purple para alinear es relativo $lightness valor con el calculado lightness() del valor utilizado para el red.
El scale-color función también permite agrupar tanto una ajustada $saturation y $lightness valor, que suele ser el más útil. Tenga en cuenta que los porcentajes proporcionados pueden ser negativos.
Haciendo uso de las funciones de Sass y comprobando los gráficos de saturación y luminosidad, el $defaultBalancedLuminance logra una luminancia equilibrada. Esta paleta también utiliza el map-get función para copiar valores de la $default paleta y aplique más ajustes en lugar de sobrescribirlos, lo cual es útil para probar múltiples variaciones, como quizás un cambio de tono en una paleta.
El $defaultBalancedLuminance gráfico de luminancia
Tómese un minuto para explorar otras funciones de color disponibles.
http://jackiebalzer.com/color ofrece una excelente aplicación web para revisar los efectos de las funciones de color Sass y Compass.
El contraste entra en juego cuando se considera cómo se usarán realmente los colores de la paleta en una interfaz de usuario. La herramienta utiliza por defecto el contraste AA más apropiado para todo el texto: 4.5. Si está creando para una interfaz de usuario clara, considere que cualquier color que se use en el texto debe lograr un contraste adecuado con el blanco cuando se ajusta contra la luminancia, indicada por el color central del punto de trazado.
Propina: El gráfico está configurado con un fondo transparente, por lo que puede agregar un background gobernar sobre body si está desarrollando para una interfaz de usuario más oscura.
Otras lecturas
El color es un tema extenso y este artículo solo aborda los aspectos relacionados con las funciones de Sass. Pero para comprender verdaderamente cómo crear sistemas de colores armoniosos, recomiendo los siguientes recursos:
- Espacios de color: es una inmersión profunda súper impresionante con modelos interactivos de varios espacios de color y cómo se calculan.
- Comprender los colores y la luminancia: una descripción general para principiantes de MDN sobre el color y la luminancia y su relación con la accesibilidad.
- Espacios de color perpetuamente uniformes: más información sobre sistemas de color perceptualmente uniformes, con una introducción a la herramienta HSLuv que convierte valores del espacio de color HSL más familiar al espacio de color CIELUV ajustado por luminancia.
- Sistemas de color accesibles: un estudio de caso de Stripe sobre su experiencia en la creación de un sistema de color accesible mediante la creación de herramientas personalizadas (que inspiró esta exploración y este artículo).
- Una guía para nerds sobre el color en la web: esta es una exploración fantástica de la mecánica del color en la web, disponible aquí mismo en CSS-Tricks.
- Tanaguru Contrast Finder: una herramienta increíble para ayudarlo si tiene dificultades para ajustar los colores para lograr un contraste accesible.
- ColorBox: una aplicación web de Lyft que explora aún más las escalas de color a través de gráficos.
- Diseño de colores sistemáticos: describe el esfuerzo excepcional de Mineral UI para crear rampas de color para respaldar una tematización consistente a través de una paleta perfeccionada de luminancia.
- Cómo diseñamos las nuevas paletas de colores en Tableau 10: Tableau expuso las características de su herramienta personalizada que los ayudó a crear una paleta actualizada basada en CIELAB, incluida una descripción general accesible de ese espacio de color.