Google की सामग्री के डिज़ाइन के समान पैलेट कैसे बनता है?

Question

Google की सामग्री डिज़ाइन विशिष्टताओं में रंग पट्टियाँ सेट हैं :

बेस प्राइमरी रंग से शुरू करके, जिसे वे "500" के रूप में नामित करते हैं, उनके पास लगभग 10 रंगों की रेंज बनाने के लिए, छाया, उज्जवल और गहरे रंग के वृद्धिशील चरणों की एक सीमा होती है। सबसे हल्का "50" नामित है, और सफेद रंग के पास है, और सबसे गहरा, "900", काले रंग के पास है, लेकिन दोनों आधार रंग के कुछ को बरकरार रखते हैं।

मैं यह निर्धारित नहीं कर सकता कि वेतन वृद्धि की गणना कैसे की जाती है। मैंने इस ऑनलाइन स्वैच जनरेटर की कोशिश की , लेकिन मैं सीमा में डायल नहीं कर सकता।

मुझे लगता है कि यह "500" रंग के आधार से चमकदारता को समायोजित करने की बात है, और मैं अनुमान लगा रहा हूं कि "0" का मान शुद्ध सफेद होगा और "1000" शुद्ध काला होगा, लेकिन Google में श्रेणियाँ पैलेट के लिए एक साधारण चमक रेंज की तुलना में अधिक संतृप्ति है।

क्या कोई जानता है कि मैं क्या एल्गोरिथ्म या प्रक्रिया का उपयोग कर सकता हूं जो एक आधार रंग ले सकता है और Google के पैलेट के अनुरूप पैलेट उत्पन्न कर सकता है।

Comments

वे संतृप्ति और मूल्य के साथ आधार रंग क्रमशः बढ़े या घटते दिख रहे हैं, क्योंकि संख्या ऊपर या नीचे जाती है

— Supuhstar

दरअसल, स्क्रीन से एक कदम पीछे हटते हुए, यह फोंग शेडिंग के समान एल्गोरिथ्म का उपयोग करता प्रतीत होता है ... मुझे इस पर विचार करना होगा

— Supuhstar

क्या आपने पैलेट बनाने के लिए कोई समाधान पाया?

— श्रीब्राइटसाइड

@MrBrightside हाउडी! आप यहां दिए गए उत्तर का उपयोग करके एक पैलेट उत्पन्न कर सकते हैं: mcg.mbitson.com - कृपया ध्यान दें कि रंग वास्तव में सामग्री डिज़ाइन पैलेट के समान नहीं हैं, हालांकि आप सटीक पैलेट आयात कर सकते हैं या कस्टम रंगों के साथ करीब प्रतिनिधित्व उत्पन्न कर सकते हैं। इसके बारे में और अधिक सटीक रंग यहां क्यों नहीं हैं: stackoverflow.com/questions/32942503/…

— मिकेल बिट्सन

सामग्री केवल 50-500 रेंज के लिए मोनोक्रोमैटिक है, गहरे रंग और उच्चारण रंगों के लिए codepen.io/sebilasse/pen/GQYKJd?editors=1010 देखें …

— sebilasse

Answer 1

मैं सामग्री रंग पैलेट उत्पन्न करने के लिए एक परियोजना के लिए यह थोड़ा CSS3 / AngularJS उपकरण बनाया है। आप अपने 500 हेक्स रंग में प्रवेश कर सकते हैं और वहां से रंग मान प्राप्त करने के लिए ColorZilla जैसे बाहरी उपकरण का उपयोग कर सकते हैं। इसके अलावा लाइटर वही होते हैं जो Google द्वारा उपयोग किए जाते हैं, लेकिन गहरे रंग थोड़े से बंद होते हैं।

mcg.mbitson.com

Comments

आपका पैलेट जनरेटर वास्तव में अच्छी तरह से काम करता है, और जहां तक ​​मैं देख सकता हूं, Google सामग्री डिजाइन मानकों का अनुमान लगाता है। एक बात: आप पृष्ठ पर पाठ के लिए और अधिक कंट्रास्ट बनाना चाहते हैं। गहरे भूरे रंग की पृष्ठभूमि पर काला पाठ पढ़ने में बहुत कठिन है।

— प्रश्नकर्ता

हे लोगों! मैं टूल के अपडेटेड वर्जन के पीछे डेवलपर हूं। मैं हाल ही में जिस तरह से रंग पीढ़ी को संभाल रहा हूं उसके आसपास बदल रहा हूं। अगर किसी के पास इस उपकरण के लिए कोई प्रत्यक्ष प्रतिक्रिया है- यह रंग निर्माण तकनीक है या कोई अतिरिक्त सुविधाएँ जो वे चाहते हैं, तो कृपया मुझे बताएं! मैं अभी भी अपने खाली समय में संवर्द्धन कर रहा हूं और मुझे डर है कि रंग निर्माण बंद हो सकता है, हालांकि अभी भी बहुत उपयोगी है। मैं इसे देखना जारी रखूंगा।

— मिकेल बिटसन

@MikelBitson पैलेट जनरेटर वास्तव में बंद है (बस सामग्री डिजाइन मानक से किसी भी 500 रंग दर्ज करें और देखने के लिए तुलना करें), हालांकि यह फिर भी कई अन्य आधार रंगों के साथ शानदार काम करता है। अच्छा काम करते रहो!

— क्रिस बोर्नहॉफ़्ट

@MikelBitson शानदार स्पष्टीकरण धन्यवाद। मुझे लगा कि मैं अपनी मूल टिप्पणी पोस्ट करने से पहले भी कुछ ऐसा था। मुझे आश्चर्य है कि Google का "आधिकारिक रंग बीनने वाला" कितना बनाता है? क्या उपाधि है :)

— क्रिस बॉर्नहॉफ़्ट

नए संस्करण की तलाश में आप में से उन लोगों के लिए अद्यतन लिंक: mcg.mbitson.com/#

— मिकेल बिट्सन

Answer 2

गूगल पैलेट्स मोनोक्रोमैटिक हैं । जो एक ही RGB अनुपात को लाइटनेस और संतृप्ति को ऊपर या नीचे स्थानांतरित करता रहता है। ऐसा करने के लिए आपको RGB मान को HSL प्रतिनिधित्व (Hue, Saturation, Lightness) में बदलना होगा, हल्कापन और संतृप्ति को बदलना होगा और यदि आवश्यक हो तो वापस कन्वर्ट करें। गणना करते समय इसे आरजीबी अंतरिक्ष में रखना संभव है, लेकिन गणित बहुत भ्रामक है (मुझे समझने या समझाने के लिए)। HSL पारंपरिक रंग मिश्रण के लिए बनाया गया था (इसके बारे में सोचना हमारे लिए आसान है)।

यदि आपका उद्देश्य सीएसएस पैलेट बनाना है तो आप एचएसएल का उपयोग करके रंग रख सकते हैं background-color: hsl(0,100%, 50%);।

आप रंग पिकर का उपयोग करके फ़ोटोशॉप में मैन्युअल रूप से कर सकते हैं। एचएसबी ह्यू संतृप्ति ब्राइटनेस (एचएसएल के साथ समान, समान चीज़) के लिए है। आपके द्वारा पसंद किया गया एक रंग चुनें और एक सुसंगत मान से संतृप्ति और चमक को बदल दें। एस = 54 और बी = 77 नीचे दी गई छवि में, का उपयोग करते हुए 5% से ऊपर बदलाव 54 + 54 * 0.05और 77 + 77 * 0.05। या नीचे शिफ्ट करने के लिएS - S * 0.05

हेक्स और RGB के बीच स्पष्ट करने के लिए साइड नोट। 6 अंक HEX # FFEB3B वास्तव में RGB का प्रतिनिधित्व करते हुए 3 अलग-अलग संख्या है।

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3BHEX मानों को दशमलव में परिवर्तित करना आपको देता है red:255 green:235 blue:59 OR rgb(255,235,59)।

आरजीबी को एचएसएल में परिवर्तित करने के लिए एल्गोरिदम हैं यदि आप वास्तव में उन्हें विकिपीडिया पर चाहते हैं लेकिन सबसे आसान तरीका है रंग का उपयोग करना। यह उदाहरण कृपया के साथ एक मोनोक्रोमैटिक पैलेट बनाता है। क्योंकि इसमें पूरक या मनभावन पैलेट बनाने के लिए अन्य एल्गोरिदम भी हैं। बहुत कुछ शासक की तरह।

Please.make_scheme(
    Please.HEX_to_HSV('#ffeb3b'),
    {scheme_type: 'mono', format:'hex'}
);
// returns ->["#ffeb3b", "#ffe821", "#ffe508", "#e5d54c"]

Comments

Google के अपने पैलेट HSV / HSB के पार एक स्थिर भंगुरता नहीं दिखाते हैं। मैंने एक चित्रण बनाया है ताकि आप देख सकें कि मैं किस बारे में बात कर रहा हूँ। उसके आधार पर, आप शायद अन्य रंग मॉडल में से एक के साथ खेलना बेहतर होगा। इसके अतिरिक्त, वे कुछ रंगों के गहरे रंगों के लिए अपने रंग को थोड़ा छोटा करने के लिए, उन्हें मैला होने से बचाते हैं।

— टेस

मैं यहाँ कुछ जोड़ना चाहता हूँ कि सेकंड @ टेस की प्रतिक्रिया .. मैंने MCG जनरेटर का उन्नत संस्करण विकसित किया है और इस प्रक्रिया में मैंने कुछ चीजों पर ध्यान दिया है। प्रत्येक Google पैलेट रंगों की एक अलग प्रगति का अनुसरण करता है, यह मोनोक्रोमैटिक नहीं है। रंगों की नकल करने का कोई फॉर्मूला या तरीका नहीं है- जैसा कि प्रत्येक पैलेट का फॉर्मूला पूरी तरह से अलग होता है। अधिक विवरण और इसका एक उदाहरण यहां पाया जा सकता है: github.com/mbitson/mcg/issues/19

— मिकेल बिटसन

@MikelBitson लेकिन सवाल के जवाब में 'मैं किस एल्गोरिथ्म या प्रक्रिया का उपयोग कर सकता हूं' मैं मोनोक्रोमैटिक या इसका एक संस्करण en.wikipedia.org/wiki/Monochromatic_color के लिए वोट करूंगा, लेकिन आप और टेस इसके सही रूप से मोनो नहीं हैं, वे सही से विचलन करते हैं। ह्यू।

— लेक्स

@Lex - मैं आपसे सहमत हूं, मैं पैलेट का अनुमान लगाने के लिए मोनोक्रोमैटिक का उपयोग करूंगा। मैंने टेस की प्रतिक्रिया को केवल इसलिए लिया क्योंकि आपके उत्तर में कहा गया है कि "Google पैलेट मोनोक्रोमैटिक हैं।" और मैंने हाल ही में इन रंगों के साथ संघर्ष करते हुए अच्छा समय बिताया है। :)

— मिकेल बिटसन

HSB / HSV HSL en.wikipedia.org/wiki/HSL_and_HSV

— केविन थिबेड्यू

Answer 3

क्या आपने एडोब के कलर व्हील के साथ काम करने की कोशिश की है? मुझे लगता है कि यह आपके द्वारा उपयोग किए जा रहे SlayerOffice टूल की तुलना में थोड़ा अधिक लचीला है।

https://color.adobe.com/

अपने सटीक मामले के लिए, "शेड्स" चुनें और वहां से बेवकूफ बनाने की कोशिश करें। यह स्वैच जैसी सामग्री-डिज़ाइन नहीं उत्पन्न करेगा, लेकिन यह एक शुरुआत है।

Answer 4

आप बस उन पैलेटों को डाउनलोड कर सकते हैं जिन्हें Google साइट पर लिंक देता है? चूंकि यह आपको सभी रंग देता है?

Google रंग ज़िप को स्‍वीच करता है

Comments

मुझे लगता है कि ओपी यह जानना चाहता था कि अपने रंग से कैसे शुरुआत करें और एक समान स्वैच उत्पन्न करें

— Supuhstar

Answer 5

दिए गए रंग से रंग ढाल / पैलेट उत्पन्न करने के लिए, अनिवार्य रूप से आप निम्नलिखित एल्गोरिथ्म का उपयोग कर सकते हैं।

1. न्यूनतम और अधिकतम शेड तय करें जो आप अपने पैलेट में चाहते हैं
2. इन रंगों के बीच 'रंग-स्थान' को समान विभाजन में विभाजित करें (नीचे देखें)
3. इन चरणों पर आउटपुट रंग

बीच में रंग-स्थान को विभाजित करने के लिए, पहले आप अपने एचईएक्स को आरजीबी में रंग बदल सकते हैं। प्रत्येक चैनल में मान चुनें। मान लें कि आपके पास color1 (r1, g1, b1) और color2 (r2, g2, b2) हैं। और आप color1 और color2 के बीच 3 रंग चाहते हैं , तो आप निम्नलिखित की तरह कुछ कर सकते हैं

all_colors = []
steps = no_of_colors + 1
rdelta, gdelta, bdelta = (r2 - r1) / steps, (g2 - g1) / steps, (b2 - b1) / steps
for step in range(steps - 1):
    r1 += rdelta
        g1 += gdelta
        b1 += bdelta
all_colors.append((r1, g1, b1)) 

RGB मानों को (0 से 1 के बीच) में बदलना याद रखें।

आपके मामले में, आप आधार रंग लेने के लिए और के बीच रंग अंतरिक्ष विभाजित कर सकते हैं white to basecolorऔर basecolor to black। आप अपनी जरूरत के अनुसार अपने कदमों को समायोजित कर सकते हैं।

अंत में, मैंने अपने द्वारा बनाए गए अजगर पुस्तकालय के कुछ बेशर्म प्रचार करने जा रहा हूं, सिर्फ इसलिए कि यह रंग पैलेट पीढ़ी के संबंध में इस प्रश्न के लिए प्रासंगिक है। इसे सीक्रेटोलर्स कहा जाता है । आप स्वयं के रंग पट्टियाँ, ग्रेडिएंट उत्पन्न कर सकते हैं या आईबीएम, मटेरियल डिज़ाइन, ColorBrewer या स्पष्टता जैसे मानक रंग पट्टियाँ उपयोग कर सकते हैं।