Apa sebenarnya swatch warna '500' Google?

Saya telah membaca tentang Desain Bahan Google, dan saat saya membaca tentang Style, mereka terus menyebutkan 500 warna primer (dan juga angka lainnya mulai dari 50, yang hampir putih, hingga 900), tetapi apa yang tidak. ini berarti?

Saya ingin sekali mencoba membuat swatch warna "Material terinspirasi" saya sendiri, tetapi karena penamaan warna mereka membingungkan saya, saya tidak yakin harus mulai dari mana. Saya mencoba mencari jawaban di Google (yang entah bagaimana terasa agak ironis), tetapi sejauh ini saya belum menemukan jawaban konklusif. Jika saya harus menebak, sepertinya ada hubungannya dengan panjang gelombang warna?

Ada juga menyebutkan warna A100 ke A700 ...

Saya sendiri sudah bertanya-tanya.

Pertama, "500" tampaknya tidak menunjukkan berapa banyak warna yang ada, tetapi sistem penomoran aneh yang mereka gunakan. 500 adalah alas, 400 lebih ringan dari alas, 600 lebih gelap. Itu sangat mirip dengan bagaimana bobot font dinomori ( info ) jadi mungkin itu ada hubungannya dengan itu.

Saya telah menemukan bahwa beberapa angka kurang dari 500 ditemukan dengan memudar menjadi putih ("Layar" blending mode di Photoshop) atau hitam ("Multiply").

• 900: 59% (tutup)
• 600: 10% (hampir tepat)
• 500: Basis
• 400: 15% (tepat)
• 300: 30% (tepat)
• 200: 50% (tepat)
• 100: 70% (dekat)
• 50: 88% (tepat)

Saya tidak melihat pola di sini. Dan mungkin tidak ada. Atau mungkin ada sesuatu yang jelas saya abaikan; Saya sangat buruk dalam perencanaan warna.

Saya akan meninggalkan ini di sini karena ini adalah informasi baru tentang topik tersebut.

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

Diterbitkan pada 28 Mei 2015

Sedikit berkarat pada teori warna Anda? Desain material membuat warna mudah. Cari tahu lebih lanjut tentang desain warna dan bahan di www.google.com/design .

ETA: Warna primer, (500) adalah warna yang dipilih Google sebagai "warna utama" (atau warna) yang menjadi dasar desain Anda. Anda mulai dengan 500 primer kemudian skala dari terang ke gelap; warna-warna ini diterapkan ke berbagai elemen di UI.

500-an menggambarkan tema dominan dalam produk (dan bagus untuk bilah alat) Dari sana, skala hingga 700-an untuk bilah status atau turun ke 300 untuk informasi sekunder. Warna A adalah warna aksen - interaksi yang lebih cerah dan lebih jenuh. Ini sempurna untuk menyorot tombol tindakan utama, tombol standar, sakelar, dan bilah geser.

Yang menarik adalah bahwa informasi dalam video ini tampaknya bertentangan dengan, atau setidaknya secara tidak konsisten menguraikan, informasi yang disediakan Google pada halaman palet mereka yang disebutkan di atas ( http://www.google.com/design/spec/style/color .html # color-color-palette ).

Pada halaman palet mereka mengatakan "Google menyarankan menggunakan 500 warna sebagai warna utama dalam aplikasi Anda dan warna lain sebagai warna aksen " Dalam video mereka mengatakan "Warna A adalah warna aksen ..."

Memang, perbedaan yang halus, tetapi jika Google akan mengembangkan panduan gaya mereka harus konsisten dengan penggunaan kata " aksen ."

Mungkin Anda sudah menemukan sumber ini, tetapi Google telah menyusun panduan yang sangat berguna untuk membantu pengembang dan perancang menyelaraskan dengan getaran Material baru.

Seluruh panduan dapat ditemukan di sini - http://www.google.com/design/spec/material-design/introduction.html#

Secara khusus, halaman ini membuat semua warna favorit mereka tersedia untuk diunduh - http://www.google.com/design/spec/style/color.html#color-color-palette

Inilah jawaban untuk pertanyaan Anda .. lihat video ini

The 500-an Primer Warna sempurna menggambarkan tema dominan pada produk Anda dan yang besar untuk toolbar.

700 digunakan untuk bilah Status

dan 300 - an digunakan untuk informasi sekunder

Jadi pada dasarnya angka-angka tersebut mewakili warna dan warna yang telah ditentukan dari warna primer untuk bagian / bagian tertentu dari desain.

Menurut pendapat saya, konvensi penamaan didasarkan pada konvensi penamaan berat webfont:

• 500: basis
• <500: lebih tipis / lebih ringan
• > 500: lebih tebal / lebih gelap

Cara yang sangat berguna dan logis untuk memberi nama sesuatu dengan garis dasar dan variasi.

Tautan referensi: Tautan ke halaman GitHub font Inter

Sebagai contoh di sini adalah tangkapan layar font "Inter" Mozilla yang menggunakan penamaan berat font seperti itu, tetapi dalam kasus mereka, bobot reguler / basis dinomori sebagai 400. Banyak font yang benar-benar menggunakan 400 sebagai bobot "biasa" tetapi ini adalah topik lain.