¿Qué son exactamente las muestras de color '500' de Google?

He estado leyendo sobre el Diseño de materiales de Google, y mientras leo sobre Estilo, siguen mencionando 500 colores primarios (así como cualquier otro número que vaya desde 50, que es casi blanco, hasta 900), pero ¿qué hace? ¿esto significa?

Me encantaría intentar crear mis propias muestras de color "inspiradas en el material", pero como el nombre de sus colores me confunde, no estoy muy seguro de por dónde empezar. Traté de buscar una respuesta en Google (que de alguna manera se siente un poco irónico), pero hasta ahora no he encontrado muchas respuestas concluyentes. Si tuviera que adivinar, ¿parece que tiene algo que ver con la longitud de onda del color?

También se mencionan los colores A100 a A700 ...

Me lo he estado preguntando.

Primero, "500" no parece indicar cuántos colores hay, sino el extraño sistema de numeración que usan. 500 es la base, 400 es más claro que la base, 600 es más oscuro. Eso es bastante similar a cómo se numeran los pesos de las fuentes ( información ), así que tal vez eso tenga algo que ver con eso.

Descubrí que algunos de los números menores que 500 se encuentran fundiéndolos en blanco (modo de fusión "Pantalla" en Photoshop) o en negro ("Multiplicar").

• 900: 59% (cierre)
• 600: 10% (casi exacto)
• 500: base
• 400: 15% (exacto)
• 300: 30% (exacto)
• 200: 50% (exacto)
• 100: 70% (cierre)
• 50: 88% (exacto)

No estoy viendo un patrón aquí. Y tal vez no hay uno. O tal vez hay algo obvio que estoy pasando por alto; Soy bastante malo en la combinación de colores.

Voy a dejar esto aquí porque es información nueva sobre el tema.

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

Publicado el 28 de mayo de 2015

¿Un poco oxidado en tu teoría del color? El diseño del material facilita el color. Obtenga más información sobre el diseño de color y material en www.google.com/design .

ETA: Los colores primarios (los 500) son colores que Google eligió como el "color principal" (o colores) en los que basa su diseño. Comienza con el 500 primario y luego escala de claro a oscuro; Estos colores se aplican a diferentes elementos de la interfaz de usuario.

Los 500 describen el tema dominante en el producto (y son excelentes para las barras de herramientas). Desde allí, escale hasta 700 para las barras de estado o hasta 300 para la información secundaria. Son perfectos para resaltar botones de acción primarios, botones estándar, interruptores y controles deslizantes.

Lo interesante es que la información en este video parece contradecir, o al menos exponer inconsistentemente, la información que Google proporciona en su página de paleta mencionada anteriormente ( http://www.google.com/design/spec/style/color .html # color-color-palette ).

En la página de la paleta dicen "Google sugiere usar los 500 colores como colores primarios en su aplicación y los otros colores como colores de acento " En el video dicen "Los colores A son colores de acento ..."

Por supuesto, una sutil diferencia, pero si Google va a desarrollar una guía de estilo, debe ser coherente con el uso de la palabra " acento ".

Quizás ya haya encontrado este recurso, pero Google ha preparado una guía increíblemente útil para ayudar a los desarrolladores y diseñadores a sincronizarse con la nueva vibra de Material.

La guía completa se puede encontrar aquí: http://www.google.com/design/spec/material-design/introduction.html#

Específicamente, esta página pone a disposición todos sus colores favoritos para descargar: http://www.google.com/design/spec/style/color.html#color-color-palette

Aquí está la respuesta a tu pregunta ... mira este video

Los 500 son colores primarios perfectos que describen el tema dominante en su producto y son excelentes para las barras de herramientas.

700 se utilizan para barras de estado

y 300s se utilizan para información secundaria

Básicamente, esos números representan sombras y matices predefinidos de colores primarios para secciones / partes específicas del diseño.

En mi opinión, la convención de nomenclatura se basa en la convención de nomenclatura de peso de la fuente web:

• 500: base
• <500: más delgado / más ligero
• > 500: más grueso / más oscuro

Una forma muy útil y lógica de nombrar algo con una línea base y variaciones.

Enlace de referencia: Enlace a la página de GitHub de la fuente Inter

Como ejemplo, aquí hay una captura de pantalla de la fuente "Inter" de Mozilla que utiliza dicha denominación de peso de fuente, pero en su caso, el peso normal / base está numerado como 400. Muchas fuentes realmente usan 400 como peso "normal" pero esto es otro tema.