কালার পিকার

যেকোনো রং বেছে নিন আর তাৎক্ষণিকভাবে এর কোড পান

রংয়ের কোড ওয়েব ডিজাইন, গ্রাফিক ডিজাইন আর প্রোগ্রামিংয়ে সর্বত্র বিদ্যমান। ব্যবহার করতে বা পুনরুৎপাদন করতে চান এমন একটা রং দেখলে, আপনার এর কোড দরকার হয় — সেটা CSS-এর জন্য একটা HEX মান হোক, ফটোশপের জন্য একটা RGB ত্রয়ী হোক, বা প্রোগ্রামগতভাবে রং পরিচালনার জন্য একটা HSL স্পেসিফিকেশন হোক। এই টুলটি আপনার বেছে নেওয়া যেকোনো রংয়ের জন্য একসাথে তিনটা ফরম্যাটই দিয়ে দেয়।

তিনটা রং-কোড ফরম্যাট

HEX (হেক্সাডেসিমেল): ওয়েব ডেভেলপমেন্টে সবচেয়ে বেশি ব্যবহৃত ফরম্যাট। ০-৯ আর A-F অক্ষর দিয়ে গঠিত ছয়-অক্ষরের একটা স্ট্রিং, সামনে একটা হ্যাশ চিহ্ন সহ। প্রতি জোড়া অক্ষর একটা রং-চ্যানেল প্রকাশ করে: #RRGGBB। যেমন, #FF5733-এ সর্বোচ্চ লাল (FF = 255), মাঝারি সবুজ (57 = 87), আর কম নীল (33 = 51) আছে। প্রতি জোড়ার দুটো অক্ষর একই হলে HEX কোড সংক্ষিপ্ত রূপেও লেখা যায়: #FF5500 হয়ে যায় #F50।

RGB (লাল, সবুজ, নীল): প্রতিটা রং-চ্যানেলকে ০ (কিছু নেই) থেকে ২৫৫ (সর্বোচ্চ) পর্যন্ত একটা পূর্ণসংখ্যা হিসেবে নির্দিষ্ট করে। এটাই ডিজিটাল স্ক্রিনের স্বাভাবিক ফরম্যাট, যা লাল, সবুজ আর নীল রঙে আলো নির্গত করে। rgb(255, 87, 51) হলো #FF5733-এর সাথে একই রং। RGB মান CSS-এ (rgb(r, g, b)), জাভাস্ক্রিপ্টে, পাইথনে, আর বেশিরভাগ ছবি সম্পাদনার সফটওয়্যারে ব্যবহৃত হয়।

HSL (হিউ, স্যাচুরেশন, লাইটনেস): মানুষের কাছে আরও স্বজ্ঞাত একটা ফরম্যাট। হিউ হলো খাঁটি রং, একটা রং-চাকার চারপাশে ০° থেকে ৩৬০° পর্যন্ত একটা কোণ হিসেবে প্রকাশ করা: ০° = লাল, ১২০° = সবুজ, ২৪০° = নীল। স্যাচুরেশন হলো রংটা কতটা প্রাণবন্ত নাকি ধূসর (০% = ধূসর, ১০০% = সম্পূর্ণ স্যাচুরেটেড)। লাইটনেস হলো এটা কতটা হালকা নাকি গাঢ় (০% = কালো, ১০০% = সাদা, ৫০% = "স্বাভাবিক" সম্পূর্ণ-স্যাচুরেটেড রং)। রং নিয়মমাফিকভাবে সমন্বয় করার জন্য HSL চমৎকার: হালকা রঙের ছটা (টিন্ট) তৈরি করতে লাইটনেস বাড়ান, গাঢ় রঙের ছটা (শেড) তৈরি করতে কমান।

পিকারটা কীভাবে ব্যবহার করবেন

আপনার ব্রাউজারের নেটিভ কালার পিকার খুলতে রং-সোয়াচে ক্লিক বা ট্যাপ করুন, একটা রং চোখে দেখে বেছে নিন বা একটা পরিচিত মান টাইপ করুন, আর HEX, RGB আর HSL কোড সবগুলো একসাথে তাৎক্ষণিকভাবে আপডেট হয়ে যায়, যেকোনো টুল বা কোডে কপি করার জন্য প্রস্তুত। যেহেতু পিকারটা কোনো কাস্টম ইন্টারফেসের বদলে ব্রাউজারের নিজস্ব বিল্ট-ইন ইন্টারফেস ব্যবহার করে, এটা ঠিক যেভাবে আশা করবেন সেভাবেই আচরণ করে আর বিভিন্ন ডিভাইসে নির্ভরযোগ্যভাবে কাজ করে।

কোন ফরম্যাট কখন ব্যবহার করবেন

CSS আর ওয়েব ডিজাইন: HEX আর RGB দুটোই ব্যাপকভাবে সমর্থিত, কিন্তু HSL ক্রমশ বেশি পছন্দের হয়ে উঠছে কারণ এটা সমন্বয় করা এত স্বজ্ঞাত। HSL-এ একটা রংকে ১০% হালকা করা সহজ; RGB-তে এর জন্য নতুন চ্যানেল মান হিসাব করতে হয়।

প্রিন্ট ডিজাইন: প্রিন্ট সাধারণত CMYK (সায়ান, ম্যাজেন্টা, ইয়েলো, কী/ব্ল্যাক) ব্যবহার করে, যা এই টুল কভার করে না। ডিজিটাল-থেকে-প্রিন্ট রূপান্তরের জন্য অ্যাডোবি ইলাস্ট্রেটরের মতো পেশাদার সফটওয়্যার ব্যবহার করুন।

প্রোগ্রামিং: বেশিরভাগ গ্রাফিক্স লাইব্রেরির স্বাভাবিক ফরম্যাট RGB। প্রোগ্রামগতভাবে রংয়ের প্যালেট তৈরি করতে চাইলে HSL কাজে লাগে।

রং তত্ত্বের প্রাথমিক ধারণা

রং বুঝলে এই টুলটা আরও কার্যকরভাবে ব্যবহার করা যায়:

পরিপূরক রং (Complementary): হিউ চাকায় একে অপরের বিপরীতে থাকা রং (১৮০° ব্যবধানে) সর্বোচ্চ কনট্রাস্ট তৈরি করে। লাল (০°) আর সায়ান (১৮০°)।

সমগোত্রীয় রং (Analogous): হিউ চাকায় পাশাপাশি থাকা রং (৩০-৬০° ব্যবধানে) সুরেলা, কম-কনট্রাস্টের প্যালেট তৈরি করে।

ত্রিভুজাকার রং (Triadic): ১২০° ব্যবধানে সমানভাবে দূরে থাকা তিনটা রং প্রাণবন্ত, ভারসাম্যপূর্ণ স্কিম তৈরি করে।

টিন্ট আর শেড: হালকা রঙের ছটা (টিন্ট) তৈরি করতে HSL লাইটনেস ৫০%-এর ওপরে বাড়ান। গাঢ় ছটার (শেড) জন্য ৫০%-এর নিচে কমান।

অ্যাক্সেসিবিলিটি আর কনট্রাস্ট

ওয়েব অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ড টেক্সট আর ব্যাকগ্রাউন্ড রংয়ের মধ্যে পর্যাপ্ত কনট্রাস্ট দাবি করে। WCAG 2.1 নির্দেশিকা সাধারণ টেক্সটের জন্য ন্যূনতম ৪.৫:১ আর বড় টেক্সটের জন্য ৩:১ কনট্রাস্ট অনুপাত নির্দিষ্ট করে। অ্যাক্সেসিবিলিটি যাচাই করতে এই পিকারের রং-কোড একটা নির্দিষ্ট কনট্রাস্ট চেকারে ব্যবহার করুন।

ডিজাইনের জন্য রংয়ের সমন্বয়

আগে উল্লেখিত মৌলিক জোড়ার বাইরেও, ডিজাইনের কাজে আরও কিছু সমন্বয় প্রায়ই আসে। একটা মনোক্রোম্যাটিক স্কিম একটা মাত্র হিউর ভিন্ন শেড, টিন্ট আর টোন ব্যবহার করে, হিউ আর স্যাচুরেশন স্থির রেখে শুধু HSL লাইটনেস বদলে তৈরি করা — কোনো রং সংঘর্ষের ঝুঁকি ছাড়াই একটা সুসংহত প্যালেট তৈরির নির্ভরযোগ্য উপায়। একটা স্প্লিট-কমপ্লিমেন্টারি স্কিম একটা মূল রং আর তার পরিপূরকের পাশের দুটো রং নেয়, যা একটা সরাসরি পরিপূরক জোড়ার বেশিরভাগ ভিজ্যুয়াল কনট্রাস্ট দেয়, তবে আরও নরম, সূক্ষ্ম অনুভূতি সহ।

ওয়েব অ্যাক্সেসিবিলিটি আর রং কনট্রাস্ট

ওয়েব কনটেন্ট অ্যাক্সেসিবিলিটি গাইডলাইন পড়ার-যোগ্য টেক্সটের জন্য কনট্রাস্ট অনুপাতের প্রয়োজনীয়তা নির্ধারণ করে: AA স্ট্যান্ডার্ড সাধারণ টেক্সটের জন্য অন্তত ৪.৫:১ আর বড় টেক্সটের জন্য (১৮pt বা তার বেশি, বা ১৪pt বোল্ড) ৩:১ দাবি করে, আর কঠোরতর AAA স্ট্যান্ডার্ড যথাক্রমে ৭:১ আর ৪.৫:১ দাবি করে। কম দৃষ্টিশক্তিসম্পন্ন যেকারো জন্য টেক্সট আর ব্যাকগ্রাউন্ডের মধ্যে উচ্চ কনট্রাস্ট গুরুত্বপূর্ণ, বিশেষ করে প্রায় ৮% পুরুষ আর ০.৫% নারীর জন্য যাদের কোনো না কোনো ধরনের রং-দৃষ্টি ত্রুটি আছে, যাদের কাছে নির্দিষ্ট কিছু রং-জোড়া, যা বেশিরভাগ মানুষের কাছে আলাদা দেখায়, প্রায় একই রকম দেখাতে পারে।

নামযুক্ত CSS রং

CSS ১৪৭টা নামযুক্ত রং সংজ্ঞায়িত করে, যা সরাসরি একটা হেক্স বা RGB মানের জায়গায় ব্যবহার করা যায়, লাল, নীল আর কালোর মতো সহজ নাম থেকে শুরু করে cornflowerblue, papayawhip, আর rebeccapurple-এর মতো আরও অস্বাভাবিক নাম পর্যন্ত — শেষেরটা ২০১৪ সালে নামকরণ করা হয় CSS ডেভেলপার এরিক মেয়ারের মেয়ে রেবেকা মেয়ারের স্মরণে। এই টুল দিয়ে একটা রং বেছে নিয়ে এটাকে সবচেয়ে কাছের নামযুক্ত CSS রংয়ের সাথে তুলনা করাটা দ্রুত দেখার একটা উপায় যে আপনার মাথায় থাকা প্রায় সেই শেডের জন্য ইতিমধ্যে একটা স্ট্যান্ডার্ড নাম আছে কি না।

ব্যক্তিগত ও তাৎক্ষণিক

কালার পিকারটি সম্পূর্ণভাবে আপনার ব্রাউজারে নেটিভ ব্রাউজার কালার ইনপুট ব্যবহার করে চলে, তাই ফলাফল আসে তাৎক্ষণিকভাবে, আর আপনার বেছে নেওয়া কোনো রংই কখনো কোনো সার্ভারে পাঠানো, লগ করা বা শেয়ার করা হয় না।