রঙ কোড জেনারেটর

Color code generator কী করে?

এই color code generator একটি রঙকে HEX, RGB, HSL, CSS named color এবং complementary color হিসেবে দেখায়। আপনি color picker ব্যবহার করতে পারেন বা `#RRGGBB` format-এ HEX input লিখতে পারেন। তিন অক্ষরের HEX যেমন #ABC দিলে tool সেটিকে ছয় অক্ষরে normalize করতে পারে। Preview block নির্বাচিত রঙ দেখায়, result card-গুলোতে HEX, `rgb(r, g, b)`, `hsl(h, s%, l%)`, CSS color name এবং complement color দেখা যায়। প্রতিটি result-এর পাশে copy বোতাম আছে, তাই designer বা developer দ্রুত code ব্যবহার করতে পারেন।

HEX, RGB ও HSL কীভাবে সম্পর্কিত?

HEX হলো red, green, blue channel-এর hexadecimal রূপ। #3D7EF7 মানে red 61, green 126, blue 247। RGB একই channel 0-255 decimal মানে দেখায়। HSL hue, saturation এবং lightness ব্যবহার করে; hue 0-360°, saturation ও lightness 0-100%। একই রঙ তিন format-এ ভিন্ন দেখালেও browser-এ একই visual color তৈরি করতে পারে। Tool internal conversion করে HEX থেকে RGB, RGB থেকে HSL এবং hue 180° ঘুরিয়ে complementary color বের করে।

CSS named color ও complement

যদি নির্বাচিত HEX official CSS named color list-এর সঙ্গে মিলে যায়, tool নাম দেখায়; যেমন #FFFFFF হলে white, #000000 হলে black, #FF0000 হলে red। না মিললে em dash দেখায়। Complementary color base hue-এর বিপরীত দিকে থাকে এবং contrast তৈরি করতে পারে। তবে complement মানে সব সময় accessible pair নয়; text/background contrast আলাদা করে মাপতে হবে। Sidebar-এ HEX, RGB, HSL এবং WCAG contrast reference দেখানো হয়, যা মনে করিয়ে দেয় যে রঙের code জানা আর ব্যবহারযোগ্য contrast নিশ্চিত করা একই জিনিস নয়।

ব্যবহার ও সতর্কতা

এই tool UI theme, brand exploration, CSS variable, chart color, icon color, button state বা quick design handoff-এ কাজে লাগে। Copy করা value CSS, JavaScript, SVG, design token বা documentation-এ ব্যবহার করা যায়। Input invalid হলে result update হবে না, তাই `#` সহ ছয় hexadecimal character ব্যবহার করুন। Color picker browser ও operating system অনুযায়ী সামান্য ভিন্ন UI দেখাতে পারে, কিন্তু output format একই থাকে। Production design-এ শুধু রঙের সৌন্দর্য নয়, contrast ratio, color-blind usability, dark mode, hover/focus state এবং disabled state পরীক্ষা করুন। Complement color accent হিসেবে ভালো হতে পারে, কিন্তু warning, success, error বা brand semantic color-এর সঙ্গে conflict করছে কিনা দেখুন। সবশেষে selected রঙ বাস্তব component-এ বসিয়ে text, border, shadow ও background-এর সঙ্গে পরীক্ষা করা সবচেয়ে নির্ভরযোগ্য পদ্ধতি।

রঙ handoff করার সময় শুধু HEX দিলে অনেক সময় যথেষ্ট, কিন্তু design token বা documentation-এ RGB/HSL value রাখলে alpha, hover shade বা dynamic theme তৈরি সহজ হয়। Complement color accent হিসেবে ব্যবহার করার আগে brand guideline মিলিয়ে নিন। Lightness সামান্য বাড়িয়ে background tint, saturation কমিয়ে muted state এবং hue রেখে dark mode variant তৈরি করা যায়।