গুগলের উপাদান ডিজাইনের মতো কোনও প্যালেট কীভাবে তৈরি করা যায়?

Question

গুগলের মেটাল ডিজাইন স্পেসিফিকেশনে রঙ প্যালেটগুলির সেট রয়েছে :

একটি বেস প্রাথমিক রঙ দিয়ে শুরু করে, যা তারা "500" হিসাবে মনোনীত করে, প্রায় 10 রঙের একটি পরিসীমা তৈরি করতে তাদের কাছে ছায়া, উজ্জ্বল এবং গা dark় রঙের এক ধরণের বাড়ন্ত ধাপ রয়েছে। সবচেয়ে হালকা "50" হিসাবে চিহ্নিত করা হয়েছে, এবং এটি সাদাের কাছাকাছি এবং সবচেয়ে অন্ধকার, "900", কালো কাছাকাছি, তবে উভয়ই কিছু বেসের রঙ ধরে রাখে।

আমি কীভাবে ইনক্রিমেন্টগুলি গণনা করা হয় তা বেশ নির্ধারণ করতে পারি না। আমি এই অনলাইন সোয়াচ জেনারেটরটি চেষ্টা করেছি , তবে আমি পরিসীমাটিতে ডায়াল করতে পারি না।

আমি মনে করি এটি বেস "500" রঙ থেকে উপরে এবং নীচে আলোকসজ্জা সামঞ্জস্য করার বিষয়, এবং আমি অনুমান করছি যে "0" এর মান খাঁটি সাদা এবং "1000" খাঁটি কালো হবে, তবে গুগলের রেঞ্জগুলি প্যালেটের কাছে মনে হয় একটি সাধারণ আলোকসজ্জার ব্যাপ্তির চেয়ে বেশি স্যাচুরেশন রয়েছে।

গুগলের প্যালেটগুলির সাথে সামঞ্জস্য রেখে আমি একটি বেস রঙ নিতে এবং একটি প্যালেট উত্পন্ন করতে কী অ্যালগরিদম বা প্রক্রিয়াটি ব্যবহার করতে পারি তা কি কেউ জানেন?

Comments

এগুলি সংখ্যার উপরে বা নিচে যাওয়ার সাথে সাথে যথাক্রমে সম্পৃক্ততা এবং মান বৃদ্ধি বা বিপরীতভাবে হ্রাসের সাথে এটি বেস রঙ হিসাবে মনে হয়

— সুপুস্টার

প্রকৃতপক্ষে, স্ক্রিন থেকে এক পদক্ষেপ নেওয়ার পরে, এটি ফোং শেডিংয়ের মতো একটি অনুরূপ অ্যালগরিদম ব্যবহার করে বলে মনে হচ্ছে ... আমাকে এটি বিবেচনা করতে হবে

— সুপুস্টার

প্যালেট উত্পন্ন করার জন্য আপনি কি কোনও সমাধান খুঁজে পেয়েছেন?

— মিঃ ব্রাইটসাইড

নিবন্ধন করুন আপনি এখানে নির্বাচিত উত্তরটি ব্যবহার করে একটি প্যালেট তৈরি করতে পারেন: mcg.mbitson.com - দয়া করে নোট করুন যে রঙগুলি মেটালিয়াল ডিজাইনের প্যালেটগুলির মতো ঠিক একই নয়, যদিও আপনি সঠিক প্যালেটগুলি আমদানি করতে পারেন বা কাস্টম রঙের সাথে ঘনিষ্ঠ উপস্থাপনা তৈরি করতে পারেন। কেন তারা এখানে সঠিক রং না হন আরও stackoverflow.com/questions/32942503/...

— Mikel Bitson

উপাদানগুলি কেবল 50-500 পরিসরের জন্য একরঙা হয়, গা and় এবং অ্যাকসেন্ট রঙের জন্য

— কোডেপেন.ইও

Answer 1

ম্যাটারিয়াল কালার প্যালেট তৈরি করার জন্য একটি প্রকল্পের জন্য আমি এই ছোট্ট CSS3 / AngularJS সরঞ্জামটি তৈরি করেছি। আপনি আপনার 500 হেক্স রঙ প্রবেশ করতে পারেন এবং সেখান থেকে রঙের মান পেতে কালারজিলার মতো একটি বাহ্যিক সরঞ্জাম ব্যবহার করতে পারেন। হালকাগুলি হ'ল গুগল ব্যবহৃত হ'ল, তবে গাer় রঙগুলি কিছুটা বন্ধ হয়ে যায়।

mcg.mbitson.com

Comments

আপনার প্যালেট জেনারেটরটি সত্যিই খুব ভাল কাজ করে এবং যতদূর আমি দেখতে পাচ্ছি, গুগল মেটালিয়াল ডিজাইনের মানগুলি প্রায় অনুমান করে। একটি জিনিস: আপনি পৃষ্ঠায় লেখার জন্য আরও বিপরীতে তৈরি করতে চাইতে পারেন। গা gray় ধূসর পটভূমিতে কালো পাঠ্যটি পড়া খুব শক্ত।

— প্রশ্নকর্তা

এই যে বন্ধুরা! আমি সরঞ্জামটির আপডেট হওয়া সংস্করণটির পিছনে বিকাশকারী। আমি সম্প্রতি রঙিন প্রজন্মকে পরিচালনা করছি around কারও কাছে যদি এই সরঞ্জামটির জন্য কোনও প্রত্যক্ষ প্রতিক্রিয়া থাকে- এটি রঙিন জেনারেশন কৌশল বা কোনও অতিরিক্ত বৈশিষ্ট্য তারা চান, দয়া করে আমাকে জানান! আমি আমার অতিরিক্ত সময়টিতে এখনও উন্নতি করছি এবং আমি আশঙ্কা করছি যে রঙ প্রজন্ম বন্ধ হতে পারে, যদিও এটি এখনও খুব সহায়ক। আমি এটি খতিয়ে দেখব।

— মাইকেল বিটসন

@ মাইকেলবিটসন প্যালেট জেনারেটরটি প্রকৃতপক্ষে বন্ধ রয়েছে (কেবলমাত্র উপাদান ডিজাইনের স্ট্যান্ডার্ড থেকে যে কোনও 500 রঙ প্রবেশ করান এবং দেখতে তুলনা করুন) তবে এটি অন্য অনেকগুলি বেস রঙের সাথে দুর্দান্ত কাজ করে। মহান কাজ আপ রাখুন!

— ক্রিস বোর্নহফ্ট

@ মাইকেলবিটসন চমত্কার ব্যাখ্যা ধন্যবাদ। আমি আমার আসল মন্তব্য পোস্ট করার আগেই অনুভব করলাম এটি এমন কিছু ছিল। আমি ভাবছি গুগলের "অফিসিয়াল কালার পিকার" কতটা করে? কি শিরোনাম :)

— ক্রিস বোর্নহফট

আপনারা যারা নতুন সংস্করণটি সন্ধান করছেন তাদের জন্য আপডেট লিংক: mcg.mbitson.com/#

— মাইকেল বিটসন

Answer 2

গুগল প্যালেটগুলি একরঙা । যা একই আরজিবি অনুপাতটিকে লাইটনেস এবং স্যাচুরেশনকে উপরে বা নীচে স্থানান্তরিত করে। এটি করার জন্য আপনাকে আরজিবি মানটি এইচএসএল উপস্থাপনায় (হিউ, স্যাচুরেশন, লাইটনেস) রূপান্তর করতে হবে, হালকাতা এবং স্যাচুরেশন পরিবর্তন করতে হবে এবং প্রয়োজনে ফিরে রূপান্তর করতে হবে। গণনা করার সময় এটি আরজিবি স্পেসে রাখা সম্ভব, তবে গণিতটি খুব বিভ্রান্তিকর (আমার বুঝতে বা বোঝানোর জন্য)। এইচএসএলটি traditionalতিহ্যবাহী রঙের মিশ্রণের জন্য তৈরি করা হয়েছিল (এটি সম্পর্কে আমাদের চিন্তা করা সহজ)।

যদি আপনার উদ্দেশ্যটি সিএসএস প্যালেটগুলি তৈরি করা হয় তবে আপনি রঙটি এইচএসএল ব্যবহার করে রাখতে পারেন background-color: hsl(0,100%, 50%);।

রঙিন পিকারটি ব্যবহার করে আপনি ফটোশপে ম্যানুয়ালি এটি করতে পারেন। এইচএসবি হিউ স্যাচুরেশন ব্রাইটনেসের জন্য (এইচএসএল সমার্থক, একই জিনিস)। আপনার পছন্দ মতো একটি রঙ চয়ন করুন এবং একটি সামঞ্জস্যপূর্ণ মান দ্বারা স্যাচুরেশন এবং উজ্জ্বলতা পরিবর্তন করুন। এস = 54 এবং B = 77 নিচের ইমেজে ব্যবহার 5% দ্বারা আপ নামান 54 + 54 * 0.05এবং 77 + 77 * 0.05। বা শিফট ডাউনS - S * 0.05

Hex এবং RGB এর মধ্যে স্পষ্ট করার জন্য সাইড নোট। আরজিবি উপস্থাপন করে 6 সংখ্যার এইচএক্স # এফএফইবি 3 বি আসলে 3 টি পৃথক সংখ্যা।

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3Bএইচএক্স মানকে দশমিক হিসাবে রূপান্তর করা আপনাকে দেয় red:255 green:235 blue:59 OR rgb(255,235,59)।

আরজিবিকে এইচএসএলে রূপান্তর করার জন্য অ্যালগরিদম রয়েছে যদি আপনি সত্যিকার অর্থে উইকিপিডিয়ায় চান তবে সহজ উপায় হ'ল একটি রঙের লিবিব ব্যবহার করা। এই উদাহরণটি দয়া করে একরঙা প্যালেট তৈরি করে .js এর পরিপূরক বা আনন্দদায়ক প্যালেট তৈরির জন্য অন্যান্য অ্যালগরিদমও রয়েছে। অনেকটা কুলেরাদোডোবের মতো, এটিও দোলা দেয়।

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

Comments

গুগলের নিজস্ব প্যালেটগুলি এইচএসভি / এইচএসবি জুড়ে স্থির ব্রাইটনেস গ্রেডিয়েন্ট প্রদর্শন করে না। আমি একটি চিত্র তৈরি করেছি যাতে আপনি দেখতে পাচ্ছেন যে আমি কী বলছি। তার উপর ভিত্তি করে, আপনি সম্ভবত অন্য রঙের মডেলগুলির মধ্যে একটির সাথে খেললে ভাল। অতিরিক্তভাবে, তারা মনে হয় যে কিছু রঙের গাer় শেডগুলির জন্য তাদের রঙকে কিছুটা কচি হতে না পারে সেজন্য তারা তাদের রঙটি সামান্য কিছুটা টিকিয়েছে।

— টেস

আমি এখানে টেসের প্রতিক্রিয়াগুলি কয়েক সেকেন্ড যোগ করতে চাই .. আমি এমসিজি জেনারেটরের বর্ধিত সংস্করণটি তৈরি করেছি এবং প্রক্রিয়াটিতে আমি কয়েকটি জিনিস লক্ষ্য করেছি। প্রতিটি গুগল প্যালেট বর্ণের আলাদা অগ্রগতি অনুসরণ করে, এটি একরঙা নয়। বর্ণগুলি হুবহু অনুকরণ করার জন্য কোনও সূত্র বা পদ্ধতি নেই- প্রতিটি প্যালেটের সূত্রটি সম্পূর্ণ আলাদা হওয়ার পরে। আরও বিশদ এবং এর উদাহরণ এখানে পাওয়া যাবে: github.com/mbitson/mcg/issues/19

— মাইকেল বিটসন

@MikelBitson কিন্তু প্রশ্ন 'আমি কি আলগোরিদিম বা প্রক্রিয়া ব্যবহার করতে পারেন' আমি একরঙা বা এটি একটি সংস্করণ ভোট দেবে উত্তরে en.wikipedia.org/wiki/Monochromatic_color কিন্তু আপনি এবং টেস ঠিক তার কঠোরভাবে মনো, তারা থেকে পথভ্রষ্ট না হিউ

— লেেক্স

@ লেক্স - আমি আপনার সাথে একমত, আমি একটি প্যালেট অনুমান করার জন্য একরঙা ব্যবহার করব। আমি কেবল টেসের প্রতিক্রিয়াটিকেই দ্বিতীয় স্থান দিয়েছি কারণ আপনার উত্তরে বলা হয়েছে যে "গুগল প্যালেটগুলি একরঙা।" এবং আমি সম্প্রতি এই রঙগুলির সাথে লড়াই করে বেশ ভাল সময় ব্যয় করেছি। :)

— মাইকেল বিটসন

এইচএসবি / এইচএসভি এইচএসএল এর মতো নয় en.wikedia.org/wiki/HSL_and_HSV

— কেভিন থিবেডো

Answer 3

আপনি কি অ্যাডোবের রঙিন চাকা দিয়ে কাজ করার চেষ্টা করেছেন? আমি মনে করি আপনি যে স্লেয়ার অফিস টুলটি ব্যবহার করছেন তার চেয়ে এটি কিছুটা নমনীয়।

https://color.adobe.com/

আপনার সঠিক ক্ষেত্রে, "ছায়া গো" চয়ন করুন এবং সেখান থেকে প্রায় বোকা চেষ্টা করুন। এটি সোয়াচের মতো উপাদান-নকশা তৈরি করবে না, তবে এটি একটি শুরু।

Answer 4

গুগল সাইটে যে লিঙ্ক দেয় তা আপনি কেবল প্যালেটগুলি ডাউনলোড করতে পারেন? যেহেতু এটি আপনাকে সমস্ত রঙ দেয়?

গুগল রঙ রঙ সুইচ জিপ ip

Comments

আমি মনে করি ওপি তার নিজের রঙ দিয়ে কীভাবে শুরু করতে এবং একই ধরণের

— সোচ

Answer 5

প্রদত্ত রঙ থেকে রঙের গ্রেডিয়েন্ট / প্যালেট তৈরি করতে, মূলত আপনি নিম্নলিখিত অ্যালগরিদম ব্যবহার করতে পারেন।

1. আপনার প্যালেটে আপনি চান ন্যূনতম এবং সর্বাধিক ছায়াযুক্ত সিদ্ধান্ত নিন
2. সমান বিভাজনে এই রঙগুলির মধ্যে 'রঙ-স্থান' ভাগ করুন (নীচে দেখুন)
3. এই পদক্ষেপগুলিতে আউটপুট রঙ

রঙ-স্পেসের মধ্যে ভাগ করার জন্য, প্রথমে আপনি আপনার এইচএক্স রঙকে আরজিবিতে রূপান্তর করতে পারবেন। প্রতিটি চ্যানেলে মান নির্বাচন করুন। ধরা যাক আপনার রঙ 1 (আর 1 , জি 1, বি 1 ) এবং রঙ 2 ( আর 2 , জি 2, বি 2 ) রয়েছে। এবং আপনি 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)) 

আরজিবি মানগুলি (0 থেকে 1) এর মধ্যে রূপান্তর করতে ভুলবেন না।

আপনার ক্ষেত্রে, আপনি বেস রঙ নিতে এবং white to basecolorএবং এর মধ্যে রঙের স্থান ভাগ করতে পারেন basecolor to black। আপনি আপনার প্রয়োজন অনুসারে আপনার পদক্ষেপগুলি সামঞ্জস্য করতে পারেন।

অবশেষে, আমি তৈরি করা অজগর গ্রন্থাগারের কিছু নির্লজ্জ প্রচার করতে যাচ্ছি, কারণ এটি রঙিন প্যালেট প্রজন্মের সাথে সম্পর্কিত এই প্রশ্নের সাথে সম্পর্কিত। এটাকে সিক্রেটল্যান্ড বলে । আপনি নিজস্ব রঙ প্যালেট, গ্রেডিয়েন্ট তৈরি করতে পারেন বা আইবিএম, উপাদান ডিজাইন, কালারব্রেভার বা স্পষ্টতার মতো স্ট্যান্ডার্ড রঙ প্যালেট ব্যবহার করতে পারেন।