वास्तव में Google के '500' रंग क्या हैं?


36

मैं Google के सामग्री डिज़ाइन पर पढ़ रहा हूं, और जैसा कि मैं स्टाइल पर पढ़ रहा हूं, वे प्राथमिक 500 रंगों का उल्लेख करते हैं (साथ ही 50 से लेकर किसी भी अन्य संख्या, जो लगभग सफेद है, 900 तक), लेकिन क्या करता है इसका मतलब?

मैं अपना खुद का "मटेरियल से प्रेरित" कलर स्वैच बनाने में अपना हाथ आज़माना पसंद करूंगी, लेकिन जैसा कि उनके रंगों का नामकरण मुझे भ्रमित करता है, मुझे यकीन नहीं है कि कहां से शुरू करना है। मैंने एक उत्तर के लिए गुग्लिंग करने की कोशिश की (जो किसी तरह थोड़ा विडंबना महसूस करता है), लेकिन अब तक मैंने बहुत निर्णायक उत्तर पाए। अगर मुझे अनुमान लगाना होता है, तो ऐसा लगता है कि यह रंग की तरंग दैर्ध्य के साथ कुछ करना है?

A100 से A700 रंगों का भी उल्लेख है ...


8
केवल Google एक रंग प्रणाली के साथ आ सकता है जिसे ग्राफिक डिजाइनर समझ नहीं सकते।
साइमन व्हाइट

जवाबों:


21

मैं सोच रहा था कि खुद को।

सबसे पहले, "500" इंगित नहीं करता है कि कितने रंग हैं, लेकिन अजीब नंबरिंग प्रणाली वे उपयोग करते हैं। 500 आधार है, 400 आधार से हल्का है, 600 गहरा है। यह बहुत समान है कि फ़ॉन्ट-वेट कैसे ( जानकारी ) गिने जाते हैं, इसलिए शायद इसके साथ कुछ करना है।

मैंने पाया है कि 500 ​​से कम संख्या में कुछ उन्हें सफेद ("स्क्रीन" फ़ोटोशॉप में ब्लेंडिंग मोड) या ब्लैक ("मल्टीप्ली") में फ़ेड करके पाया जाता है।

  • 900: 59% (करीब)
  • 600: 10% (लगभग सटीक)
  • 500: आधार
  • 400: 15% (सटीक)
  • 300: 30% (सटीक)
  • 200: 50% (सटीक)
  • 100: 70% (करीब)
  • 50: 88% (सटीक)

मैं यहां एक पैटर्न नहीं देख रहा हूं। और शायद वहाँ कोई नहीं है। या शायद वहाँ कुछ स्पष्ट है मैं देख रहा हूँ; मैं कलर-स्कीइंग में बहुत बुरा हूं।


1
हम्म, मैं उम्मीद कर रहा था कि यह वास्तव में कुछ और विशिष्ट के लिए खड़ा होगा। लेकिन मुझे लगता है कि इसके सिर्फ Google के रंगों के नामकरण का तरीका है। उत्तर के लिए धन्यवाद, कम से कम!
क्लेवरबर्ड

1
क्या यह रंग क्रमांकन डिफेक्टो उद्योग मानक है?
यंगजई

2
@Youngjae नहीं। हर्गिज नहीं।
DA01

11

मैं इसे यहां छोड़ने जा रहा हूं क्योंकि यह विषय पर नई जानकारी है।

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

28 मई, 2015 को प्रकाशित

आपके रंग सिद्धांत पर थोड़ा सा जंग? सामग्री डिजाइन रंग को आसान बनाता है। Www.google.com/design पर रंग और सामग्री डिज़ाइन के बारे में अधिक जानकारी प्राप्त करें

ईटीए: प्राथमिक रंग, (500) ऐसे रंग हैं जिन्हें Google ने "मुख्य रंग" (या रंग) के रूप में चुना था जिसे आप अपने डिज़ाइन को आधार बनाते हैं। आप प्राथमिक 500 से शुरू करते हैं फिर प्रकाश से अंधेरे तक; ये रंग UI में विभिन्न तत्वों पर लागू होते हैं।

500s उत्पाद में प्रमुख विषय का वर्णन करते हैं (और टूलबार के लिए महान हैं) स्थिति बार के लिए 700s तक या माध्यमिक जानकारी के लिए 300 से नीचे तक। ए रंग उच्चारण रंग हैं - उज्जवल और अधिक संतृप्त उत्साहजनक बातचीत। ये प्राथमिक क्रिया बटन, मानक बटन, स्विच और स्लाइडर्स को हाइलाइट करने के लिए एकदम सही हैं।

मजे की बात यह है कि इस वीडियो में जानकारी के साथ विरोधाभास प्रतीत होता है, या कम से कम असंगत रूप से प्रकट होता है, जो जानकारी Google ऊपर उल्लिखित अपने पैलेट पेज पर प्रदान करता है ( http://www.google.com/design/spec/style/color .html # रंग-रंग-पैलेट )।

पैलेट पेज पर वे कहते हैं "Google आपके ऐप में प्राथमिक रंगों के रूप में 500 रंगों और उच्चारण रंगों के रूप में अन्य रंगों का उपयोग करने का सुझाव देता है " वीडियो में वे कहते हैं "ए रंग एक्सेंट रंग हैं ..."

दी गई, सूक्ष्म अंतर, लेकिन अगर Google एक स्टाइल गाइड विकसित करने जा रहा है, तो उन्हें " उच्चारण " शब्द के उपयोग के अनुरूप होना चाहिए ।


5

शायद आपने पहले से ही इस संसाधन को पा लिया है, लेकिन डेवलपर्स और डिजाइनरों को नई सामग्री खिंचाव के साथ सिंक करने में मदद करने के लिए Google ने अविश्वसनीय रूप से आसान मार्गदर्शिका को एक साथ रखा है।

पूरा गाइड यहां पाया जा सकता है - http://www.google.com/design/spec/material-design/introduction.html#

विशेष रूप से, यह पृष्ठ उनके सभी पसंदीदा रंगों को डाउनलोड के लिए उपलब्ध कराता है - http://www.google.com/design/spec/style/color.html#color-color-palette


3
यह वही है जहाँ मुझे 'प्राइमरी 500 रंग' शब्द मिला है, लेकिन मैं यह जानने की कोशिश कर रहा हूँ कि यह संख्या क्या है।
क्लेवरबर्ड

4

यहां आपके सवाल का जवाब है .. इस वीडियो को देखें

500s प्राथमिक रंग अपने उत्पाद में प्रमुख विषय-वस्तु का वर्णन सही और उपकरण पट्टियों के लिए महान हैं।

700 का उपयोग स्टेटस बार के लिए किया जाता है

और 300 का उपयोग सेकेंडरी informations के लिए किया जाता है

तो मूल रूप से वे संख्याएँ डिजाइन के विशिष्ट खंड / भागों के लिए पूर्व-निर्धारित रंगों और प्राथमिक रंगों के संकेत का प्रतिनिधित्व करती हैं।


0

मेरी राय में, नामकरण सम्मेलन वेबफोंट वजन-नामकरण सम्मेलन पर आधारित है:

  • 500: आधार
  • <500: पतला / हल्का
  • > 500: गाढ़ा / गहरा

एक आधारभूत और विविधताओं के साथ कुछ नामकरण का एक बहुत ही उपयोगी और तार्किक तरीका।

इंटर फ़ॉन्ट के GitHub पेज से स्क्रीनशॉट

संदर्भ लिंक: इंटर फ़ॉन्ट के GitHub पेज से लिंक

यहाँ एक उदाहरण के रूप में मोज़िला के "इंटर" फ़ॉन्ट का एक स्क्रीनशॉट है जो इस तरह के फॉन्ट वेट-नेमिंग का उपयोग करता है लेकिन उनके मामले में, नियमित / बेस वेट को 400 के रूप में गिना जाता है। बहुत सारे फोंट वास्तव में "रेगुलर" वेट के रूप में 400 का उपयोग करते हैं लेकिन यह एक अन्य विषय।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.