Como se gera uma paleta semelhante à do design de materiais do Google?

As especificações de design do material do Google têm conjuntos de paletas de cores :

Começando com uma cor primária básica, que eles designam como "500", eles têm várias etapas incrementais de sombra, mais brilhantes e mais escuras, para criar uma faixa de cerca de 10 cores. O mais claro é designado "50" e é quase branco, e o mais escuro, "900", é quase preto, mas ambos retêm parte da cor base.

Não consigo determinar como os incrementos são calculados. Tentei este gerador de amostras on-line , mas não consigo discar no intervalo.

Eu acho que é apenas uma questão de ajustar a luminosidade para cima e para baixo a partir da cor "500" básica, e suponho que um valor de "0" seja branco puro e "1000" seja preto puro, mas os intervalos nas configurações do Google As paletas parecem ter mais saturação do que uma simples faixa de luminosidade.

Alguém sabe qual algoritmo ou processo posso usar para obter uma cor de base e gerar uma paleta alinhada com as paletas do Google?

Eu fiz essa pequena ferramenta CSS3 / AngularJS para um projeto para gerar paletas de cores dos materiais. Você pode inserir sua cor hexadecimal 500 e usar uma ferramenta externa como ColorZilla para obter os valores de cor a partir daí. Além disso, os mais leves são exatamente os que o Google usou, mas os mais escuros estão um pouco afastados.

mcg.mbitson.com

As paletas do Google são monocromáticas . O que mantém a mesma proporção RGB alterando a luminosidade e a saturação para cima ou para baixo. Para fazer isso, você deve converter o valor RGB em representação HSL (matiz, saturação, luminosidade), alterar a luminosidade e a saturação e, em seguida, converter novamente, se necessário. É possível mantê-lo no espaço RGB durante o cálculo, mas a matemática é muito confusa (para eu entender ou explicar). O HSL foi criado para a mistura tradicional de cores (é mais fácil pensar nisso).

Se seu objetivo é criar paletas CSS, você pode manter a cor em HSL usando background-color: hsl(0,100%, 50%);.

Você pode fazer isso manualmente no Photoshop usando o seletor de cores. O HSB é para brilho de saturação de matiz (sinônimo de HSL, mesma coisa). Escolha uma tonalidade desejada e altere a saturação e o brilho por um valor consistente. Na imagem abaixo, S = 54 e B = 77, aumente 5% usando 54 + 54 * 0.05e 77 + 77 * 0.05. Ou para mudar para baixoS - S * 0.05

Nota lateral para esclarecer entre Hex e RGB. Os 6 dígitos HEX # FFEB3B são na verdade 3 números separados, representando RGB.

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3Bconverter os valores HEX em decimal fornece a você red:255 green:235 blue:59 OR rgb(255,235,59).

Existem algoritmos para converter RGB em HSL, se você realmente os quer na Wikipedia, mas a maneira mais simples é usar uma biblioteca de cores. Este exemplo cria uma paleta monocromática com please.js e também possui outros algoritmos para criar paletas complementares ou agradáveis. Muito parecido com o kuler.adobe, que também é ótimo.

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

Você já tentou trabalhar com o Color Wheel da Adobe? Eu acho que é um pouco mais flexível do que a ferramenta SlayerOffice que você está usando.

https://color.adobe.com/

Para o seu caso exato, escolha "Shades" e tente brincar de lá. Não gera design de material como amostras, mas é um começo.

Você pode simplesmente baixar as paletas para as quais o Google fornece um link no site? Uma vez que lhe dá todas as cores?

Zip das amostras de cores do Google

Para gerar gradiente / paleta de cores a partir de determinada cor, essencialmente você pode usar o seguinte algoritmo.

1. Decida a tonalidade mínima e máxima desejada na sua paleta
2. Divida o 'espaço de cores' entre essas cores em uma partição igual (veja abaixo)
3. Cores de saída nestas etapas

Para dividir o espaço de cores entre, primeiro você pode converter a cor do seu HEX em RGB. Selecione valores em cada canal. Digamos que você tenha cor1 (r1, g1, b1) e cor2 (r2, g2, b2). E você quer 3 cores entre color1 e color2 , então você pode fazer 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)) 

Lembre-se de converter valores RGB entre (0 e 1).

No seu caso, você pode usar a cor base e dividir o espaço de cores entre white to basecolore basecolor to black. Você pode ajustar suas etapas de acordo com sua necessidade.

Finalmente, farei uma promoção vergonhosa da biblioteca python que criei, apenas porque é relevante para essa pergunta sobre a geração da paleta de cores. É chamado SecretColors . Você pode gerar paletas de cores próprias, gradientes ou usar paletas de cores padrão, como IBM, Material Design, ColorBrewer ou Clarity.