র‍্যান্ডম কালার জেনারেটর

একটি মকআপ, চার্ট বা খালি ক্যানভাসের জন্য একটি রঙ দরকার, আর অভ্যাসবশত বেছে নিতে চান না? এই বিনামূল্যের র‍্যান্ডম কালার জেনারেটর স্ক্রিন যে সম্পূর্ণ 24-বিট রেঞ্জ দেখাতে পারে তা থেকে রঙ তোলে এবং প্রতিটি রঙকে তার কোডের পাশে একটি রঙের নমুনায় দেখায়। “সংখ্যা” ঘরে আপনি কত রঙ চান তা বেছে নিন — 1 থেকে 50 পর্যন্ত যেকোনো সংখ্যা — প্রয়োজনীয় ফরম্যাট চিহ্নিত করুন এবং “তৈরি করুন” বোতাম চাপুন। পৃষ্ঠাটি একটি HEX রঙে খোলে, তাই প্রথম ফলাফল মাত্র এক ক্লিক দূরে। “HEX কোড” চেকবক্সটি শুরু থেকেই চিহ্নিত, তার পাশে “RGB কোড” ও “HSL কোড” চেকবক্স রয়েছে, এবং এই তিনটির যেকোনো সমন্বয় একসাথে চালু করা যায়। “তৈরি করুন” বোতামের পাশের গিয়ার বোতাম “উন্নত অপশন” প্যানেল খোলে, যেখানে আপনি রঙকে এক ধরন বা সীমায় সীমাবদ্ধ করতে, পুনরাবৃত্তি বাদ দিতে এবং HEX লেখার ধরন পরিবর্তন করতে পারেন।

প্রতিটি রঙ আপনার ব্রাউজারে Web Crypto API (crypto.getRandomValues) এর মাধ্যমে তৈরি হয়, যা Math.random() এর মতো সিউডো-র‍্যান্ডম ফাংশনের বদলে আপনার সিস্টেমের নিজস্ব র‍্যান্ডমনেস উৎস থেকে ক্রিপ্টোগ্রাফিকভাবে শক্তিশালী র‍্যান্ডম বাইট সরবরাহ করে। স্ক্রিনের একটি রঙ তিনটি চ্যানেলের সমষ্টি — লাল, সবুজ এবং নীল — প্রতিটি 0 থেকে 255 এর মধ্যে একটি পূর্ণসংখ্যা, এবং একটি র‍্যান্ডম বাইট ঠিক 256টি মান নিতে পারে। অর্থাৎ প্রতিটি চ্যানেল স্রেফ একটি বাইট, মাঝে কোনো অতিরিক্ত ধাপ নেই: কোনো ভাগশেষ নেওয়া হয় না, এবং কোনো রূপান্তর ধাপ কোনো শেডকে অগ্রাধিকার দেয় না। এর ফলে পৃষ্ঠাটি তৈরি করতে পারা সব 16,777,216টি রঙ, আপনি প্রতিবার “তৈরি করুন” চাপলে, সম্পূর্ণ সমসম্ভাব্য হয়ে ওঠে। “উন্নত অপশন” বিভাগের একটি সংকীর্ণ সীমা এই নিশ্চয়তা সীমার মধ্যে বজায় রাখে: রঙ এখনও পুরো স্থান থেকেই তোলা হয়, আর যা সীমার বাইরে পড়ে তা বাদ দেওয়া হয়, তাই সীমা যে রঙগুলো অনুমতি দেয় তাদের প্রত্যেকের সমান সুযোগ থাকে। কিছুই সার্ভারে পাঠানো হয় না, কিছুই লগ করা হয় না, এবং পৃষ্ঠা লোড হওয়ার পর সংযোগ বিচ্ছিন্ন করলেও এটি কাজ করতে থাকে।

তিনটি ফরম্যাট একই রঙকে তিনভাবে বর্ণনা করে। “HEX কোড” ফরম্যাট হলো ছয়-সংখ্যার রূপ যা CSS এবং বেশিরভাগ ডিজাইন টুলে ব্যবহৃত হয়, যেমন #0778ff; এটি ছোট হাতের অক্ষরে এবং শুরুতে # দিয়ে লেখা হয়, আর “উন্নত অপশন” বিভাগের “বড় হাতের অক্ষর” ও “# ছাড়া” অপশন দুটি অন্যভাবে লেখা কোড চায় এমন টুলের জন্য এটি বদলে দেয়। “RGB কোড” ফরম্যাট তিনটি চ্যানেল আলাদা করে লেখে, যেমন rgb(7, 120, 255), যা প্রতিটি চ্যানেল নিয়ে আলাদাভাবে কাজ করে এমন কোডের জন্য উপযুক্ত। “HSL কোড” ফরম্যাট রঙকে বর্ণচ্ছটা, সম্পৃক্ততা এবং আলোকমাত্রা দিয়ে বর্ণনা করে, যেমন hsl(213, 100%, 51%) — পরে হাতে সমন্বয় করার সবচেয়ে সহজ রূপ। তিনটি ফরম্যাটই সরাসরি স্টাইলশিটে পেস্ট করা যায়। তবে এগুলো সমান নির্ভুল নয়। HEX এবং RGB নির্ভুল; HSL রাউন্ড করা। পৃষ্ঠাটি বর্ণচ্ছটা, সম্পৃক্ততা এবং আলোকমাত্রাকে পূর্ণসংখ্যা হিসেবে লেখে, এবং প্রায় 89% রঙের জন্য এই রাউন্ড করা মান একই রঙে ফিরে রূপান্তরিত হয় না: #646503 কে hsl(61, 94%, 20%) হিসেবে দেখানো হয়, যা ফিরে রূপান্তরিত হয় #616303-এ। একটি চ্যানেলে পার্থক্য কখনও 5 ধাপের বেশি হয় না এবং সাধারণত 1 বা 2 — স্ক্রিনে অদৃশ্য, কিন্তু আসল, যদি আপনি HSL মান সংরক্ষণ করে মূল HEX ফেরত পাওয়ার আশা করেন। তাই মান সংরক্ষণ করতে HEX বা RGB ব্যবহার করুন।

একটি রঙ ফলাফলের মাঝখানে একটি একক চিপ হিসেবে দেখা যায়; একাধিক রঙ একটি সংখ্যাযুক্ত তালিকা হিসেবে দেখা যায়, প্রতি সারিতে একটি রঙ, নির্বাচিত ফরম্যাটগুলো পাশাপাশি এবং শেষে একটি ছোট কনট্রাস্ট ব্যাজ সহ। তিনটির বেশি রঙের তালিকা বক্সের ভেতরে স্ক্রল হয়, এবং এর কোণের তীরচিহ্ন এটিকে সম্পূর্ণ উচ্চতায় খোলে; পৃষ্ঠাটি মনে রাখে আপনি এটি কোন অবস্থায় রেখেছিলেন। শুধু সেই কোড কপি করতে যেকোনো কোডে ক্লিক করুন। সারির শেষের কপি বোতাম সেই রঙের সব কোড এক লাইনে, স্পেস দিয়ে আলাদা করে, কপি করে। নমুনাটিতে ক্লিক করুন, আর আপনার ব্রাউজারের নিজস্ব কালার পিকার খুলবে: সেখানে অন্য একটি রঙ বেছে নিন, আর সেই সারির সব কোড তার সাথে মিলিয়ে, আপনার চালু করা প্রতিটি ফরম্যাটে, তার ব্যাজসহ পুনরায় লেখা হবে। “সব কপি করুন” বোতাম গোটা সেট কপি করে, প্রতি সারিতে একটি রঙ, আর “ফাইলে সংরক্ষণ করুন” একই টেক্সট একটি সাধারণ .txt ফাইলে লেখে; দুটোই কালার পিকারে আপনার পরিবর্তন করা রঙ অনুসরণ করে। “ইতিহাস” এই ব্রাউজারে আপনার শেষ 10টি সেট ঠিক যেমন তৈরি হয়েছিল তেমনই সংরক্ষণ করে, আর “পরিষ্কার করুন” বোতাম ফলাফল খালি করে। “উন্নত অপশন” বিভাগের সেটিংসসহ আপনার সেটিংস পরবর্তী ভিজিটের জন্য মনে রাখা হয়।

সমসম্ভাব্য রঙ সমানভাবে ছড়ানো দেখায় না, এবং কী প্রত্যাশা করতে হবে তা জানা আপনাকে ভুল কারণে “তৈরি করুন” চাপা থেকে বাঁচায়। পুরো সীমা জুড়ে পরিমাপ করলে, প্রায় 35% রঙ উজ্জ্বল এবং সম্পৃক্ত, HSL সম্পৃক্ততা কমপক্ষে 70% এবং আলোকমাত্রা 35% থেকে 65% এর মধ্যে। ধূসরের কাছাকাছি, 20% এর কম সম্পৃক্ততার রঙ মাত্র প্রায় 4%, আর খুব গাঢ় (আলোকমাত্রা 20% এর কম) এবং খুব হালকা (80% এর বেশি) রঙ প্রতিটি প্রায় 3%। তাই “সব রঙ” থেকে দশটি রঙের একটি সেটে সাধারণত বেশ কয়েকটি জোরালো রঙ থাকে এবং খুব কমই একটি প্যাস্টেল বা গাঢ় ধূসর রঙ থাকে। নির্দিষ্ট কোনো ধরন দরকার হলে, “রঙের ধরন”-এ সেটি বেছে নিন: “উজ্জ্বল” ঠিক সেই সম্পৃক্ত গ্রুপ রাখে, আর “প্যাস্টেল”, “গাঢ়”, “স্তিমিত” এবং “ধূসর টোন” তাদের নিজ নিজ গ্রুপের জন্য একই কাজ করে। “কাস্টম” বেছে নিলে আপনি “বর্ণচ্ছটা”, “সম্পৃক্ততা” এবং “আলোকমাত্রা”-র নিজের সীমা নির্ধারণ করতে পারেন, এবং একটি বর্ণচ্ছটা সীমা 0 পেরিয়ে যেতে পারে, তাই 330 থেকে 30 পর্যন্ত সীমা লাল রঙ দেয়। সীমাটি পৃষ্ঠায় দেখানো HSL কোডের সাথে যাচাই করা হয়, তাই কোনো কোড সীমার বাইরে পড়ে না, আর যদি এতে “সংখ্যা”-তে দেওয়া মানের জন্য যথেষ্ট রঙ না থাকে, পৃষ্ঠাটি রঙ পুনরাবৃত্তির বদলে সীমা প্রশস্ত করতে বলে। অন্যথায় পুনরাবৃত্তি সম্ভব কিন্তু বিরল: এটি বাদ দিতে “পুনরাবৃত্তি ছাড়া” চিহ্নিত করুন, আর তা ছাড়া পুরো সীমা থেকে 50টি রঙের মধ্যে দুটি মিলে যাওয়ার সম্ভাবনা প্রায় 13,700-এ 1।

একটি এলোমেলো রঙ প্রায়ই পটভূমি হিসেবে চাওয়া হয়, যা একটি প্রশ্ন তোলে যার উত্তর শুধু নমুনা দেখে পাওয়া যায় না: এর উপর লেখা কি পড়া যাবে? ওয়েব অ্যাক্সেসিবিলিটি নির্দেশিকা, WCAG, সাধারণ টেক্সটের জন্য কমপক্ষে 4.5:1 কনট্রাস্ট অনুপাত দাবি করে। এই পৃষ্ঠা তৈরি করতে পারা সব রঙ জুড়ে পরিমাপ করলে, কালো টেক্সট তাদের প্রায় 65%-এ এটি অর্জন করে, আর সাদা টেক্সট প্রায় 36%-এ, এবং এমন কোনো রঙ নেই যেখানে দুটোই ব্যর্থ হয়: দুটির মধ্যে ভালোটি সবসময় কমপক্ষে 4.58:1 অর্জন করে। তাই যেকোনো এলোমেলো পটভূমিতে, কালো বা সাদা টেক্সট পড়া যাবে, আর পৃষ্ঠাটি আপনাকে দেখায় কোনটি। প্রতিটি রঙের পাশে একটি ছোট ব্যাজ দেখানো হয়, যাতে দুটির মধ্যে ভালো রঙটিতে Aa লেখা থাকে, তার পাশে কনট্রাস্ট অনুপাত। অনুপাতটি নিচের দিকে রাউন্ড করা হয়, তাই এটি কখনও আসল কনট্রাস্টের চেয়ে বেশি দেখায় না, এবং আপনি কালার পিকারে রঙ পরিবর্তন করলে এটি আপডেট হয়। ব্যাজটি শুধু কালো এবং সাদা টেক্সট তুলনা করে; ব্র্যান্ড রঙ বা অন্য যেকোনো টেক্সট রঙের জন্য, রঙের জোড়াটি একটি কনট্রাস্ট চেকারে যাচাই করুন।

এলোমেলো হওয়া আর সুসংগত হওয়া এক জিনিস নয়। একটি সেটের প্রতিটি রঙ একা একা তোলা হয়, অন্যগুলো সম্পর্কে কোনো জ্ঞান ছাড়াই, তাই জেনারেটর ডিজাইনারের অর্থে কখনও প্যালেট তৈরি করে না — না পরিপূরক জোড়া, না সাদৃশ্যপূর্ণ ধারা, না কোনো ভাগাভাগি করা আলোকমাত্রা। একটি সংকীর্ণ সীমা একটি সেটের চরিত্র পরিবর্তন করে, এই নিয়ম নয়: প্যাস্টেল রঙ বা নীলের একটি ধারা তবুও একে একে আসে, তাদের মধ্যে বেঁধে রাখার মতো কিছুই ছাড়াই। এখানেই এর উপযোগিতা: এটি আপনাকে এমন একটি রঙ দেয় যা আপনি নিজে বেছে নিতেন না, আর এটাই অভ্যাস বা সৃজনশীল বাধা ভাঙে। একটি এলোমেলো আবিষ্কারকে ব্যবহারযোগ্য কিছুতে পরিণত করতে, আপনার পছন্দের রঙটি রাখুন এবং তার সাথে মিলিয়ে বাকি রঙ বেছে নিন, পুরো সেট কাকতালীয়ভাবে মিলে যাওয়া পর্যন্ত বারবার “তৈরি করুন” চাপার বদলে। এর বর্ণচ্ছটা ধরে রাখুন এবং হালকা ও গাঢ় রূপের জন্য ধাপে ধাপে আলোকমাত্রা পরিবর্তন করুন, অথবা বিপরীত রঙের জন্য বর্ণচ্ছটা 180 ডিগ্রি ঘোরান। “HSL কোড” ফরম্যাটই এই পদক্ষেপগুলোকে অনুমানের বদলে গণিত করে তোলে।

কেন এই র‍্যান্ডম কালার জেনারেটর বেছে নেবেন?

• প্রতিটি রঙ আপনার ব্রাউজারে Web Crypto API দিয়ে তৈরি হয়, কিছুই আপলোড হয় না
• সব 16,777,216টি রঙ সম্পূর্ণ সমসম্ভাব্য, প্রতি চ্যানেলে একটি র‍্যান্ডম বাইট
• একই রঙের জন্য HEX, RGB এবং HSL কোড, যেকোনো সমন্বয়ে
• একসাথে 50টি পর্যন্ত রঙ, প্রতিটি একটি টেক্সট-কনট্রাস্ট ব্যাজসহ রঙের নমুনায়
• উজ্জ্বল, প্যাস্টেল, গাঢ়, স্তিমিত এবং ধূসর টোন, অথবা আপনার নিজের বর্ণচ্ছটা, সম্পৃক্ততা ও আলোকমাত্রা সীমা
• প্রয়োজনে পুনরাবৃত্তি ছাড়া, আর HEX বড় হাতের অক্ষরে বা # ছাড়া
• কপি করতে একটি কোডে ক্লিক করুন, বা আপনার ব্রাউজারের কালার পিকারে যেকোনো রঙ পরিবর্তন করুন
• সব কপি করুন, ফাইলে সংরক্ষণ করুন, এবং আপনার ব্রাউজারে রাখা শেষ 10টি সেটের ইতিহাস
• বিনামূল্যে এবং সীমাহীন: সাইন-আপ নেই, কোটা নেই, আমাদের সার্ভারে কিছুই সংরক্ষিত হয় না

এলোমেলো রঙ সেখানেই কাজে আসে যেখানে কেউ কোনো রঙ ঠিক করার আগেই একটি রঙ দরকার হয়। ডিজাইনাররা সৃজনশীল বাধা ভাঙতে এবং এমন একটি শুরুর বিন্দু খুঁজে পেতে এগুলো ব্যবহার করেন যেখানে তাদের চেনা প্যালেট কখনও পৌঁছাত না। ডেভেলপাররা মকআপ, প্লেসহোল্ডার এবং অ্যাভাটার পূরণ করে, চার্টের প্রতিটি সিরিজকে তার নিজের রঙ দেয় যখন আসল থিম এখনও ঠিক হয়নি, এবং পরীক্ষা করে ইন্টারফেস কীভাবে এমন পটভূমি সামলায় যার জন্য এটি ডিজাইন করা হয়নি — “সব রঙ” থেকে 50টি রঙের একটি সেটে প্রায় সবসময় অন্তত একটি খুব গাঢ় বা খুব হালকা রঙ থাকে, আর “গাঢ়” বা “প্যাস্টেল” এই পরীক্ষাকে এক প্রান্তে নিয়ে যায়। জেনারেটিভ শিল্পী এবং গেম প্রোটোটাইপাররা মানগুলো সরাসরি কোডে দেয়, যেখানে RGB রূপটি বেশিরভাগ গ্রাফিক্স লাইব্রেরিতে খাপ খায়। শিক্ষকরা তিনটি ফরম্যাট পাশাপাশি রেখে দেখান যে একটি রঙ কোড হিসেবে, তিনটি চ্যানেল হিসেবে, বা কালার হুইলের একটি অবস্থান হিসেবে লেখা যায়, এবং কেন HSL সংস্করণ রাউন্ড করা। আর যে কেউ একটি তালিকায় লেবেল, ট্যাগ বা রঙ অনুযায়ী কোড দেয়, সে কোনটি বেছে নেবে তা নিয়ে চিন্তা না করেই আলাদা করা যায় এমন রঙ পায়।

জানার মতো কয়েকটি সৎ সীমাবদ্ধতা আছে। এটি একটি জেনারেটর, প্যালেট টুল নয়: এটি রঙের সামঞ্জস্য তৈরি করে না এবং অন্য রঙ পরিবর্তন হওয়ার সময় একটি রঙ স্থির রাখে না, আর একটি সংকীর্ণ সীমা এক ধরনের রঙ দেয়, একসাথে মানানসই বেছে নেওয়া রঙ নয়। কনট্রাস্ট ব্যাজ শুধু কালো এবং সাদা টেক্সট তুলনা করে। পৃষ্ঠাটি স্ক্রিন যে sRGB রঙ দেখায় তা নিয়ে কাজ করে — HEX, RGB এবং HSL — স্বচ্ছতা ছাড়া এবং CMYK, Pantone, OKLCH বা নামযুক্ত CSS রঙ ছাড়া; প্রিন্টের জন্য, স্ক্রিনের কোডের উপর নির্ভর করার বদলে প্রিন্টের টুলে রঙ মিলিয়ে নিন। একই কোড বিভিন্ন ডিসপ্লেতে সামান্য ভিন্ন দেখাতে পারে, কারণ স্ক্রিন সমানভাবে ক্যালিব্রেট করা থাকে না। HSL মান উপরে বর্ণিত হিসেবে রাউন্ড করা, এবং “পুনরাবৃত্তি ছাড়া” চিহ্নিত না থাকলে, একটি সেট পুনরাবৃত্তির জন্য যাচাই করা হয় না। পৃষ্ঠাটি আসলে যা নিশ্চিত করে তা সংকীর্ণ এবং নির্ভুল: এর 16,777,216টি রঙের প্রতিটি, বা আপনার নির্ধারিত সীমার মধ্যে প্রতিটি রঙ, প্রতিবার চাপলে একই সুযোগ পায়, আপনার ব্রাউজারের ক্রিপ্টোগ্রাফিক উৎস থেকে তোলা এবং কখনও কোথাও পাঠানো হয় না।