Які саме кольорові зразки "500" від Google?

Я читав про Матеріальний дизайн Google, і коли я читаю про Стиль, вони постійно згадують про 500 кольорів (як і будь-яке інше число від 50, майже білого, до 900), але що робити це означає?

Я хотів би спробувати свої сили у створенні власних кольорових зразків "Натхненний матеріалом", але оскільки назва їх кольорів бентежить, я не зовсім впевнений, з чого почати. Я спробував гуглати відповідь (яка якось відчуває себе трохи іронічно), але поки що я не знайшов багато переконливих відповідей. Якби мені довелося здогадуватися, здається, що це має щось спільне з довжиною хвилі кольору?

Там також згадуються кольори від A100 до A700 ...

Мені це було цікаво.

По-перше, "500" не вказує, скільки кольорів є, але дивна система нумерації, яку вони використовують. 500 - основа, 400 світліше основи, 600 - темніше. Це дуже схоже на те, як шрифтові ваги нумеруються ( інформація ), тому, можливо, це має щось спільне.

Я виявив, що деякі числа менше 500 знаходять, перетворюючи їх у білий (режим "Зміна екрана" у Photoshop) або чорний ("Помножити").

• 900: 59% (закрити)
• 600: 10% (майже точно)
• 500: База
• 400: 15% (точно)
• 300: 30% (точно)
• 200: 50% (точно)
• 100: 70% (закрити)
• 50: 88% (точно)

Я тут не бачу викрійки. І, можливо, його немає. А може, є щось очевидне, що я не помічаю; Я досить поганий у кольоровій гаммі.

Я збираюся залишити це тут, тому що це нова інформація по темі.

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

Опубліковано 28 травня 2015 року

Трохи іржавий на вашій теорії кольорів? Дизайн матеріалу робить колір легким. Дізнайтеся більше про дизайн кольорів та матеріалів на веб-сайті www.google.com/design .

ETA: Основні кольори (500) - це кольори, які Google вибрав як «основний колір» (або кольори), на якому ви базуєте свій дизайн. Ви починаєте з первинного 500, а потім масштабуєте від світлого до темного; ці кольори застосовуються до різних елементів інтерфейсу користувача.

500-х описує домінуючу тему в продукті (і чудово підходить для панелей інструментів). Звідти масштаб до 700-х для смужок статусу або до 300-ти для вторинної інформації. Кольори A - це акцентні кольори - яскравіше і насиченіше заохочує взаємодія. Вони ідеально підходять для підсвічування кнопок первинної дії, стандартних кнопок, перемикачів та повзунків.

Цікавим є те, що інформація у цьому відео схоже суперечить або, принаймні, непослідовно пояснює інформацію, яку Google надає на згадуваній вище сторінці палітри ( http://www.google.com/design/spec/style/color .html # color-color-палітра ).

На сторінці палітри написано: "Google пропонує використовувати 500 кольорів як основні кольори у вашій програмі, а інші кольори - як акцентні кольори ". На відео вони говорять "Кольори А - це акцентні кольори ..."

Зазначається, що тонка різниця, але якщо Google збирається розробити посібник зі стилів, вони повинні відповідати використанню слова " акцент ".

Можливо, ви вже знайшли цей ресурс, але Google зібрав неймовірно зручний посібник, який допоможе розробникам та дизайнерам синхронізуватися з новою Vibe Material.

Весь посібник можна знайти тут - http://www.google.com/design/spec/material-design/introduction.html#

Зокрема, на цій сторінці доступні для завантаження всі їх улюблені кольори - http://www.google.com/design/spec/style/color.html#color-color-palette

Ось відповідь на ваше запитання .. подивіться це відео

У 500s є Primary Colors ідеальним описує домінуючу теми в ваш продукт і відмінно підходить для панелей інструментів.

700 використовуються для рядків статусу

і 300-ті використовуються для вторинної інформації

Таким чином, ці цифри представляють заздалегідь визначені відтінки та відтінки первинних кольорів для конкретного розділу / частини дизайну.

На мою думку, конвенція про іменування базується на конвенції про вагове іменування webfont:

• 500: база
• <500: тонше / легше
• > 500: товстіший / темніший

Дуже корисний та логічний спосіб називати щось із базовою лінією та варіаціями.

Посилання: Посилання на сторінку GitHub шрифту Inter

Як приклад наводимо скріншот шрифту Mozilla "Inter", який використовує таку назву ваги шрифту, але в їхньому випадку звичайний / базовий вага нумерується як 400. Багато шрифтів фактично використовують 400 як "звичайну" вагу, але це інша тема.