Come si genera una tavolozza simile a quelle nella progettazione dei materiali di Google?

Le specifiche di progettazione dei materiali di Google hanno set di tavolozze di colori :

A partire da un colore primario di base, che designano come "500", hanno quindi una gamma di gradini incrementali di tonalità, più chiara e più scura, per creare una gamma di circa 10 colori. Il più chiaro è designato "50", ed è quasi bianco, e il più scuro, "900", è quasi nero, ma entrambi mantengono parte del colore di base.

Non riesco a determinare come vengono calcolati gli incrementi. Ho provato questo generatore di campioni online , ma non riesco a comporre il numero.

Penso che sia solo una questione di regolazione della luminosità su e giù dal colore "500" di base, e immagino che un valore di "0" sarebbe bianco puro e "1000" sarebbe nero puro, ma le gamme di Google le palette sembrano avere più saturazione di una semplice gamma di luminosità.

Qualcuno sa quale algoritmo o processo posso usare per prendere un colore di base e generare una tavolozza in linea con le tavolozze di Google?

Ho creato questo piccolo strumento CSS3 / AngularJS per un progetto per generare palette di colori materiali. Puoi inserire il tuo colore esadecimale 500 e utilizzare uno strumento esterno come ColorZilla per ottenere i valori di colore da lì. Anche quelli più chiari sono esattamente quelli usati da Google, ma quelli più scuri sono leggermente più spenti.

mcg.mbitson.com

Le palette di Google sono monocromatiche . Ciò mantiene lo stesso rapporto RGB spostando la Luminosità e la saturazione verso l'alto o verso il basso. Per fare questo devi convertire il valore RGB in rappresentazione HSL (Tonalità, Saturazione, Luminosità), modificare la luminosità e la saturazione, quindi riconvertire se necessario. È possibile tenerlo nello spazio RGB durante il calcolo, ma la matematica è troppo confusa (per me capire o spiegare). HSL è stato creato per la miscelazione tradizionale dei colori (è più facile per noi pensarci).

Se il tuo obiettivo è creare palette CSS, puoi mantenere il colore in HSL usando background-color: hsl(0,100%, 50%);.

Puoi farlo manualmente in Photoshop usando il selettore colore. L'HSB è per la tonalità della saturazione della luminosità (sinonimo di HSL, stessa cosa). Scegli una tonalità che ti piace e modifica la saturazione e la luminosità di un valore coerente. Nell'immagine sotto S = 54 e B = 77, spostati verso l'alto del 5% usando 54 + 54 * 0.05e 77 + 77 * 0.05. O per spostarti verso il bassoS - S * 0.05

Nota a margine per chiarire tra esadecimale e RGB. Il 6 cifre HEX # FFEB3B è in realtà 3 numeri separati, che rappresentano RGB.

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3Bla conversione dei valori esadecimali in decimali ti dà red:255 green:235 blue:59 OR rgb(255,235,59).

Ci sono algoritmi per convertire RGB in HSL se li vuoi davvero su Wikipedia, ma il modo più semplice è usare una lib di colore. Questo esempio crea una tavolozza monocromatica con please.js e ha anche altri algoritmi per la creazione di tavolozze complementari o gradevoli. Proprio come kuler.adobe, che è anche rock.

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

Hai provato a lavorare con la ruota dei colori di Adobe? Penso che sia un po 'più flessibile dello strumento SlayerOffice che stai utilizzando.

https://color.adobe.com/

Per il tuo caso esatto, scegli "Tonalità" e prova a scherzare da lì. Non genererà un design materiale come i campioni, ma è un inizio.

Potresti semplicemente scaricare le tavolozze a cui Google fornisce un link sul sito? Dal momento che ti dà tutti i colori?

Google Color Swatches Zip

Per generare la sfumatura / tavolozza dei colori da un determinato colore, in sostanza è possibile utilizzare il seguente algoritmo.

1. Decidi la tonalità minima e massima che desideri nella tua tavolozza
2. Dividi 'spazio colore' tra questi colori in una partizione uguale (vedi sotto)
3. Colori di output su questi passaggi

Per dividere lo spazio colore tra, per prima cosa puoi convertire il tuo esadecimale colore in RGB. Seleziona i valori in ciascun canale. Supponiamo che tu abbia color1 (r1, g1, b1) e color2 (r2, g2, b2). E vuoi 3 colori tra color1 e color2 , quindi puoi fare qualcosa come seguire

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)) 

Ricorda di convertire i valori RGB tra (da 0 a 1).

Nel tuo caso, puoi prendere il colore di base e dividere lo spazio colore tra white to basecolore basecolor to black. Puoi adattare i tuoi passi in base alle tue necessità.

Infine, farò una promozione spudorata della libreria Python che ho creato, solo perché è rilevante per questa domanda riguardante la generazione di palette di colori. Si chiama SecretColors . È possibile generare palette di colori, sfumature o utilizzare palette di colori standard come IBM, Material Design, ColorBrewer o Clarity.