Quali sono esattamente i campioni di colore "500" di Google?

Ho letto su Material Design di Google e mentre leggo su Style, continuano a menzionare 500 colori primari (così come qualsiasi altro numero che va da 50, che è quasi bianco, a 900), ma cosa fa questo significa?

Mi piacerebbe provare a creare i miei campioni di colore "Materiale ispirato", ma poiché la denominazione dei loro colori mi confonde, non sono sicuro da dove cominciare. Ho provato a cercare su Google una risposta (che in qualche modo sembra un po 'ironica), ma finora non ho trovato risposte molto conclusive. Se dovessi indovinare, sembra che abbia qualcosa a che fare con la lunghezza d'onda del colore?

Si parla anche di colori da A100 a A700 ...

Me lo stavo chiedendo da solo.

Innanzitutto, "500" non sembra indicare quanti colori ci sono, ma lo strano sistema di numerazione che usano. 500 è la base, 400 è più leggera della base, 600 è più scura. È abbastanza simile al modo in cui i pesi dei caratteri sono numerati ( informazioni ), quindi forse ha qualcosa a che fare con esso.

Ho scoperto che alcuni dei numeri inferiori a 500 si trovano dissolvendoli in bianco (metodo di fusione "Schermo" in Photoshop) o nero ("Moltiplica").

• 900: 59% (chiuso)
• 600: 10% (quasi esatto)
• 500: Base
• 400: 15% (esatto)
• 300: 30% (esatto)
• 200: 50% (esatto)
• 100: 70% (chiuso)
• 50: 88% (esatto)

Non vedo uno schema qui. E forse non ce n'è uno. O forse c'è qualcosa di ovvio che sto trascurando; Sono piuttosto cattivo con la combinazione di colori.

Lascio questo qui perché sono nuove informazioni sull'argomento.

https://www.youtube.com/watch?t=73&v=xYkz0Ueg0L4

Pubblicato il 28 maggio 2015

Un po 'arrugginito sulla tua teoria dei colori? Il design del materiale semplifica il colore. Scopri di più sul design dei colori e dei materiali su www.google.com/design .

ETA: i colori primari, (i 500) sono i colori che Google ha scelto come "colore principale" (o colori) su cui si basa il disegno. Si inizia con il 500 primario, quindi si scala da chiaro a scuro; questi colori vengono applicati a diversi elementi nell'interfaccia utente.

Le 500 descrivono il tema dominante nel prodotto (e sono grandiose per le barre degli strumenti). Da lì scala fino a 700 per le barre di stato o fino a 300 per le informazioni secondarie. I colori A sono colori di accento: più luminosi e più saturi che favoriscono l'interazione. Questi sono perfetti per evidenziare pulsanti di azione primari, pulsanti standard, interruttori e cursori.

Ciò che è interessante è che le informazioni in questo video sembrano contraddire, o almeno incoerentemente esposte, le informazioni che Google fornisce sulla loro pagina della palette menzionata sopra ( http://www.google.com/design/spec/style/color .html # color-color-palette ).

Sulla pagina della palette dicono "Google suggerisce di utilizzare i 500 colori come colori primari nella tua app e gli altri colori come colori di accento " Nel video si dice "I colori A sono colori di accento ..."

Concessa, sottile differenza, ma se Google svilupperà una guida di stile dovrebbero essere coerenti con l'uso della parola " accento ".

Forse hai già trovato questa risorsa, ma Google ha messo insieme una guida incredibilmente utile per aiutare gli sviluppatori e i designer a sincronizzarsi con la nuova vibrazione di Material.

L'intera guida è disponibile qui: http://www.google.com/design/spec/material-design/introduction.html#

In particolare, questa pagina rende disponibili per il download tutti i loro colori preferiti - http://www.google.com/design/spec/style/color.html#color-color-palette

Ecco la risposta alla tua domanda .. guarda questo video

I 500 sono colori primari perfetti che descrivono il tema dominante nel tuo prodotto e sono perfetti per le barre degli strumenti.

700 sono usati per le barre di stato

e 300s sono usati per informazioni secondarie

Quindi in sostanza quei numeri rappresentano tonalità e tinte predefinite di colori primari per specifiche sezioni / parti del disegno.

A mio avviso, la convenzione di denominazione si basa sulla convenzione di denominazione del peso di webfont:

• 500: base
• <500: più sottile / più leggero
• > 500: più spesso / più scuro

Un modo molto utile e logico di nominare qualcosa con una base e variazioni.

Link di riferimento: collegamento alla pagina GitHub del font Inter

Ad esempio, ecco uno screenshot del carattere "Inter" di Mozilla che utilizza tale denominazione in base al peso, ma nel loro caso il peso normale / di base è numerato come 400. Molti caratteri usano effettivamente 400 come peso "normale", ma questo è un altro argomento.