En quoi consistent exactement les échantillons de couleur "500" de Google?


36

J'ai lu des articles sur le Material Design de Google et sur Style, ils continuent de mentionner les 500 couleurs primaires (ainsi que tout autre nombre compris entre 50, ce qui est presque blanc, et 900), mais que fait-on? cette moyenne?

J'aimerais beaucoup essayer de créer mes propres nuances de couleurs "inspirées par le matériau", mais comme leur nom me confond, je ne sais pas trop par où commencer. J'ai essayé de chercher une réponse sur Google (ce qui me semble quelque peu ironique), mais je n'ai pas encore trouvé de réponses concluantes. Si je devais deviner, il semblerait que cela ait quelque chose à voir avec la longueur d'onde de la couleur?

On mentionne également les couleurs A100 à A700 ...


8
Seul Google pourrait proposer un système de couleurs que les graphistes ne peuvent pas comprendre.
Simon White

Réponses:


21

Je me le demandais moi-même.

Premièrement, "500" ne semble pas indiquer le nombre de couleurs, mais le système de numérotation étrange qu’elles utilisent. 500 est la base, 400 est plus claire que la base, 600 est plus sombre. C'est assez similaire à la façon dont les poids de police sont numérotés ( info ), alors peut-être que cela a quelque chose à voir avec cela.

J'ai trouvé que certains des nombres inférieurs à 500 sont trouvés en les fondant en blanc (mode de fusion "Écran" dans Photoshop) ou en noir ("Multiplier").

  • 900: 59% (proche)
  • 600: 10% (presque exact)
  • 500: base
  • 400: 15% (exact)
  • 300: 30% (exact)
  • 200: 50% (exact)
  • 100: 70% (proche)
  • 50: 88% (exact)

Je ne vois pas de modèle ici. Et peut-être qu'il n'y en a pas. Ou peut-être qu'il y a quelque chose d'évident que je néglige; Je suis assez mauvais en matière de couleurs.


1
Hm, j'espérais que cela représenterait quelque chose de plus spécifique. Mais je suppose que c'est juste la façon dont Google nomme les couleurs. Merci pour la réponse au moins!
Cleverbird

1
Cette numérotation des couleurs est-elle un standard de l’industrie de facto ?
Youngjae

2
@ Youngjae no. Pas du tout.
DA01

11

Je vais laisser cela ici parce que ce sont de nouvelles informations sur le sujet.

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

Publié le 28 mai 2015

Un peu rouillé sur votre théorie des couleurs? La conception matérielle rend la couleur facile. Pour en savoir plus sur la couleur et la conception des matériaux, visitez le site www.google.com/design .

ETA: Les couleurs primaires (les 500) sont des couleurs que Google a choisies comme "couleur principale" (ou couleurs) sur lesquelles vous basez votre dessin. Vous commencez avec le primaire 500, puis passez du clair au foncé; ces couleurs sont appliquées à différents éléments de l'interface utilisateur.

Les 500 décrivent le thème dominant dans le produit (et sont parfaits pour les barres d’outils). De là-bas, réglez jusqu’à 700 secondes pour les barres d’état ou jusqu’à 300 pour les informations secondaires. Ils sont parfaits pour mettre en surbrillance les boutons d’action principaux, les boutons standard, les commutateurs et les curseurs.

Ce qui est intéressant, c’est que les informations contenues dans cette vidéo semblent contredire, ou du moins de manière incohérente, les informations fournies par Google sur la page de palette mentionnée ci-dessus ( http://www.google.com/design/spec/style/color .html # couleur-couleur-palette ).

Sur la page de la palette, ils indiquent "Google suggère d'utiliser les 500 couleurs comme couleurs primaires dans votre application et les autres couleurs comme couleurs d' accent ". Dans la vidéo, ils indiquent "Les couleurs A sont des couleurs d'accent ..."

Certes, une différence subtile, mais si Google doit développer un guide de style, il doit être cohérent avec l'utilisation du mot " accent ".


5

Vous avez peut-être déjà trouvé cette ressource, mais Google a mis au point un guide extrêmement pratique pour aider les développeurs et les concepteurs à se synchroniser avec la nouvelle ambiance Material.

Le guide complet peut être trouvé ici - http://www.google.com/design/spec/material-design/introduction.html#

Spécifiquement, cette page permet de télécharger toutes les couleurs préférées - http://www.google.com/design/spec/style/color.html#color-color-palette


3
C’est exactement là où j’ai trouvé le terme «500 couleurs primaires», mais ce que j’essaie de comprendre, c’est à quoi se réfère ce chiffre.
Cleverbird

4

Voici la réponse à votre question .. regardez cette vidéo

Les 500 sont des couleurs primaires qui décrivent parfaitement le thème dominant de votre produit et conviennent parfaitement aux barres d’outils.

700s sont utilisés pour les barres d'état

et 300s sont utilisés pour les informations secondaires

Donc, fondamentalement, ces chiffres représentent des nuances et des teintes prédéfinies de couleurs primaires pour des sections / parties spécifiques du dessin.


0

À mon avis, la convention de dénomination est basée sur la convention de dénomination de poids des webfont:

  • 500: base
  • <500: plus mince / plus léger
  • > 500: plus épais / plus foncé

Une manière très utile et logique de nommer quelque chose avec une ligne de base et des variations.

Capture d'écran de la page GitHub de la police Inter

Lien de référence: Lien vers la page GitHub de la police de caractères Inter

À titre d'exemple, voici une capture d'écran de la police "Inter" de Mozilla qui utilise ce nom, mais dans leur cas, le poids normal / de base est numéroté 400. Beaucoup de polices utilisent en réalité 400 comme poids "normal", mais il s'agit un autre sujet.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.