¿Cómo se genera una paleta similar a las del diseño de materiales de Google?

Las especificaciones de diseño de materiales de Google tienen conjuntos de paletas de colores :

Comenzando con un color primario base, que designan como "500", luego tienen una gama de pasos incrementales de sombra, más brillante y más oscuro, para crear un rango de aproximadamente 10 colores. El más claro se designa como "50", y es casi blanco, y el más oscuro, "900", es casi negro, pero ambos conservan parte del color base.

No puedo determinar cómo se calculan los incrementos. Probé este generador de muestras en línea , pero parece que no puedo marcar en el rango.

Creo que es solo una cuestión de ajustar la luminosidad hacia arriba y hacia abajo desde el color base "500", y supongo que un valor de "0" sería blanco puro y "1000" sería negro puro, pero los rangos en Google Las paletas parecen tener más saturación que un simple rango de luminosidad.

¿Alguien sabe qué algoritmo o proceso puedo usar para tomar un color base y generar una paleta en línea con las paletas de Google?

Hice esta pequeña herramienta CSS3 / AngularJS para un proyecto para generar paletas de colores de materiales. Puede ingresar su color hexadecimal 500 y usar una herramienta externa como ColorZilla para obtener los valores de color desde allí. También los más claros son exactamente los que usó Google, pero los más oscuros están un poco apagados.

mcg.mbitson.com

Las paletas de google son monocromáticas . Lo que mantiene la misma relación RGB cambiando la luminosidad y la saturación hacia arriba o hacia abajo. Para hacer esto, debe convertir el valor RGB a representación HSL (Tono, Saturación, Luminosidad), alterar la luminosidad y la saturación y luego volver a convertir si es necesario. Es posible mantenerlo en el espacio RGB mientras se calcula, pero las matemáticas son demasiado confusas (para que yo las entienda o explique). HSL fue creado para la mezcla de colores tradicional (es más fácil para nosotros pensar).

Si su objetivo es hacer paletas CSS, puede mantener el color en HSL usando background-color: hsl(0,100%, 50%);.

Puede hacer esto manualmente en Photoshop utilizando el selector de color. El HSB es para el brillo de saturación de tono (sinónimo de HSL, lo mismo). Elija un tono que le guste y modifique la Saturación y el Brillo por un valor consistente. En la imagen a continuación S = 54 y B = 77, suba un 5% usando 54 + 54 * 0.05y 77 + 77 * 0.05. O para bajarS - S * 0.05

Nota al margen para aclarar entre Hex y RGB. Los 6 dígitos HEX # FFEB3B son en realidad 3 números separados, que representan RGB.

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3Bconvertir los valores HEX a decimal te da red:255 green:235 blue:59 OR rgb(255,235,59).

Hay algoritmos para convertir RGB a HSL si realmente los quiere en Wikipedia, pero la forma más sencilla es usar una biblioteca de colores. Este ejemplo hace una paleta monocromática con please.js también tiene otros algoritmos para crear paletas complementarias o agradables. Al igual que kuler.adobe, que también es genial.

Please.make_scheme(
    Please.HEX_to_HSV('#ffeb3b'),
    {scheme_type: 'mono', format:'hex'}
);
// returns ->["#ffeb3b", "#ffe821", "#ffe508", "#e5d54c"]

¿Has intentado trabajar con Adobe's Color Wheel? Creo que es un poco más flexible que la herramienta SlayerOffice que estás usando.

https://color.adobe.com/

Para su caso exacto, elija "Sombras" e intente perder el tiempo desde allí. No generará diseño de material como muestras, pero es un comienzo.

¿Podrías descargar las paletas a las que Google da un enlace en el sitio? ¿Ya que te da todos los colores?

Zip de muestras de color de Google

Para generar gradiente de color / paleta a partir de un color dado, esencialmente puede usar el siguiente algoritmo.

1. Decide el tono mínimo y máximo que deseas en tu paleta
2. Divida el 'espacio de color' entre estos colores en una partición igual (ver más abajo)
3. Salida de colores en estos pasos

Para dividir el espacio de color entre, primero puede convertir el color de su HEX a RGB. Seleccione valores en cada canal. Digamos que tiene color1 (r1, g1, b1) y color2 (r2, g2, b2). Y desea 3 colores entre color1 y color2 , entonces puede hacer algo como seguir

all_colors = []
steps = no_of_colors + 1
rdelta, gdelta, bdelta = (r2 - r1) / steps, (g2 - g1) / steps, (b2 - b1) / steps
for step in range(steps - 1):
    r1 += rdelta
        g1 += gdelta
        b1 += bdelta
all_colors.append((r1, g1, b1)) 

Recuerde convertir los valores RGB entre (0 a 1).

En su caso, puede tomar el color base y dividir el espacio de color entre white to basecolory basecolor to black. Puede ajustar sus pasos según sus necesidades.

Finalmente, voy a hacer una promoción descarada de la biblioteca de Python que creé, solo porque es relevante para esta pregunta con respecto a la generación de paletas de colores. Se llama SecretColors . Puede generar paletas de colores, degradados propios o utilizar paletas de colores estándar como IBM, Material Design, ColorBrewer o Clarity.