রঙ কনভার্টার

রঙ কনভার্টার কী?#

একটি রঙ কনভার্টার একটি রঙের একটি বর্ণনাকে অন্যান্য বর্ণনায় অনুবাদ করে যা আপনার স্ট্যাক সত্যিই প্রয়োজন করে। ডিজাইনাররা আপনাকে একটি মকআপ থেকে একটি HEX মান দেন; CSS আপনাকে rgb() বা hsl() লিখতে দেয়; একটি ডিজাইন-টোকেন পাইপলাইন একটি CSS ভেরিয়েবল চায়; একটি চার্টিং লাইব্রেরি একটি আলফা চ্যানেল সহ একটি RGBA টিপল চায়। একই রঙ ভিন্ন ভিন্ন পোশাক পরে থাকে, এবং আপনি হাতে বা একটি ক্যালকুলেটরে অনুমান করে তাদের মধ্যে রূপান্তর করে প্রকৃত সময় ব্যয় করেন।

এই পৃষ্ঠাটি একসাথে সব চারটি রূপান্তর করে। একটি রঙ টাইপ করুন বা বাছুন এবং আপনি তাৎক্ষণিকভাবে এর HEX, RGB, HSL, এবং একটি পেস্ট-প্রস্তুত CSS ভেরিয়েবল ঘোষণা পান, প্লাস একটি লাইভ পূর্বরূপ সোয়াচ এবং সেই নির্দিষ্ট রঙ থেকে উদ্ভূত একটি পাঁচ-ধাপের হালকা/গাঢ় প্যালেট — সবকিছু আপনার ব্রাউজারে স্থানীয়ভাবে গণনা করা।

HEX, RGB এবং HSL সহাবস্থান করার কারণ হলো প্রতিটি ভিন্ন কাজে ভালো। HEX (#4f46e5) কমপ্যাক্ট এবং CSS, Figma রপ্তানি, এবং ব্র্যান্ড নির্দেশিকাগুলোতে আধিপত্য বিস্তার করে। RGB (rgb(79, 70, 229)) লাল/সবুজ/নীল চ্যানেলগুলোকে স্পষ্ট করে, যা ইমেজ কোড এবং canvas পিক্সেল ম্যানিপুলেশন যা আশা করে। HSL (hsl(243, 75%, 59%)), হিউ, স্যাচুরেশন এবং লাইটনেসে বিভক্ত, একটি মানুষ যার সম্পর্কে যুক্তি করতে পারে — “এটি ১০% হালকা করুন” হলো HSL-এ একটি একক সংখ্যা পরিবর্তন এবং RGB-তে একটি অগোছালো তিন-সংখ্যার নাচ।

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

1. নিম্নলিখিত দুটি উপায়ের একটিতে ইনপুট রঙ সেট করুন:
   • ভিজ্যুয়ালি বাছতে বাম দিকের রঙের বর্গ ক্লিক করুন স্থানীয় OS রঙ পিকার খুলতে।
   • বা এর পাশের টেক্সট ফিল্ডে একটি মান টাইপ করুন। HEX (#4f46e5, #abc, বা আলফা সহ ৮-অঙ্কের #4f46e5ff), rgb() / rgba(), এবং hsl() / hsla() সবগুলো গৃহীত।
2. ডান দিকের তালিকায় ফলাফলগুলো পড়ুন — HEX, RGB, HSL, এবং CSS ভেরিয়েবল। প্রতিটি ফিল্ড শুধু-পাঠযোগ্য; এতে ক্লিক করুন এবং কপি করুন, বা কাজ করার সময় একটি রেফারেন্স হিসেবে ফিল্ডটি ব্যবহার করুন।
3. ডানদিকের বড় পূর্বরূপ ব্লকটি লক্ষ্য করুন; এটি বর্তমান রঙ দিয়ে পূর্ণ হয় যাতে আপনি এটিকে আপনার ডিজাইনের বিপরীতে যাচাই করতে পারেন।
4. পূর্বরূপের নিচের ৫-সোয়াচ প্যালেট ব্যবহার করুন। এটি HSL লাইটনেসকে ১০-পয়েন্ট ধাপে সরিয়ে darker, dark, base, light, এবং lighter ভেরিয়েন্ট তৈরি করে — hover/active অবস্থার জন্য বা একটি একক ব্র্যান্ড রঙ থেকে একটি টোনাল স্কেল তৈরির জন্য কার্যকর।
5. স্ট্যাটাস লাইন রূপান্তর নিশ্চিত করে বা আপনার ইনপুট পার্স না হলে একটি অবৈধ রঙ বার্তা রিপোর্ট করে।

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

• তিনটি ফরম্যাট গৃহীত, চারটি ফেরত। HEX, rgb(), বা hsl() পেস্ট করুন এবং এক শটে HEX, RGB, HSL, এবং একটি CSS-ভেরিয়েবল ঘোষণা পান।
• আলফা-সচেতন। ৮-অঙ্কের HEX (#rrggbbaa) এবং rgba()/hsla() ইনপুট তাদের আলফা চ্যানেলকে আউটপুটে বহন করে, তাই অস্বচ্ছ রঙ সঠিকভাবে রাউন্ড-ট্রিপ করে।
• টোনাল প্যালেট জেনারেটর। পাঁচ-ধাপের হালকা/গাঢ় সারিটি একটি ক্যানড র্যাম্প নয়, আপনার রঙের নিজস্ব HSL থেকে উদ্ভূত — এটি সর্বদা একই পরিবারের মতো দেখায়।
• কপি-প্রস্তুত CSS ভেরিয়েবল। --color-brand: #4f46e5; লাইনটি সরাসরি একটি :root ব্লকে বসে, পরে আপনার টোকেন নামে পুনরায় নামকরণ করা হয়।
• ১০০% ক্লায়েন্ট-সাইড। কোনো ব্যাকএন্ড নেই, কোনো নেটওয়ার্ক অনুরোধ নেই। আপনার ব্র্যান্ড রঙ কখনো পৃষ্ঠা ছাড়ে না।

ব্যবহারের উদাহরণ#

পৃষ্ঠাটি ইন্ডিগো #4f46e5 দিয়ে লোড হয়। সেই ইনপুট সহ, চারটি ফিল্ড এভাবে পূরণ হয়:

HEX:        #4f46e5
RGB:        rgb(79, 70, 229)
HSL:        hsl(243, 75%, 59%)
CSS var:    --color-brand: #4f46e5;

লক্ষ্য করুন কীভাবে HSL ফর্ম hsl(243, 75%, 59%) একটি বাক্যের মতো পড়া যায়: হিউ 243 (রঙের চাকতিতে একটি নীল-বেগুনি কোণ), 75% স্যাচুরেশন (মোটামুটি উজ্জ্বল), 59% লাইটনেস (মধ্য-টোন, মধ্যম ধূসরের চেয়ে সামান্য উজ্জ্বল)। একজন ডিজাইনার যদি আপনাকে বলেন “একটি hover অবস্থার জন্য এটি সামান্য গাঢ় করুন”, আপনি সেই 59-কে 49-এ নামিয়ে hsl(243, 75%, 49%) পেতেন — এবং সত্যিই সেটিই dark সোয়াচ যা প্যালেট জেনারেটর পূর্বরূপের নিচে তৈরি করে, light 69%-এ এবং চরম 39% এবং 79%-এ।

আপনার যদি এর বদলে একটি CSS ভেরিয়েবল থেকে শুরু করতে হয় যা আপনার আছে, তার মান টেক্সট ফিল্ডে পেস্ট করুন। rgba(79, 70, 229, 0.5)-কে একই ইন্ডিগো ৫০% অস্বচ্ছতায় পার্স করা হয়, এবং HEX আউটপুট হয়ে যায় #4f46e580 (৮-অঙ্ক, আলফা 0x80 ≈ 0.5), একটি স্টাইলশিটে বসানোর জন্য প্রস্তুত যা HEX পছন্দ করে।

প্রশ্নোত্তর#

আমার ডিজাইনার আমাকে #4f46e5 দিয়েছেন কিন্তু dev টুলগুলো rgb(79, 70, 229) দেখায়। সেগুলো কি একই রঙ?#

হ্যাঁ, হুবহু। HEX এবং RGB একই sRGB মানগুলোর দুটি সিরিয়ালাইজেশন। #4f46e5 বাইট জোড়া 4f, 46, e5-তে বিভক্ত হয়, যা 79, 70, এবং 229-এর হেক্স। আপনার প্রসঙ্গ যা পছন্দ করে তা ব্যবহার করুন — CSS সেগুলোকে অভিন্ষ হিসেবে বিবেচনা করে।

আমার কখন HEX-এর বদলে HSL-এ পৌঁছানো উচিত?#

যখনই আপনি অনুভূতি দ্বারা একটি রঙকে অনুমানযোগ্যভাবে পরিবর্তন করতে চান। গাঢ় করা, হালকা করা, ডিস্যাচুরেট করা, বা একটি ব্র্যান্ড রঙ থেকে একটি ৫-শেড প্যালেট তৈরি করা HSL-ে একটি সংখ্যা এবং RGB-তে একটি হতাশাজনক ত্রিমুখী ভারসাম্য। HEX স্টোরেজ এবং কপি-পেস্টের জন্য সেরা; HSL সম্পাদনার জন্য সেরা।

প্যালেটটি কেন কখনো খুব গাঢ় বা হালকা রঙে অমসৃণ দেখায়?#

জেনারেটর লাইটনেসকে নির্দিষ্ট ১০-পয়েন্ট ধাপে সরায় এবং 0% এবং 100%-এ ক্ল্যাম্প করে। সেই সীমাগুলোর কাছে ধাপগুলো সঙ্কুচিত হয় কারণ সরানোর মতো আর জায়গা নেই — ৯৫% লাইটনেসের একটি রঙের কাছে খাঁটি সাদায় পৌঁছানোর আগে কেবল ৫ পয়েন্টের “lighter” আছে। এটি HSL স্থানের নিজস্ব একটি বৈশিষ্ট্য, কোনো বাগ নয়।

এই টুল কি P3 বা ওয়াইড-গ্যামুট রঙ সমর্থন করে?#

না। এটি সেই sRGB স্থানে কাজ করে যা CSS HEX/RGB/HSL বর্ণনা করে, যা ওয়েব কাজের বিশাল সংখ্যাগরিষ্ঠতা ঢেকে রাখে। Display-P3 এবং color() সিনট্যাক্স একটি ভিন্ন পাইপলাইন এবং এখানে পার্স করা হয় না।