Czym dokładnie są próbki koloru „500” Google'a?

Czytam o projektowaniu materiałów Google, a kiedy czytam o stylu, wciąż wspominają o 500 podstawowych kolorach (a także o każdej innej liczbie od 50, która jest prawie biała, do 900), ale co robi to znaczy?

Chciałbym spróbować swoich sił w tworzeniu własnych próbek kolorów inspirowanych materiałem, ale ponieważ mylą mnie nazwy ich kolorów, nie jestem pewien, od czego zacząć. Próbowałem googlować po odpowiedź (która wydaje się nieco ironiczna), ale jak dotąd nie znalazłem wielu rozstrzygających odpowiedzi. Gdybym musiał zgadywać, wygląda na to, że ma to coś wspólnego z długością fali koloru?

Wspomniano także o kolorach od A100 do A700 ...

Zastanawiam się nad tym.

Po pierwsze, „500” nie wydaje się wskazywać liczby kolorów, ale dziwny system numerowania, którego używają. 500 to podstawa, 400 jest jaśniejsze niż podstawa, 600 jest ciemniejsze. Jest to dość podobne do sposobu liczenia grubości czcionek ( informacji ), więc może to ma coś wspólnego z tym.

Przekonałem się, że niektóre liczby mniejsze niż 500 można znaleźć poprzez zanikanie ich w kolorze białym (tryb mieszania „Screen” w Photoshopie) lub czarnym („Multiply”).

• 900: 59% (zamknij)
• 600: 10% (prawie dokładnie)
• 500: Baza
• 400: 15% (dokładnie)
• 300: 30% (dokładnie)
• 200: 50% (dokładnie)
• 100: 70% (zamknij)
• 50: 88% (dokładnie)

Nie widzę tutaj wzoru. A może nie ma. A może przeoczyłem coś oczywistego; Jestem dość zły w układaniu kolorów.

Zostawię to tutaj, ponieważ są to nowe informacje na ten temat.

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

Opublikowano 28 maja 2015 r

Trochę zardzewiały na twojej teorii kolorów? Konstrukcja materiału ułatwia kolor. Dowiedz się więcej o kolorze i wzornictwie materiałów na www.google.com/design .

ETA: Kolory podstawowe (500) to kolory, które Google wybrał jako „kolor główny” (lub kolory), na których opierasz swój projekt. Zaczynasz od podstawowej 500, a następnie skalujesz od jasnego do ciemnego; kolory te są stosowane do różnych elementów interfejsu użytkownika.

500s opisuje dominujący motyw w produkcie (i świetnie nadają się do pasków narzędzi) Stamtąd można skalować do 700 dla pasków stanu lub do 300 dla informacji dodatkowych Kolory A to kolory akcentujące - jaśniejsze i bardziej nasycone zachęcające interakcje. Idealnie nadają się do podświetlania przycisków akcji podstawowych, standardowych przycisków, przełączników i suwaków.

Interesujące jest to, że informacje w tym filmie wydają się być sprzeczne lub przynajmniej niekonsekwentnie objaśniają informacje podane przez Google na ich stronie palety wspomnianej powyżej ( http://www.google.com/design/spec/style/color .html # color-color-palette ).

Na stronie palety mówią „Google sugeruje użycie 500 kolorów jako podstawowych kolorów w aplikacji, a inne kolory jako kolorów akcentujących ”. W filmie mówią „Kolory A to kolory akcentujące ...”

To prawda, subtelna różnica, ale jeśli Google zamierza opracować przewodnik po stylu, powinien być spójny z użyciem słowa „ akcent ”.

Być może już znalazłeś ten zasób, ale Google przygotował niezwykle przydatny przewodnik, aby pomóc programistom i projektantom zsynchronizować się z nową atmosferą Material.

Cały przewodnik można znaleźć tutaj - http://www.google.com/design/spec/material-design/introduction.html#

W szczególności ta strona udostępnia wszystkie swoje ulubione kolory do pobrania - http://www.google.com/design/spec/style/color.html#color-color-palette

Oto odpowiedź na twoje pytanie .. sprawdź ten film

W 500s są podstawowe kolory idealne opisując dominujący motyw w urządzeniu i są idealne dla pasków narzędzi.

700s są używane dla pasków stanu

i 300s są wykorzystywane jako informacje dodatkowe

Zasadniczo więc te liczby reprezentują wstępnie zdefiniowane odcienie i odcienie kolorów podstawowych dla określonych przekrojów / części projektu.

Moim zdaniem konwencja nazewnictwa opiera się na konwencji nazewnictwa wagowej strony WWW:

• 500: baza
• <500: cieńszy / lżejszy
• > 500: grubszy / ciemniejszy

Bardzo przydatny i logiczny sposób nazywania czegoś za pomocą linii bazowej i odmian.

Odnośnik: Link do strony GitHub czcionki Inter

Przykładem jest zrzut ekranu czcionki „Inter” Mozilli, która wykorzystuje takie nazewnictwo grubości czcionek, ale w ich przypadku zwykła / podstawowa grubość jest ponumerowana jako 400. Wiele czcionek faktycznie używa 400 jako „zwykłych” grubości, ale jest to inny temat.