HEX থেকে HSL রূপান্তর Hexadecimal ↔ Hue Saturation Lightness বিনামূল্যে অনলাইন নিরাপদ
HEX-এ একটি মান লিখুন, সঙ্গে সঙ্গেই তা HSL-এ পড়ে নিন। হিসাব আপনার ব্রাউজারেই হয়, কোথাও কিছু পাঠানো হয় না, আর উত্তরটি কিসের উপর নির্ভর করে তা ধরে নেওয়া হয় না — নিচে লেখা আছে।
কিছুই আপলোড হয় না
এই লিখনরীতিগুলি কোথা থেকে এসেছে
হেক্স আর RGB একই জিনিস, দুবার লেখা। পর্দার রং হল তিনটি সংখ্যা — কতটা লাল, সবুজ ও নীল আলো ছাড়তে হবে — প্রতিটি ০ থেকে ২৫৫ পর্যন্ত, অর্থাৎ এক বাইট; হেক্স কেবল সেই বাইটগুলিকেই ষোলো ভিত্তিতে লেখে, তাই #FF8800 আর rgb(255, 136, 0) একই পিক্সেলকে দেওয়া একই আদেশ। HSL উদ্ভাবিত হয়েছিল কারণ এর কোনোটিই মানুষের পড়ার যোগ্য নয়: তা বর্ণকে বর্ণচক্রের কোণ হিসেবে, আর সম্পৃক্তি ও উজ্জ্বলতাকে শতাংশে দেয়, ফলে নকশাকার তিনটি সংখ্যা নতুন করে না কষেই কিছু একটা হালকা করতে পারেন। CMYK সম্পূর্ণ আলাদা এক জগতের — কালির, আলোর নয়। তা বিয়োগধর্মী, চারটি ছাপার প্লেট দিয়ে গড়া, আর পর্দা যত রং দিতে পারে তার সবটায় পৌঁছতে পারে না, কারণ পর্দা আলো ছড়ায় আর কাগজ কেবল তা ফিরিয়ে দেয়।
কোথায় এদের দেখা পাবেন
হেক্স সেটাই যা আপনি স্টাইলশিটে টাইপ করেন আর নকশার যন্ত্র আপনাকে ধরিয়ে দেয়। RGB দেখা দেয় যেখানেই রঙের জন্য অঙ্ক দরকার: ক্রমপরিবর্তন, স্বচ্ছতা, কোনো আভা হিসাব করা কোড। HSL-এর দিকে হাত বাড়ে যখন রঙের পাটি হাতে সাজাতে হয়, কারণ যে বদলগুলি চাই সেগুলি সাধারণত ওর তিনটি সংখ্যার একটিরই বদল। CMYK সেটাই যা ছাপাখানা চায়, আর তাতে রূপান্তরই সেই মুহূর্ত যখন একটি নকশা আলো থাকা ছেড়ে কালি হয়ে ওঠে।
প্রায়ই জিজ্ঞাসিত প্রশ্ন
আমার CMYK ফল ছাপাখানার দেওয়া ফলের চেয়ে আলাদা কেন?
কারণ একটিমাত্র সঠিক রূপান্তর বলে কিছু নেই। এই পাতার অঙ্কটি সরল ও যন্ত্রনিরপেক্ষ, আর যখন আপনার একটি সূচনাবিন্দু বা মোটামুটি সমতুল্য দরকার তখন সেটাই ঠিক উত্তর। ছাপাখানা রূপান্তর করে এমন একটি বর্ণ-প্রোফাইলের মধ্য দিয়ে যা নির্দিষ্ট কালি, কাগজ ও যন্ত্রকে হিসাবে ধরে; একই RGB রং চকচকে কাগজে আর আবরণহীন কাগজে আলাদা CMYK মান দেবে। যা হুবহু মিলতেই হবে, তার জন্য কোনো সূত্রে ভরসা না করে ছাপাখানার কাছে তাদের প্রোফাইল চান।
পর্দার কিছু রং ছাপা যায় না কেন?
কারণ দুয়ের নাগাল একই রঙে পৌঁছয় না। পর্দা আলো যোগ করে রং বানায় আর এমন উজ্জ্বল, সম্পৃক্ত নীলচে-সবুজ বা সবুজ দিতে পারে যার সঙ্গে কালি কিছুতেই পারে না; কাগজ আলো শুষে রং বানায়, আর সবচেয়ে উজ্জ্বল যা হতে পারে তা পাতার সাদা। প্রত্যেকে যে রংগুলির নাগাল পায় তার সমষ্টিকে বলে গ্যামাট, আর যেখানে তারা একে অপরের উপর পড়ে না, সেখানে রূপান্তরকে হাতের কাছের নিকটতম রং বেছে নিতে হয়। সেজন্যই পর্দায় ঝলমলে রং ছাপা হলে প্রায়ই একটু ম্লান দেখায়।
উত্তরটি কি নির্ভুল?
যেখানে দুটি একক পূর্ণসংখ্যায় একে অপরের মাধ্যমে সংজ্ঞায়িত, সেখানে হ্যাঁ — পাতাটি সংখ্যার উপরেই তা বলে, আর একমাত্র পূর্ণাঙ্কন হলো কত অঙ্ক দেখানো হবে তাতে। যেখানে অনুপাতের দশমিক শেষ হয় না, পাতাটি বারোটি সার্থক অঙ্ক দেখায় এবং বলে সম্পর্কটি আসন্ন, অন্য কিছুর ভান করে না।
আমি যা লিখি তা কি আমার যন্ত্র ছেড়ে যায়?
না। হিসাব আপনারই ব্রাউজারে হয়; কিছুই আপলোড হয় না, আর হওয়ার মতো কোনো সার্ভারও নেই। পাতাটি একবার খুললে নেটওয়ার্ক বন্ধ থাকলেও কাজ করে।
কেন আপনি HEX থেকে HSL রূপান্তর করেন
#5A4632-এর মতো একটি hex কোড একটি রং সংরক্ষণের ভালো উপায় আর রঙের কথা ভাবার খারাপ উপায়। অঙ্কগুলোর কিছুই আপনাকে বলে না যে রংটি বাদামি, কতটা উজ্জ্বল, বা সামান্য ফ্যাকাশে সংস্করণ কেমন দেখাবে। HSL আবিষ্কৃত হয়েছিল তা ঠিক করতে। এটি রংকে সেভাবে বর্ণনা করে যেভাবে মানুষ তার কথা বলে: কোন বর্ণ, কতটা সজীব আর কতটা হালকা। HEX থেকে HSL রূপান্তর হলো একটি রংকে নকশা টুল যে রূপে হাতে দেয় সেখান থেকে এমন রূপে অনুবাদ করা যা নিয়ে আপনি যুক্তি করতে পারেন: hsl(30, 29%, 28%) একটি গাঢ়, নিষ্প্রভ কমলা-বাদামি, আর আপনি সঙ্গে সঙ্গে দেখতে পান যে শেষ সংখ্যা বাড়ালে তা ফ্যাকাশে হবে।
নকশাকার ও ফ্রন্ট-এন্ড ডেভেলপাররা রূপান্তরটি ব্যবহার করেন এটিই আসল কারণে। তাঁদের hex-এ একটি ব্র্যান্ড রং আছে এবং সম্পর্কিত রঙের একটি পরিবার দরকার: হোভার অবস্থার জন্য একটি হালকা, চাপা বোতামের জন্য একটি গাঢ়, পটভূমির আভার জন্য একটি খুব ফ্যাকাশে, নিষ্ক্রিয় নিয়ন্ত্রণের জন্য একটি কম-সম্পৃক্ত। hex-এ এগুলোর প্রতিটি তিন জোড়া অঙ্কের নতুন খোঁজ। HSL-এ প্রতিটি একটি সংখ্যার বদল। রং একই রং, একটি বেশি কাজের লেন্সে দেখা।
এই পাতা আপনার ব্রাউজারে রূপান্তর করে, এবং কিছুই আপলোড হয় না। নিচে পাবেন hex অঙ্ক থেকে HSL-এর তিনটি সংখ্যা কীভাবে হিসাব হয়, রূপান্তর কী রাখে আর কোথায় গোল করে, বর্ণ, সম্পৃক্তি ও উজ্জ্বলতা বাস্তবে কী বোঝায়, নকশাকাররা প্যালেট ও অবস্থা গড়তে HSL কীভাবে ব্যবহার করেন, এবং যারা প্রথমবার HEX থেকে HSL রূপান্তর করে তাদের ধরা ফাঁদ।
HSL কী বর্ণনা করে
বর্ণ: রঙের চাকায় অবস্থান
বর্ণ একটি রঙের চাকার চারপাশে 0 থেকে 360 ডিগ্রির একটি কোণ। লাল বসে 0-তে, হলুদ 60-এ, সবুজ 120-তে, সায়ান 180-তে, নীল 240-এ এবং ম্যাজেন্টা 300-তে; 360-এ আপনি আবার লালে ফেরেন। 30-এর একটি বর্ণ লাল ও হলুদের মাঝে, যা কমলা। সংখ্যাটি বলে আপনি কোন রঙের পরিবারে আছেন, আর কতটা উজ্জ্বল বা ফ্যাকাশে সে সম্পর্কে কিছুই বলে না।
সম্পৃক্তি: কতটা সজীব
সম্পৃক্তি একটি শতাংশ। 100%-এ রং বর্ণ যতটা অনুমতি দেয় ততটা খাঁটি; 0%-এ সে তার সব রং হারিয়েছে এবং ধূসর। আমাদের উদাহরণ বাদামির 29% সম্পৃক্তি একটি নিষ্প্রভ, মাটির রং। সম্পৃক্তি কমানো একটি চড়া রংকে তার চরিত্র না বদলে শান্ত করার দ্রুততম উপায়।
উজ্জ্বলতা: কতটা ফ্যাকাশে বা গাঢ়
উজ্জ্বলতাও একটি শতাংশ। 0%-এ বর্ণ ও সম্পৃক্তি যা-ই হোক রং কালো; 100%-এ তা সাদা; 50%-এ তা পূর্ণ, স্বাভাবিক রং। আমাদের বাদামি 28%-এ গাঢ় দিকে। সংখ্যা বাড়ালে একই রঙের ফ্যাকাশে সংস্করণ মেলে, আর কমালে গাঢ়, যে বদল নকশাকাররা সবচেয়ে বেশি চান।
hex-এর চেয়ে কেন সহজ
hex-এ একটি রংকে ফ্যাকাশে করার মানে তিন জোড়াকেই ভিন্ন পরিমাণে বাড়ানো যাতে বর্ণ সরে না যায়, যা চোখে চোখে করা প্রায় অসম্ভব। HSL-এ এর মানে একটিমাত্র সংখ্যা বদলানো এবং বাকি দুটি ছেড়ে রাখা।
রূপান্তর কীভাবে কাজ করে
তিন বাইট থেকে একটি কোণ ও দুটি শতাংশ
রূপান্তরকারী প্রথমে hex অঙ্ক পড়ে লাল, সবুজ ও নীলের মান হিসেবে, প্রতিটি 0 থেকে 255, এবং সেগুলোকে 0 ও 1-এর মধ্যে স্কেল করে। সে তিনটির বৃহত্তম ও ক্ষুদ্রতমটি বের করে। উজ্জ্বলতা দুটির গড়। সম্পৃক্তি নির্ভর করে তারা উজ্জ্বলতার তুলনায় কত দূরে তার ওপর। বর্ণ নির্ভর করে কোন চ্যানেল বৃহত্তম এবং অন্য দুটি কীভাবে তুলনীয় তার ওপর। তিনটিই সমান হলে রং ধূসর, সম্পৃক্তি শূন্য এবং বর্ণের কোনো অর্থ নেই; রূপান্তরকারী তখন তার জন্য 0 দেখায়।
উদাহরণ
#5A4632-এর বাইট 90, 70 ও 50। লাল বৃহত্তম 0.353-এ, নীল ক্ষুদ্রতম 0.196-এ। উজ্জ্বলতা তাদের যোগফলের অর্ধেক, 0.275, প্রায় 28%। বিস্তার 0.157, তাই সম্পৃক্তি 0.157 ভাগ যোগফল 0.549, প্রায় 29%। লাল বৃহত্তম চ্যানেল এবং সবুজ মাঝখানে, যা বর্ণকে বসায় 30 ডিগ্রিতে। ফল hsl(30, 29%, 28%)।
পূর্ণ সংখ্যা
তিনটি সংখ্যা লেখার সময় পূর্ণ ডিগ্রি ও পূর্ণ শতাংশে গোল করা হয়। মানুষ এই রূপ ব্যবহার করে এবং CSS দৈনন্দিন কাজে এটিই আশা করে, কিন্তু এর মানে শেষ অঙ্কে কিছু তথ্য বাদ যায়, যা পরের অংশ ব্যাখ্যা করে।
রূপান্তর কী রাখে আর কী পারে না
চোখ যেভাবে সাজায় সেভাবে রংটি রাখে
ফল চোখ যেভাবে সাজায় সেভাবে রং: চাকায় একটি বর্ণ, কতটা সম্পৃক্ত, কতটা হালকা। সে কারণেই HSL থাকা সার্থক। আপনি একটি সংখ্যা বদলে একটি রংকে ফ্যাকাশে বা একটি আভাকে গাঢ় করতে পারেন, যা hex-এ প্রায় অসম্ভব।
একই বাইট ফেরত দেওয়ার প্রতিশ্রুতি দিতে পারে না
দুটি একই রং বর্ণনা করে, কিন্তু HSL সেগুলোয় পৌঁছায় ভিন্ন জ্যামিতির মধ্য দিয়ে এবং তার তিনটি সংখ্যা লেখার সময় পূর্ণ ডিগ্রি ও পূর্ণ শতাংশে গোল করা হয়। তাই HSL-এ নিয়ে ফিরিয়ে আনা একটি রং শুরুর জায়গা থেকে এক বা দুই ধাপ দূরে নামতে পারে: দেখতে একই, বাইটে বাইটে একই নয়। নিখুঁত বাইট ফেরত চাইলে hex রাখুন। একটি রং নিয়ে কাজ করতে HEX থেকে HSL রূপান্তর করুন, আর hex-কে মাস্টার রাখুন।
ধূসরের বর্ণ নেই
তিনটি বাইট সমান হলে বর্ণ সম্পর্কে বলার কিছু নেই। রূপান্তরকারী বর্ণ দেয় 0 এবং সম্পৃক্তি 0%, আর উজ্জ্বলতা একাই ধূসরকে বর্ণনা করে। 0-র মধ্যে কিছু পড়বেন না।
বাস্তবে HSL ব্যবহার
আভার একটি পরিবার গড়া
ভিত্তি রং hsl(30, 29%, 28%) নিন। হোভারের জন্য একটি হালকা আভা hsl(30, 29%, 34%)। পটভূমির জন্য একটি খুব ফ্যাকাশে আভা hsl(30, 29%, 94%)। চাপা অবস্থার জন্য একটি গাঢ় আভা hsl(30, 29%, 22%)। বর্ণ ও সম্পৃক্তি স্থির থাকে, তাই রংগুলো স্পষ্টতই একসঙ্গে মানায়। hex-এ একই কাজে কয়েকবার চেষ্টা লাগত আর তবু সামান্য বেমানান দেখাত।
থিম আর ডার্ক মোড
একটি থিমের প্রায়ই একই প্যালেট হালকা ও গাঢ় সংস্করণে লাগে। HSL-এ আপনি বর্ণ রাখেন এবং উজ্জ্বলতা ও সম্পৃক্তি সমন্বয় করেন: হালকা থিমের জন্য পটভূমি হালকা ও লেখা গাঢ় করুন, আর গাঢ়টির জন্য উল্টো। বর্ণকে একটি কাস্টম প্রপার্টি হিসেবে সংজ্ঞায়িত করে কেবল উজ্জ্বলতা বদলানো এটি করার একটি প্রচলিত ও পরিপাটি উপায়।
প্যালেট তৈরি
একটি ভিত্তির সঙ্গে মানায় এমন রং খুঁজতে বর্ণ ঘোরান। দুই পাশে ত্রিশ ডিগ্রি দেয় সদৃশ রং, 180 দেয় পরিপূরক, আর 120 বা 240 দেয় ত্রয়ী। সম্পৃক্তি ও উজ্জ্বলতা স্থির করুন, বর্ণ বদলান, আর রংগুলোর একটি অভিন্ন অনুভূতি থাকে। এটি এমন প্যালেট শুরুর দ্রুত উপায় যা এলোমেলো দেখায় না।
সহজলভ্য বৈসাদৃশ্য
উজ্জ্বলতা বৈসাদৃশ্যের প্রধান নিয়ন্ত্রণ। রঙিন পটভূমিতে লেখা পড়া কঠিন হলে সমাধান সাধারণত তাদের মধ্যে উজ্জ্বলতার ফারাক বাড়ানো, আর HSL তা দুই পাশে একটি সংখ্যা সমন্বয়ের ব্যাপার করে।
এখানে কীভাবে HEX থেকে HSL রূপান্তর করবেন
hex কোড লিখুন বা পেস্ট করুন
প্রথম ঘরে রংটি লিখুন, হ্যাশ চিহ্নসহ বা ছাড়া। তিন ও ছয় অঙ্কের রূপ গৃহীত হয়, আর স্বচ্ছতাসহ আট অঙ্কের রূপও পড়া হয়।
hsl মান পড়ুন
উত্তর সঙ্গে সঙ্গে দেখা দেয়, যেমন #5A4632 = hsl(30, 29%, 28%)। তিনটি সংখ্যা ডিগ্রিতে বর্ণ এবং শতাংশে সম্পৃক্তি ও উজ্জ্বলতা।
আপনার স্টাইলশিটে কপি করুন
ফল যেমন আছে তেমন ব্যবহার করুন, color: hsl(30, 29%, 28%)-এর মতো একটি নিয়মে। রং সমন্বয় করতে শেষ সংখ্যা বদলান। উল্টো দিকের টুল HSL থেকে HEX।
এই নোটেশনগুলো কোথা থেকে আসে
Hex আর RGB একই জিনিস দুবার লেখা
একটি পর্দার রং তিনটি সংখ্যা, কতটা লাল, সবুজ ও নীল আলো ছড়াতে হবে, প্রতিটি 0 থেকে 255, যা এক বাইট। Hex কেবল সেই বাইটগুলো ষোলো ভিত্তিতে লেখে। সংখ্যাগুলো দেখতে HEX থেকে RGB রূপান্তর করুন।
HSL আর CMYK
HSL আবিষ্কৃত হয়েছিল কারণ কোনোটিই মানুষের পড়ার যোগ্য নয়: এটি বর্ণ দেয় একটি রঙের চাকার চারপাশে কোণ হিসেবে, সম্পৃক্তি ও উজ্জ্বলতা শতাংশে, যাতে একজন নকশাকার তিনটি সংখ্যা আবার না কষে কিছু হালকা করতে পারেন। CMYK একেবারে ভিন্ন জগতের, আলোর বদলে কালি। এটি বিয়োগাত্মক, চারটি মুদ্রণ প্লেটে গড়া, এবং পর্দা যত রঙে পৌঁছাতে পারে তার সবগুলোতে পারে না, কারণ পর্দা আলো ছড়ায় যখন কাগজ কেবল তা প্রতিফলিত করে।
HEX থেকে HSL রূপান্তরের সময় ফাঁদ
নিখুঁত ফিরতি যাত্রা আশা করা
গোলাকরণের কারণে ফিরে রূপান্তর করলে মূলটির থেকে এক বা দুই ধাপ দূরে একটি কোড মিলতে পারে। একটি রঙের জন্য তা অদৃশ্য। যে নকশা ব্যবস্থায় বহু রং আগে-পিছে রূপান্তরিত হয় সেখানে তা জমতে পারে। hex-কে উৎস রাখুন।
সমান উজ্জ্বলতা মানে সমান দীপ্তি ধরে নেওয়া
একই HSL উজ্জ্বলতার দুটি রং দীপ্তিতে বেশ ভিন্ন দেখাতে পারে: 50%-এর একটি হলুদ 50%-এর একটি নীলের চেয়ে অনেক বেশি উজ্জ্বল দেখায়। HSL উজ্জ্বলতা একটি সুবিধাজনক সংখ্যা, অনুভূত দীপ্তির মাপ নয়। বৈসাদৃশ্য যাচাইয়ের জন্য একটি যথার্থ বৈসাদৃশ্য টুল ব্যবহার করুন।
শতাংশ চিহ্ন ভুলে যাওয়া
CSS-এ hsl()-এর সম্পৃক্তি ও উজ্জ্বলতায় শতাংশ চিহ্ন থাকে, আর বর্ণ একটি সাধারণ সংখ্যা বা deg-সহ একটি সংখ্যা। চিহ্ন বাদ দেওয়া একটি ক্লাসিক ভুল।
ধূসরে বেশি অর্থ পড়া
ধূসরের বর্ণ নেই। রূপান্তরকারী তার জন্য 0 দেখালে তার মানে এই নয় যে তা লালচে।
রূপান্তরের আগে মানুষ যে প্রশ্ন করে
HSL-এ #FF0000 কী?
hsl(0, 100%, 50%), খাঁটি লাল।
HSL-এ #FFFFFF কী?
hsl(0, 0%, 100%), সাদা। সাদার জন্য বর্ণ অর্থহীন, এবং রূপান্তরকারী 0 দেখায়।
HSL কি সর্বত্র সমর্থিত?
সব বর্তমান ব্রাউজার hsl() ও hsla() বোঝে। এটি বহু বছর ধরে CSS-এ আছে।
রূপান্তর কি নিখুঁত?
একই রং বর্ণনার অর্থে তা নিখুঁত, কিন্তু সংখ্যাগুলো পূর্ণ ডিগ্রি ও শতাংশে গোল করা, তাই ফিরলে এক ধাপ দূরে নামতে পারে।
আমার রং কি আপলোড হয়?
না। পাটিগণিত আপনার ব্রাউজারে চলে এবং কিছুই কোথাও পাঠানো হয় না।
কীভাবে ফিরব?
HSL থেকে HEX দিয়ে।
HEX থেকে HSL রূপান্তরের সময় বিজ্ঞতার সঙ্গে বাছা
কাজে HSL, সংরক্ষণে hex
মাস্টার প্যালেট রাখুন hex-এ, যেখানে তা দ্ব্যর্থহীন, আর বৈচিত্র্য বানাতে চাইলে HSL ব্যবহার করুন। ফিরতি যাত্রা একটু হারায়; মাস্টার হারায় না।
নতুন রঙের স্থান ভাবুন
CSS এখন oklch() এবং অনুরূপ নোটেশন দেয় যেখানে সমান উজ্জ্বলতা সত্যিই সমান দেখায়। নতুন নকশা ব্যবস্থার জন্য সেগুলো শেখার যোগ্য। HSL এমন নোটেশন থেকে যায় যা প্রায় সবাই বোঝে এবং প্রতিটি টুল সমর্থন করে।
কাস্টম প্রপার্টি ব্যবহার করুন
--hue, --sat ও --light সংজ্ঞায়িত করুন এবং সেগুলো থেকে রং গড়ুন: hsl(var(--hue) var(--sat) var(--light))। তাতে কয়েকটি সংখ্যা সম্পাদনা করেই থিম বদলায়।
আত্মবিশ্বাসে HSL পড়া ও লেখা
মনে রাখার কিছু মাইলফলক
কয়েকটি সংখ্যা HSL পড়া সহজ করে। 60-এর গুণিতকের বর্ণগুলো খাঁটি রং: 0 লাল, 60 হলুদ, 120 সবুজ, 180 সায়ান, 240 নীল, 300 ম্যাজেন্টা। 100 সম্পৃক্তির সঙ্গে 50 উজ্জ্বলতা যেকোনো বর্ণের খাঁটিতম সংস্করণ দেয়, আর 95 বা তার বেশি উজ্জ্বলতা এমন ফ্যাকাশে আভা যে তা পটভূমি হিসেবে কাজ করে। HEX থেকে HSL রূপান্তর করে এই মাইলফলকগুলোর একটির কাছে বর্ণ দেখলে আপনি এক নজরে রঙের পরিবারের নাম বলতে পারেন।
পরিবারের মধ্যে চলাচল
বর্ণে 180 যোগ করলে চাকায় বিপরীত রং মেলে, যা পরিপূরক এবং সাধারণত সবচেয়ে শক্তিশালী বৈসাদৃশ্য। 30 যোগ বা বিয়োগ করলে এমন একটি প্রতিবেশী মেলে যা মূলটির পাশে আরামে বসে। নকশাকাররা অনুমান ছাড়া একটি ব্র্যান্ড রঙের সঙ্গে মানায় এমন অ্যাকসেন্ট বাছতে এই ধাপগুলো ব্যবহার করেন।
রূপান্তরিত মানের একটি নোট রাখা
একটি প্যালেটের জন্য HEX থেকে HSL রূপান্তর করলে ফলগুলো একটি সারণিতে মূল hex পাশে রেখে লিখুন। সারণি দেখায় রংগুলো কীভাবে সম্পর্কিত, আর একটি বর্ণ বা উজ্জ্বলতা বাকিদের সঙ্গে বেমানান হলে অদ্ভুততা সঙ্গে সঙ্গে দৃশ্যমান। এটি আপনার দলকে একটি যৌথ রেফারেন্সও দেয়।
আসল পর্দায় পরীক্ষা
ক্যালিব্রেট করা মনিটরে সুষম দেখানো রং রোদে ফোনে বা সস্তা ল্যাপটপে ভিন্ন দেখাতে পারে। সমাপ্ত প্যালেট অন্তত দুটি ডিভাইসে যাচাই করুন, এবং একটিতে ফ্যাকাশে আভা মিলিয়ে গেলে উজ্জ্বলতা একটু সমন্বয় করুন।
সম্পর্কিত রূপান্তরকারী
একই পরিবারের টুল প্রতিবেশী রূপান্তর ঢাকে। ফিরতে ব্যবহার করুন HSL থেকে HEX। কোডের পেছনের সংখ্যার জন্য আছে HEX থেকে RGB ও RGB থেকে HEX, আর ছাপার জন্য HEX থেকে CMYK ও CMYK থেকে HEX। একই স্টাইলশিটের মাপের জন্য px থেকে rem ও px থেকে em দৈর্ঘ্যের জন্য তা-ই করে যা এই পাতা রঙের জন্য করে।
একটি কাজের উদাহরণ
ধরুন আপনার ব্র্যান্ড রং #1E7A5C। আপনি HEX থেকে HSL রূপান্তর করেন এবং পড়েন hsl(160, 61%, 30%)। হোভার অবস্থার জন্য লেখেন hsl(160, 61%, 36%), একটু হালকা। চাপা অবস্থার জন্য hsl(160, 61%, 24%)। একটি বিজ্ঞপ্তির পেছনে খুব ফ্যাকাশে পটভূমির জন্য hsl(160, 40%, 95%)। নিষ্ক্রিয় বোতামের জন্য hsl(160, 12%, 60%), একই বর্ণ যার বেশির ভাগ রং তুলে নেওয়া। পাঁচটি রং, একটি বর্ণ, এক মিনিটে লেখা, আর সবগুলো এমন দেখায় যেন একসঙ্গে মানায়। ব্র্যান্ড রং বদলালে আপনি বর্ণের সংখ্যা একবার বদলান।
একটি সংক্ষিপ্ত তালিকা
রূপান্তরের আগে
ঠিক করুন রংটি নিয়ে কী করতে চান: বৈচিত্র্য আনবেন, থিম বানাবেন নাকি কেবল পড়বেন।
রূপান্তরের সময়
hex পেস্ট করুন, hsl পড়ুন এবং তিনটি সংখ্যা টুকে রাখুন।
রূপান্তরের পরে
একবারে একটি সংখ্যা বদলে বৈচিত্র্য বানান, এবং আসল পটভূমিতে সেগুলো দেখুন।
সাধারণ ভুল
গোল সংখ্যাকে নিখুঁত ধরা
সেগুলো পূর্ণ সংখ্যা। hex-কে মাস্টার রাখুন।
উজ্জ্বলতাকে দীপ্তির সমান ধরা
একই উজ্জ্বলতার দুটি রং কতটা দীপ্ত দেখায় তাতে ব্যাপক ভিন্ন হতে পারে।
শতাংশ চিহ্ন বাদ দেওয়া
CSS-এ সম্পৃক্তি ও উজ্জ্বলতায় সেগুলো লাগে।
আপনার রং আপনার ডিভাইসেই থাকে
হিসাব হয় স্থানীয়ভাবে। আপনার মান আপনার নিজের ব্রাউজার ব্যবহার করে এবং কিছুই কোথাও পাঠানো হয় না। পরে মুছে ফেলার কিছু নেই এবং তৈরি করার কোনো অ্যাকাউন্ট নেই। HEX থেকে HSL রূপান্তরের সহজ পথ এটিই।
সারসংক্ষেপ
এখানে HEX থেকে HSL রূপান্তর করতে hex কোড লিখুন বা পেস্ট করুন এবং সঙ্গে সঙ্গে hsl মান পড়ুন। রূপান্তর চোখ যেভাবে সাজায় সেভাবে রংটি রাখে: চাকায় একটি বর্ণ, কতটা সম্পৃক্ত, কতটা হালকা। সে কারণেই HSL থাকা সার্থক, কারণ আপনি একটি সংখ্যা বদলে একটি রংকে ফ্যাকাশে বা একটি আভাকে গাঢ় করতে পারেন, যা hex-এ প্রায় অসম্ভব। দুটি একই রং বর্ণনা করে, কিন্তু HSL সেগুলোয় পৌঁছায় ভিন্ন জ্যামিতির মধ্য দিয়ে এবং তার তিনটি সংখ্যা পূর্ণ ডিগ্রি ও পূর্ণ শতাংশে গোল করা হয়, তাই HSL-এ নিয়ে ফিরিয়ে আনা একটি রং শুরুর জায়গা থেকে এক বা দুই ধাপ দূরে নামতে পারে। নিখুঁত বাইট ফেরত চাইলে hex রাখুন। কিছুই আপলোড হয় না।