OKLCH কনভার্টার ও প্যালেট বিল্ডার
OKLCH, হেক্স, RGB আর HSL-এর মধ্যে রূপান্তর করুন, আর এমন র্যাম্প বানান যা দেখতে সমান থাকে — কারণ হিউ ঘোরার সময় লাইটনেস আর ক্রোমা ধরে রাখা হয়। sRGB-র বাইরের রং ম্যাপ হয় ক্রোমা কমিয়ে, চ্যানেল ক্লিপ করে নয় — তফাতটা এই যে আপনার বেগুনি বেগুনিই থাকে কি না।
OKLCH-এ লাইটনেসের মানে কেন সত্যিই আছে
HSL-এ লাইটনেস একই রেখে হিউ বদলালে রংটা কতটা উজ্জ্বল দেখায় সেটাই বদলে যায়: ৫০%-এ হলুদ ৫০%-এর নীলের চেয়ে অনেক বেশি উজ্জ্বল দেখায় — তাই যত মেপে মেপেই ফাঁক রাখুন না কেন, HSL র্যাম্প অসমানই দেখাবে। OKLab তৈরি হয়েছে মানুষের উপলব্ধির তথ্যের সঙ্গে মিলিয়ে, তাই এর লাইটনেস অক্ষ চোখ যা দেখে তার সঙ্গেই চলে। L আর C ধরে রেখে H ঘোরালে প্রতিটি সোয়াচ চোখে সমান ওজনের মনে হয় — HSL-এর বদলে এখানে প্যালেট বানানোর গোটা কারণটাই এই।
আসল ব্যাপারটা গামুট ম্যাপিং
অনেক OKLCH মানেরই sRGB-তে কোনো সমতুল্য নেই, আর প্রথমেই যে সমাধানটা মাথায় আসে তা হল প্রতিটি চ্যানেলকে সীমার ভিতরে চেপে দেওয়া। তাতে হিউ চোখে পড়ার মতো সরে যায়: টকটকে বেগুনি চ্যানেল ধরে ধরে ক্লিপ করলে নীলের দিকে গড়িয়ে যায়। লাইটনেস আর হিউ ধরে রেখে শুধু ক্রোমা কমালে রংটা চেনা যায় নিজের মতোই, আর যেটুকু বাদ যায় তা কেবল সেই সম্পৃক্তি, যা পর্দা এমনিতেও দেখাতে পারত না। এই পাতা CSS Color 4-এর অ্যালগরিদম ব্যবহার করে — ক্রোমা ধরে বাইনারি সার্চ, আর ক্লিপ করা ফল কমানো রঙের থেকে জাস্ট-নোটিসেবল ডিফারেন্সের ভিতরে এলেই সেটি মেনে নেওয়া।
একটি রেফারেন্সের সঙ্গে মিলিয়ে দেখা
এই রূপান্তরগুলো একটি স্বাধীন বাস্তবায়নের সঙ্গে চার হাজার রঙের গ্রিডে মিলিয়ে দেখা হয়েছে: লাইটনেস আর ক্রোমা মেলে দশ লক্ষ ভাগের এক ভাগ পর্যন্ত, হিউ মেলে ডিগ্রির দশ হাজার ভাগের এক ভাগ পর্যন্ত, আর প্রতিটি হেক্স মান হুবহু ফিরে আসে। গামুট ম্যাপিংও একইভাবে চারশো আশিটি গামুট-বহির্ভূত রঙে যাচাই করা হয়েছে, আর সবচেয়ে খারাপ ক্ষেত্রেও ফারাক ২৫৫ ভাগের এক ভাগের মধ্যে থেকেছে। যাঁরা OKLCH পড়েন তাঁরা ভুল ম্যাট্রিক্স ঠিকই ধরে ফেলেন, তাই যাচাইটা কীভাবে হলো সেটা বলে রাখা দরকার মনে হলো।
আউটপুটটি কাজে লাগানো
কাস্টম প্রপার্টিগুলো লেখা হয় OKLCH-এ, আর পাশে মন্তব্যে থাকে হেক্স — কারণ রিভিউয়ে ঠিক এই জোড়াটাই দরকার: যে মানটি আপনার বিল্ড পাঠাবে, আর যে মানটি আপনি অন্য যেকোনো জায়গায় পেস্ট করতে পারবেন। আজ ব্যবহারে থাকা সব ব্রাউজারই OKLCH সিনট্যাক্স বোঝে; যদি এমন কোনোটিকে এখনো সমর্থন করেন যেটি বোঝে না, ওই মন্তব্যটিই আপনার ফলব্যাক।
FAQ
ক্রোমা ০.৪-এ থেমে যায় কেন?
কারণ sRGB-তে কিছুই এর কাছাকাছি যায় না। sRGB-র সবচেয়ে সম্পৃক্ত রং নীল, প্রায় ০.৩১৩, আর স্লাইডার ইচ্ছে করেই তার ওপারে যায় — যাতে দেখতে পান কী গামুটের বাইরে পড়ে আর কীভাবে ফিরে ম্যাপ হয়।
এখানে just-noticeable difference বলতে কী বোঝায়?
OKLab-এ ০.০২ ডেল্টা E — CSS Color 4 এই সীমাই ব্যবহার করে। এর নিচে ক্লিপিং আর ক্রোমা কমানো আলাদা করা যায় না, তাই অ্যালগরিদম ক্লিপ করা রংটাই নেয় আর বাড়তি ক্রোমা রেখে দেয়।
এটি কি P3 বা Rec2020 সমর্থন করে?
এখনো নয়। এখানকার সবকিছুই sRGB ধরে চলে, গামুট সতর্কতাগুলোও তা-ই বোঝায়। বড় গামুটের জন্য নিজস্ব প্রাইমারি আর আরেক সেট ম্যাট্রিক্স লাগবে।
এর কিছু কি কোথাও পাঠানো হয়?
না। সব রূপান্তর এই পাতাতেই হয়।
GO AI দলের তৈরি। CSS clamp() ক্যালকুলেটর · WCAG কনট্রাস্ট চেকার · বিনামূল্যের সব টুল