Comment créer une palette personnalisée avec une couleur personnalisée pour Material Design App?
Comment pourrais-je générer un design de matériau personnalisé palette comme le suivant?
Y a-t-il un outil autour ou quelque chose?
Il semble que quelqu'un ait demandé ceci dans la conception graphique: lien ici .
Le réponse acceptée vous mènera à le site de l'auteur qui est ce que je cherchais ( un outil qui génère votre palette pour vous , GG pour lui!).
En outre, le réponse avec le vote le plus élevé explique très bien comment la palette est faite, à mon humble avis.
Tous deux ont satisfait ma curiosité.
MISE À JOUR 22/06/2016
Il y a une nouvelle option disponible maintenant sur ce lien .
MISE À JOUR 03/08/2016
Je pense que cette réponse et l'application relative méritent également une mention.
MISE À JOUR 07/04/17
Après 2 ans, Big G a publié cet outil: https://material.io/ .
J'ai analysé de près la palette de couleurs Material Design et j'ai tiré quelques conclusions.
Il n'y a pas de logique de programme dans la palette de couleurs recommandée par Google, c'est absolument fait à la main. Les échantillons ont été choisis manuellement par le designer, mais ils ont un motif. Je vais parler brièvement de cette magie.
Nous avons une couleur de base primaire personnalisée (indice 500). Pour générer une palette personnalisée, mélangez la couleur de base avec du blanc (#FFFFFF) dans des taux de couleur de base: 12%, 30%, 50%, 70%, 85% (indices 50-400). Mélangez ensuite la couleur de base avec de la "couleur foncée profonde" à des taux de couleur de base proches de: 87%, 70%, 54%, 25%. Dans la palette de couleurs des matériaux, cette "couleur foncée profonde" est choisie manuellement par le concepteur, mais je calcule cette couleur en multipliant la couleur de base pour elle-même tant que le résultat présente une différence de contraste acceptable.
Pour les couleurs de base d'accentuation (indice A200), vous devez utiliser la couleur dans une harmonie de couleurs triade avec la couleur de base (indice 500). D'autres couleurs d'accent ont une saturation élevée (0,75 <S <= 1) et sont sélectionnées individuellement dans les variations de luminosité.
J'ai implémenté cette logique dans l'application gratuite Android Générateur de palettes de matériaux , qui peut créer et démontrer une palette de couleurs de conception de matériaux personnalisée sur l'interface utilisateur de l'application réelle.
Il y a n site Web que vous pouvez utiliser pour générer une palette de conception de matériaux.
Pour l'utiliser, sélectionnez d'abord deux couleurs:
Ensuite, consultez votre palette suggérée:
J'ai trouvé qu'ici, vous pouvez générer une palette de couleurs avec toute la couleur d'accent (manquée dans la réponse originale)
si vous voulez un exemple de code pour cela, vous pouvez utiliser ce code:
public int[] GetMaterialColors(String color){
int[] result = new int[14];
result[0] = shadeColor(color, 0.9 ); //----> 50
result[1] = shadeColor(color, 0.7 ); //----> 100
result[2] = shadeColor(color, 0.5 ); //----> 200
result[3] = shadeColor(color, 0.333 ); //----> 300
result[4] = shadeColor(color, 0.166 ); //----> 400
result[5] = shadeColor(color, 0 ); //----> 500
result[6] = shadeColor(color, -0.125); //----> 600
result[7] = shadeColor(color, -0.25 ); //----> 700
result[8] = shadeColor(color, -0.375); //----> 800
result[9] = shadeColor(color, -0.5 ); //----> 900
result[10] = shadeColor(color, 0.7 ); //----> A100
result[11] = shadeColor(color, 0.5 ); //----> A200
result[12] = shadeColor(color, 0.166); //----> A400
result[13] = shadeColor(color, -0.25); //----> A700
return result;
}
private static int shadeColor(String color, double percent) {
long f = Long.parseLong(color.substring(1), 16);
double t = percent < 0 ? 0 : 255;
double p = percent < 0 ? percent * -1 : percent;
long R = f >> 16;
long G = f >> 8 & 0x00FF;
long B = f & 0x0000FF;
int red = (int) (Math.round((t - R) * p) + R);
int green = (int) (Math.round((t - G) * p) + G);
int blue = (int) (Math.round((t - B) * p) + B);
return Color.rgb(red, green, blue);
}
Si vous utilisez Android studio, vous pouvez trouver la couleur matérielle la plus proche de votre couleur donnée.
Il existe en fait un outil conçu par Google pour le faire ici: https://material.io/inline-tools/color /
Il est utilisé comme un iFrame enterré dans leurs documents, ici-bas: https://material.io/design/color/the-color-system.html#tools-for-picking-colors
Aucune des autres réponses ici ou sur la conception graphique ne semble le mentionner.