O que exatamente são as amostras de cores '500' do Google?

Estive lendo sobre o Material Design do Google e, ao ler sobre Style, eles continuam mencionando 500 cores primárias (assim como qualquer outro número que varia de 50, que é quase branco, a 900), mas o que faz isto significa?

Eu adoraria tentar criar minhas próprias amostras de cores "inspiradas em materiais", mas como o nome de suas cores me confunde, não sei por onde começar. Tentei pesquisar no Google por uma resposta (que de alguma forma parece um pouco irônica), mas até agora não encontrei respostas conclusivas. Se eu tivesse que adivinhar, parece que tem algo a ver com o comprimento de onda da cor?

Há também menção de cores A100 a A700 ...

Eu estive me perguntando isso.

Primeiro, "500" parece não indicar quantas cores existem, mas o estranho sistema de numeração que eles usam. 500 é a base, 400 é mais leve que a base, 600 é mais escuro. Isso é bastante semelhante à forma como os pesos das fontes são numerados ( informações ), então talvez isso tenha algo a ver com isso.

Descobri que alguns dos números abaixo de 500 são encontrados desbotando-os em branco (modo de mesclagem "Tela" no Photoshop) ou preto ("Multiplicar").

• 900: 59% (fechar)
• 600: 10% (quase exato)
• 500: Base
• 400: 15% (exato)
• 300: 30% (exato)
• 200: 50% (exato)
• 100: 70% (fechado)
• 50: 88% (exato)

Não estou vendo um padrão aqui. E talvez não haja um. Ou talvez haja algo óbvio que estou ignorando; Eu sou muito ruim em esquemas de cores.

Vou deixar isso aqui porque são novas informações sobre o tema.

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

Publicada em 28 de maio de 2015

Um pouco enferrujado na sua teoria das cores? O design do material facilita a cor. Saiba mais sobre design de cores e materiais em www.google.com/design .

ETA: as cores primárias (as 500) são as cores que o Google escolheu como a "cor principal" (ou cores) em que você baseia seu design. Você começa com o 500 primário e depois escala do claro ao escuro; essas cores são aplicadas a diferentes elementos na interface do usuário.

Os 500s descrevem o tema dominante no produto (e são ótimos para barras de ferramentas). A partir daí, escalem até 700s para barras de status ou até 300 para informações secundárias. As cores A são cores de destaque - interação encorajadora mais brilhante e mais saturada. Eles são perfeitos para destacar os botões de ação principais, botões padrão, comutadores e controles deslizantes.

O interessante é que as informações neste vídeo parecem contradizer ou, pelo menos de forma inconsistente, as informações que o Google fornece na página da paleta mencionada acima ( http://www.google.com/design/spec/style/color .html # color-color-palette ).

Na página da paleta, eles dizem "O Google sugere usar as 500 cores como cores primárias no seu aplicativo e as outras cores como cores de destaque " No vídeo, elas dizem "As cores A são cores de destaque ..."

É uma diferença sutil, mas se o Google desenvolver um guia de estilo, ele deve ser consistente com o uso da palavra " sotaque ".

Talvez você já tenha encontrado esse recurso, mas o Google reuniu um guia incrivelmente útil para ajudar desenvolvedores e designers a sincronizarem com a nova vibe Material.

O guia completo pode ser encontrado aqui - http://www.google.com/design/spec/material-design/introduction.html#

Especificamente, esta página disponibiliza todas as cores favoritas para download - http://www.google.com/design/spec/style/color.html#color-color-palette

Aqui está a resposta para sua pergunta. Confira este vídeo

Os anos 500 são cores primárias perfeitas que descrevem o tema dominante em seu produto e são ótimos para barras de ferramentas.

700s são usados ​​para barras de status

e 300s são usados ​​para informações secundárias

Então, basicamente, esses números representam tons e tonalidades predefinidas de cores primárias para seções / partes específicas do design.

Na minha opinião, a convenção de nomenclatura é baseada na convenção de nomenclatura de peso da webfont:

• 500: base
• <500: mais fino / mais leve
• > 500: mais espessa / mais escura

Uma maneira muito útil e lógica de nomear algo com uma linha de base e variações.

Link de referência: Link para a página GitHub da fonte Inter

Como exemplo, aqui está uma captura de tela da fonte "Inter" do Mozilla que utiliza essa nomeação de peso de fonte, mas, no caso deles, o peso normal / base é numerado como 400. Muitas fontes realmente usam 400 como peso "regular", mas isso é outro assunto.