Что такое «цветные» образцы Google «500»?

Я читал о Материальном дизайне 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-palette ).

На странице палитры они говорят: «Google предлагает использовать 500 цветов в качестве основных цветов в вашем приложении, а другие цвета - в качестве цветов акцента ». В видео они говорят: «Цвета A - это цвета акцента ...»

Конечно, небольшая разница, но если Google собирается разработать руководство по стилю, они должны соответствовать использованию слова « акцент ».

Возможно, вы уже нашли этот ресурс, но Google собрал невероятно удобное руководство, чтобы помочь разработчикам и дизайнерам синхронизироваться с новой вибрацией материала.

Полное руководство можно найти здесь - 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 используются для вторичной информации

Таким образом, в основном эти числа представляют предопределенные оттенки и оттенки основных цветов для определенного раздела / частей дизайна.

На мой взгляд, соглашение об именах основано на соглашении о присвоении веса веб-шрифту:

• 500: база
• <500: тоньше / легче
• > 500: толще / темнее

Очень полезный и логичный способ именования чего-либо с базовой линией и вариациями.

Ссылочная ссылка: Ссылка на страницу GitHub шрифта Inter

В качестве примера здесь приведен скриншот шрифта Mozilla «Inter», который использует такое именование веса шрифта, но в их случае обычный / базовый вес нумеруется как 400. Многие шрифты фактически используют 400 в качестве «обычного» веса, но это другая тема.