একটা কনফিগারযোগ্য-দৈর্ঘ্যের কালার স্কেল তৈরি করুন, হালকা থেকে গাঢ় — একটা perceptually-uniform OKLCH sweep-কে HSL আর naive RGB blending-এর সাথে পাশাপাশি তুলনা করুন, একটা রঙের জন্য বা পুরো একটা design system-এর জন্য একসাথে।
CSS পাঠ দেখুনOKLCH sweep
1
2
3
4
5
6
7
8
9
OKLCH-এ lightness sweep করে, একটা perceptually-uniform colour space, আপনার base রং থেকে chroma আর hue ধরে রেখে — সমান step সত্যিই সমান দূরত্বে দেখায়। প্রস্তাবিত; আধুনিক design tool আর CSS oklch() colour function এটাই ব্যবহার করে।
HSL sweep
1
2
3
4
5
6
7
8
9
HSL-এ lightness sweep করে, hue আর saturation ধরে রেখে — সহজ, বহুল পরিচিত, আর বেশিরভাগ quick colour-shade টুল এটাই করে। মোটামুটি ভালো, কিন্তু HSL lightness perceptually uniform নয়, তাই hue-এর উপর নির্ভর করে step গুলো ঠাসা বা টানা দেখাতে পারে।
Naive RGB blend
1
2
3
4
5
6
7
8
9
আপনার রংকে সরাসরি raw sRGB-তে সাদা বা কালোর দিকে blend করে — এই টুল যে W3Schools রেফারেন্স থেকে বানানো, সেটা আসলে এটাই করে। ইচ্ছাকৃতভাবে রাখা হয়েছে যাতে সমস্যাটা দেখা যায়: raw RGB-তে blend করলে ধীরে ধীরে desaturate হয় আর hue সরে যায়, বাকি দুটোর চেয়ে চোখে পড়ার মতো খারাপ।
1
2
3
4
5
6
7
8
9
এই রঙের OKLCH স্কেল ব্যবহার করে একটা আসল বাটন আর ব্যাজ — টেক্সট রং স্বয়ংক্রিয়ভাবে বেছে নেওয়া, সাদা বা near-black-এর মধ্যে যেটা background-এর সাপেক্ষে আসলেই AA পাস করে।
@theme {
--color-primary-1: #a6f0ff;
--color-primary-2: #85cdff;
--color-primary-3: #65aaff;
--color-primary-4: #4688ff;
--color-primary-5: #2866ee;
--color-primary-6: #0643ca;
--color-primary-7: #001ba7;
--color-primary-8: #040084;
--color-primary-9: #130062;
--color-neutral-1: #e4f7ff;
--color-neutral-2: #c3d5ee;
--color-neutral-3: #a2b3cc;
--color-neutral-4: #8293ab;
--color-neutral-5: #64748b;
--color-neutral-6: #47576c;
--color-neutral-7: #2c3b4f;
--color-neutral-8: #132133;
--color-neutral-9: #010919;
}তিনটে algorithm-ই প্রতিটা step-এ একই nominal lightness টার্গেট করে — তুলনা করার পয়েন্টটাই হলো "একই ইচ্ছাকৃত lightness, পৌঁছানোর ভিন্ন math," তিনটা অসম্পর্কিত curve নয়। lightness curve নিজেই শুধু হালকা থেকে গাঢ় পর্যন্ত সমান ব্যবধান, কোনো framework-এর হাতে-বাছাই করা per-colour ভ্যালু নয়। Out-of-gamut রং (সবচেয়ে হালকা/গাঢ় step-এর কাছে উচ্চ chroma-তে common) clip করা হয়, ঠিকভাবে gamut-mapped নয় — একটা আসল, বলা limitation, লুকানো নয়।