Color Palette ওয়েবপেজের প্রতিটি এলিমেন্ট স্ক্যান করে এবং সেখানে ব্যবহৃত সব কালার — যেমন টেক্সট, ব্যাকগ্রাউন্ড থেকে শুরু করে বর্ডার, শ্যাডো এবং অ্যাকসেন্ট কালারগুলো সংগ্রহ করে। কালারগুলো ব্যবহারের হার অনুযায়ী (সবচেয়ে বেশি ব্যবহৃত কালারটি আগে) সোয়াচ হিসেবে প্রদর্শিত হয়, যেখানে প্রতিটি কালারের HEX ভ্যালু এবং ব্যবহারের সংখ্যা উল্লেখ থাকে। যেকোনো সোয়াচে ক্লিক করে কপি করুন অথবা পুরো প্যালেটটি কালার কোডের লিস্ট হিসেবে এক্সপোর্ট করুন।
প্রতিটি সুন্দরভাবে ডিজাইন করা ওয়েবসাইটে একটি নির্দিষ্ট কালার প্যালেট থাকে — সাধারণত ৩ থেকে ৮টি প্রধান কালার এবং কিছু নিউট্রাল কালার। 'Color Palette' টুলটি প্রতিটি এলিমেন্টের কালার, ব্যাকগ্রাউন্ড-কালার, বর্ডার-কালার এবং বক্স-শ্যাডো ভ্যালুগুলো স্ক্যান করে অটোমেটিকভাবে এই প্যালেটটি সংগ্রহ করে। এর ফলে পেজে ব্যবহৃত প্রতিটি কালারের একটি লিস্ট তৈরি হয় যা ব্যবহারের হার অনুযায়ী সাজানো থাকে, যা আপনাকে সাইটটির কালার সিস্টেম সম্পর্কে একটি পূর্ণাঙ্গ ধারণা দেয়। প্রধান কালারগুলো (যেমন ব্র্যান্ড কালার, ব্যাকগ্রাউন্ড কালার, টেক্সট কালার) সবচেয়ে বেশি ব্যবহৃত হওয়ায় তালিকার প্রথমে থাকে। অ্যাকসেন্ট কালার এবং একবার ব্যবহৃত ভ্যালুগুলো নিচের দিকে থাকে। এটি ডিজাইন রিসার্চের জন্য অত্যন্ত কার্যকর — যেকোনো ওয়েবসাইট ভিজিট করে কয়েক সেকেন্ডের মধ্যেই তার সঠিক কালার প্যালেট সংগ্রহ করা সম্ভব। এটি আপনার নিজের সাইট অডিট করার জন্যও দরকারী: এমন কোনো কালার কি আছে যা আপনার ডিজাইন সিস্টেমের অংশ নয়? ডিজাইন স্পেসিফিকেশনে যেখানে কেবল ৩টি গ্রে শেড থাকার কথা, সেখানে কি আপনি ৫টি ভিন্ন শেড ব্যবহার করছেন? 'Color Palette' কালারের ব্যবহারের হারকে দৃশ্যমান এবং পরিমাপযোগ্য করে তোলে।
পেজের প্রতিটি দৃশ্যমান এলিমেন্ট স্ক্যান করে এবং সেগুলোর প্রোপার্টি থেকে কালার সংগ্রহ করে: যেমন color, background-color, border-color, box-shadow color, outline-color, এবং text-decoration-color। পেজে ব্যবহৃত প্রতিটি কালার এখানে ক্যাপচার করা হয়।
কালারগুলো ব্যবহারের হার অনুযায়ী সাজানো থাকে — সবচেয়ে বেশি ব্যবহৃত কালারটি প্রথমে প্রদর্শিত হয়। প্রধান ব্র্যান্ড কালার এবং ব্যাকগ্রাউন্ডগুলো উপরের দিকে থাকে এবং খুব কম ব্যবহৃত অ্যাকসেন্ট কালারগুলো শেষে থাকে। এর মাধ্যমে পেজের প্রাইমারি, সেকেন্ডারি এবং অ্যাকসেন্ট কালারগুলো তাৎক্ষণিকভাবে দেখা সম্ভব।
প্রতিটি কালার একটি বড় ভিজ্যুয়াল সোয়াচ হিসেবে প্রদর্শিত হয়, যার নিচে এর HEX কোড এবং কতবার ব্যবহৃত হয়েছে তা উল্লেখ থাকে। সোয়াচগুলো যথেষ্ট বড় হওয়ায় সূক্ষ্ম পার্থক্যগুলোও (যেমন #333 বনাম #2a2a2a) সহজেই বোঝা যায়।
যেকোনো কালার সোয়াচে ক্লিক করলেই এর HEX ভ্যালু ক্লিপবোর্ডে কপি হয়ে যাবে। কোনো কালার প্যানেল বা বাড়তি ডায়ালগ ওপেন করার প্রয়োজন নেই — এক ক্লিকেই কপি হয়ে যায়।
সম্পূর্ণ প্যালেটটি HEX কালার কোডের একটি লিস্ট হিসেবে কপি করতে "Export All"-এ ক্লিক করুন। এরপর ডিজাইন টুল, CSS ভ্যারিয়েবল ফাইল বা কালার ডকুমেন্টেশনে এটি পেস্ট করুন। লিস্টটি ব্যবহারের হার অনুযায়ী ক্রমানুসারেই থাকবে।
কালারগুলোকে নরমালাইজ করা হয় (একই কালারের RGB এবং HEX ভার্সনগুলো মার্জ করা হয়) এবং ডুপ্লিকেটগুলো মুছে ফেলা হয়। প্যালেটে কেবল ইউনিক কালারগুলোই থাকে এবং ডুপ্লিকেট ভার্সনগুলোর ব্যবহারের সংখ্যা একত্র করে দেখানো হয়।
চমৎকার কালার স্কিম সমৃদ্ধ ওয়েবসাইট ভিজিট করুন এবং তাদের হুবহু কালার প্যালেট সংগ্রহ করুন। আপনার নিজের ডিজাইনের ভিত্তি হিসেবে এই কালারগুলো ব্যবহার করুন — অথবা কোন কালারের সমন্বয়গুলো ভালো দেখায় তার ডকুমেন্টেশন রাখুন।
আপনার নিজের সাইটে কালারের সামঞ্জস্যতা যাচাই করতে 'Color Palette' টুলটি ব্যবহার করুন। যেখানে কেবল একটি নীল শেড থাকার কথা, সেখানে কি ৪টি সামান্য ভিন্ন শেড ব্যবহৃত হয়েছে? ব্র্যান্ডের বাইরের কোনো কালার কি চলে আসছে? এটি ব্যবহারের হার অনুযায়ী সাজানো থাকায় এসব অসামঞ্জস্যতা সহজেই চোখে পড়ে।
প্যালেটটি এক্সপোর্ট করুন এবং সেটিকে CSS কাস্টম প্রোপার্টিতে (--color-primary, --color-secondary ইত্যাদি) রূপান্তর করুন। ব্যবহারের হারের ওপর ভিত্তি করে আপনি সহজেই প্রাইমারি, সেকেন্ডারি এবং অ্যাকসেন্ট কালারগুলো নির্ধারণ করতে পারবেন।
প্রতিযোগীদের ওয়েবসাইটের ব্র্যান্ড পজিশনিং বুঝতে তাদের কালার প্যালেট সংগ্রহ করুন। ওয়ার্ম বনাম কুল কালার, হাই-কন্ট্রাস্ট বনাম মিউটেড — প্যালেট থেকেই তাদের ডিজাইন পরিকল্পনার উদ্দেশ্য বোঝা যায়।
ব্যাকগ্রাউন্ড কালারের পাশাপাশি সব টেক্সট কালারগুলো দেখুন। টেক্সট এবং ব্যাকগ্রাউন্ডের কোনো সমন্বয় কি খুব কম কন্ট্রাস্টের? WCAG কন্ট্রাস্ট রিকোয়ারমেন্ট অনুযায়ী পরীক্ষা করার জন্য এই প্যালেট আপনাকে কালারের পূর্ণাঙ্গ সেট প্রদান করে।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Color Palette আইকনে ক্লিক করুন। টুলটি পেজের প্রতিটি এলিমেন্ট স্ক্যান করবে এবং সব কালার ভ্যালু সংগ্রহ করবে।
কালার সোয়াচের একটি গ্রিড প্রদর্শিত হবে যা ব্যবহারের হার অনুযায়ী সাজানো থাকে। সবচেয়ে বেশি ব্যবহৃত কালারগুলো উপরে থাকে। প্রতিটি সোয়াচে HEX কোড এবং এই কালারটি ব্যবহার করা এলিমেন্টের সংখ্যা থাকে।
যেকোনো সোয়াচে ক্লিক করে এর HEX ভ্যালু ক্লিপবোর্ডে কপি করুন। একটি কুইক কনফার্মেশন মেসেজ আসবে।
সবগুলো কালার একটি লিস্ট হিসেবে কপি করতে "Export All"-এ ক্লিক করুন। এরপর আপনার CSS ভ্যারিয়েবল ফাইল, ডিজাইন টুল বা ডকুমেন্টেশনে পেস্ট করুন।
একই সাইটের বিভিন্ন পেজে নেভিগেট করুন এবং পুরো সাইটে কালারের সামঞ্জস্যতা যাচাই করতে প্যালেটগুলো সংগ্রহ করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
