কালার প্যালেট বের করার টুল

কালার প্যালেট এক্সট্র্যাক্টর কী?#

প্রতিটি ছবি একটি ছোট রঙের সেট বহন করে যা বেশিরভাগ কাজ করে — একটি লোগোর ব্র্যান্ড নীল, একটি প্রোডাক্ট শটের উষ্ণ নিউট্রাল, একটি চিত্রের দুই-টোন প্যালেট। একটি প্যালেট এক্সট্র্যাক্টর সেই প্রতিনিধিত্বমূলক রঙগুলো স্বয়ংক্রিয়ভাবে বের করে যাতে আপনি সেগুলো পুনরায় ব্যবহার করতে পারেন: একটি মেলানো UI থিম তৈরি করুন, এমন একটি বোতাম রঙ বেছে নিন যা বিসদৃশ নয়, CSS ভেরিয়েবল তৈরি করুন, বা শুধু বুঝুন কোন সোয়াচগুলো আসলে একটি ছবিতে আধিপত্য করে বনাম যেগুলো আপনার চোখ গুরুত্বপূর্ণ বলে ধরে নেয়।

এই পৃষ্ঠাটি সম্পূর্ণ আপনার ব্রাউজারে মিডিয়ান-কাট কালার কোয়ান্টাইজেশন চালায়। আপনি একটি ছবি লোড করেন, এটি একটি কার্যকর নমুনা আকারে নামিয়ে আনা হয়, প্রতিটি পিক্সেল পড়া হয়, এবং অ্যালগরিদমটি বারবার কালার স্পেসকে তার প্রশস্ততম চ্যানেল বরাবর বিভক্ত করে যতক্ষণ না এটি আপনার চাওয়া Top-N সোয়াচ (২–১৬) পায়। আপনি প্রতিটি রঙ একটি সোয়াচ হিসেবে পান যার ছবিতে অংশ রয়েছে, সাথে সরল গড় রঙ, যা একটি HEX তালিকা, একটি CSS-ভেরিয়েবল ফাইল, বা কাঠামোগত JSON হিসেবে রপ্তানিযোগ্য।

যেভাবে ব্যবহার করবেন#

1. ড্যাশ দেওয়া ড্রপ এরিয়াতে একটি ছবি টেনে আনুন (অথবা একটি ফাইল বেছে নিতে ক্লিক করুন)। PNG, JPEG, এবং WebP সবই কাজ করে; স্বচ্ছ PNG সঠিকভাবে সামলানো হয় কারণ স্বচ্ছ পিক্সেলগুলো গণনার আগে বাদ দেওয়া হয়।
2. রঙের সংখ্যা স্লাইডার (২–১৬) টেনে আনুন কতগুলো প্রতিনিধিত্বমূলক রঙ এক্সট্র্যাক্ট করতে হবে তা বেছে নিতে। একটি ভারসাম্যপূর্ণ প্যালেটের জন্য ছয়টি একটি ভালো ডিফল্ট; দুই বা তিনটি প্রাধান্যপূর্ণ জোড়াকে বিচ্ছিন্ন করে।
3. ডানদিকের সোয়াচ তালিকাটি পড়ুন: প্রতিটি সারি রঙ, এর HEX/RGB/HSL মান, এবং নমুনা নেওয়া পিক্সেলের শতাংশ যা সেই বাকেটে পড়েছে দেখায়, সবচেয়ে প্রাধান্যপূর্ণ প্রথমে সাজানো। কপি করতে যেকোনো মানে ক্লিক করুন।
4. সাইডবারের গড় রং কার্ডে প্রতিটি পিক্সেলের সরল গড়ের জন্য দেখুন — কার্যকর যখন আপনি একটি স্থান নির্দিষ্ট প্যালেটের বদলে একটি সামগ্রিক ব্যাকগ্রাউন্ড টোন চান।
5. একটি ডাউনলোড ফরম্যাট বেছে নিন:
   • HEX তালিকা (.txt) — প্রতি লাইনে একটি #RRGGBB, প্রাধান্যপূর্ণ প্রথমে। একটি ডিজাইন টুলে সরাসরি পেস্ট করুন।
   • CSS ভেরিয়েবল (.css) — একটি :root { --palette-1: …; …; --palette-avg: …; } ব্লক যা আপনি একটি স্টাইলশিটে ফেলতে পারেন।
   • JSON (.json) — hex, rgb, count, এবং share সহ কাঠামোগত সোয়াচ, সাথে গড় এবং নমুনা মেটাডেটা।
6. ফাইল সংরক্ষণ করতে ডাউনলোড ক্লিক করুন।

প্রধান বৈশিষ্ট্য#

• মিডিয়ান-কাট কোয়ান্টাইজেশন, স্ব-লিখিত। পেশাদার ইমেজ টুল যে অ্যালগরিদম পরিবার ব্যবহার করে, আপনার ট্যাবে চলে: মিডিয়ানে প্রশস্ততম চ্যানেল বরাবর বিভক্ত, অনুরোধ করা সংখ্যা না পৌঁছানো পর্যন্ত বর্তমান-প্রশস্ততম বাক্সে পুনরাবৃত্তি।
• সততাপূর্ণ অংশ সংখ্যা। প্রতিটি সোয়াচ নমুনা করা পিক্সেলের প্রকৃত ভগ্নাংশ বহন করে, তাই “প্রাধান্যপূর্ণ” মানে এলাকা অনুযায়ী প্রাধান্যপূর্ণ, অনুমান অনুযায়ী নয়।
• গড় প্রাধান্যপূর্ণ থেকে আলাদা রাখা। সরল পিক্সেল গড় স্থান নির্দিষ্ট প্যালেটের পাশাপাশি রিপোর্ট করা হয় — দুটি ভিন্ন প্রশ্ন এক পাসে উত্তর দেওয়া।
• স্বচ্ছ পিক্সেল বাদ। একটি ছোট থ্রেশহোল্ডের নিচে আলফা বাদ দেওয়া হয়, তাই একটি স্বচ্ছ PNG আসলে যে রঙগুলো আঁকা হয়েছে তা রিপোর্ট করে, স্বচ্ছতার সাথে একটি কাদামাটির মিশ্রণ নয়।
• তিনটি রপ্তানি রূপ। ডিজাইন টুলের জন্য HEX তালিকা, স্টাইলশিটের জন্য CSS ভেরিয়েবল, প্রোগ্রামের জন্য JSON — সবই আপনি যে হুবহু সোয়াচ দেখেন সেখান থেকে তৈরি।
• ১০০% স্থানীয়। ছবিটি ব্রাউজার দ্বারা ডিকোড এবং নমুনা করা হয়। কোনো আপলোড নেই।

বিস্তারিত উদাহরণ#

একটি ব্র্যান্ড লোগো ফেলুন যা সাদা ব্যাকগ্রাউন্ডে একটি গভীর কর্পোরেট নীল এবং একটি ছোট অ্যাকসেন্ট — ধরুন নীলটি ক্যানভাসের প্রায় ৬০% পূরণ করে। রঙের সংখ্যা ৪-এ সেট করা থাকলে, একটি সাধারণ এক্সট্র্যাকশন দেখতে এরকম:

#1D4ED8   58.4%   rgb(29, 78, 216)    hsl(224, 76%, 48%)
#FFFFFF   31.2%   rgb(255, 255, 255)  hsl(0, 0%, 100%)
#172554   7.1%    rgb(23, 37, 84)     hsl(224, 57%, 21%)
#93C5FD   3.3%    rgb(147, 197, 253)  hsl(217, 95%, 78%)

প্রাধান্যপূর্ণ সোয়াচটি প্রায় ৫৮%-এ ব্র্যান্ড নীল, সাদা দ্বিতীয়। দুটি অতিরিক্ত নীল লক্ষ্য করুন — একটি গাঢ় শেড এবং একটি হালকা টিন্ট — যা অ্যালগরিদম খুঁজে পেয়েছে কারণ সেগুলো একটি মিডিয়ান সীমানা অতিক্রম করে; এগুলো সেই রঙ যা আপনি হোভার স্টেট এবং ছায়ার জন্য পুনরায় ব্যবহার করবেন। CSS ভেরিয়েবল হিসেবে রপ্তানি করুন এবং আপনি একটি ড্রপ-ইন থিম পান:

:root {
  --palette-1: #1D4ED8;
  --palette-2: #FFFFFF;
  --palette-3: #172554;
  --palette-4: #93C5FD;
  --palette-avg: #5A7BCB;
}

--palette-avg হলো প্রতিটি পিক্সেলের সরল গড় — একটি মৃদু মধ্য-নীল যা ব্র্যান্ডের দিকে ঝুঁকে একটি পৃষ্ঠার ব্যাকগ্রাউন্ড হিসেবে ভালো কাজ করে।

সাধারণ জিজ্ঞাসা#

শতাংশগুলো হুবহু ১০০% যোগ হচ্ছে না।#

সেগুলো প্রদর্শনের জন্য বৃত্তাকার করা হয়েছে (অন্তর্নিহিত মানগুলো JSON রপ্তানিতে চারটি দশমিক স্থান পর্যন্ত নির্ভুল)। একটি ছোট অবশিষ্টাংশ স্বচ্ছ পিক্সেল গণনার আগে বাদ দেওয়া থেকেও আসে, তাই মোট শুধুমাত্র প্রকৃতপক্ষে নমুনা করা অস্বচ্ছ পিক্সেলকে প্রতিফলিত করে।

আমি যা চেয়েছি তার চেয়ে কম সোয়াচ পাচ্ছি।#

মিডিয়ান কাট তাড়াতাড়ি থামে যখন প্রতিটি অবশিষ্ট কালার বাক্স কঠিন (সব চ্যানেলে রেঞ্জ শূন্য) — সত্যিই আর বিভক্ত করার মতো কিছু নেই। একটি ৩-রঙের ছবিতে ৮টি রঙ চাইলে ৩টি ফেরত দেয়, ৮টি উদ্ভাবিত নয়।

গড় রঙ প্রাধান্যপূর্ণ রঙের চেয়ে এত আলাদা কেন?#

তারা ভিন্ন প্রশ্নের উত্তর দেয়। প্রাধান্যপূর্ণ রঙ হলো একক সবচেয়ে ঘন ঘন বাকেট; গড় হলো প্রতিটি পিক্সেলের গাণিতিক গড়, যা কয়েকটি বড় কিন্তু ভিন্ন রঙের অঞ্চল সবচেয়ে ঘন ঘন মান থেকে দূরে টানতে পারে। অর্ধেক লাল, অর্ধেক সবুজ ছবির একটি বাদামি গড় আছে কিন্তু কোনো বাদামি প্রাধান্য নেই — উভয় সংখ্যাই সঠিক।

এটি কি আলোকচিত্রে কাজ করে, নাকি শুধু সমতল গ্রাফিক্সে?#

উভয়ই। সমতল গ্রাফিক্স পরিষ্কার, ভালোভাবে পৃথক সোয়াচ দেয়; আলোকচিত্র একটি আরও গ্রেডেড সেট দেয় কারণ প্রকৃত টোন অনেক কাছের রঙ বিস্তৃত করে। একটি ছবির জন্য, সমৃদ্ধ পরিসর ধরতে রঙের সংখ্যা ৮–১২-এ বাড়ান।