একক আর রং — px, rem, %, vw এবং hex, rgb, hsl, oklch

১ · মাপের একক কেন — absolute আর relative

দর্জির দোকানে গিয়ে যদি বলেন “হাতা লম্বা করে দিন”, দর্জি জিজ্ঞেস করবেন — কত? এক ইঞ্চি? দুই ইঞ্চি? সংখ্যা ছাড়া মাপ হয় না, আর একক ছাড়া সংখ্যার মানে হয় না। “হাতা ২ লম্বা করুন” — ২ কী? ইঞ্চি, সেন্টিমিটার, না আঙুল?

CSS-এও একই কথা। width: 300 লিখলে ব্রাউজার পুরো declaration-টি বাদ দেয়, কারণ সে জানে না ৩০০ কিসের। লিখতে হয় width: 300px বা width: 50%. শুধু 0-এর বেলায় একক লাগে না — শূন্য ইঞ্চি আর শূন্য সেন্টিমিটার একই জিনিস।

CSS-এর এককগুলো দুই পরিবারে ভাগ করা যায়:

বড় প্রশ্নটা হলো: আপনার পাতা খোলা হবে ৫ ইঞ্চির ফোনে, ১৪ ইঞ্চির ল্যাপটপে, অফিসের বড় মনিটরে, এমনকি প্রজেক্টরে। কেউ চোখের সমস্যার জন্য ব্রাউজারে লেখা বড় করে রাখেন। তাই বেশিরভাগ মাপ স্থির না রেখে ঠিক জিনিসের সাথে বাঁধা উচিত — লেখার মাপ ব্যবহারকারীর পছন্দের সাথে, কলামের চওড়া পর্দার সাথে। এই পর্বের প্রথম অর্ধেক সেই বাঁধনের গল্প।

২ · px — CSS-এর পিক্সেল আসলে স্ক্রিনের বিন্দু নয়

স্ক্রিন অসংখ্য ছোট আলোর বিন্দু দিয়ে তৈরি — এদের বলে ডিভাইস পিক্সেল। পুরোনো দিনে CSS-এর 1px মানে ছিল ঠিক একটি ডিভাইস পিক্সেল। তারপর এলো খুব ঘন পিক্সেলের ফোন। একই আকারের পর্দায় দুই-তিন গুণ বেশি বিন্দু। যদি 1px তখনও একটি বিন্দুই থাকত, তাহলে 16px লেখা নতুন ফোনে পিঁপড়ের মতো ছোট হয়ে যেত।

তাই আজ CSS pixel একটি “কল্পিত” মাপ। ব্রাউজার নিজে ঠিক করে একটি CSS পিক্সেলে কয়টি ডিভাইস পিক্সেল লাগবে। এই অনুপাতের নাম device pixel ratio — JavaScript-এ window.devicePixelRatio. সাধারণ ল্যাপটপে এটি প্রায়ই 1 বা 1.25, অনেক ফোনে 2 বা 3. অনুপাত 3 হলে একটি 1px রেখা আসলে ৩×৩ = ৯টি বিন্দু দিয়ে আঁকা হয় — তাই লেখা ধারালো দেখায়, আকারও ঠিক থাকে।

নিচের ছোট স্ক্রিপ্টটি একটি বাক্সের চওড়া নানা এককে বসিয়ে ব্রাউজারকে জিজ্ঞেস করে — “শেষে কত px হলো?” getComputedStyle() ব্রাউজারের হিসাবের ফল ফেরত দেয়:

// বাক্সের font-size 20px, পাতার মূল font-size সাধারণত 16px
const card = document.querySelector('.card');
const tries = ['100px', '2em', '2rem', '10vw', '1in', '12pt'];

for (const v of tries) {
  card.style.width = v;
  console.log(v.padEnd(6), '->', getComputedStyle(card).width);
}
card.style.width = '';

console.log('root font-size:', getComputedStyle(document.documentElement).fontSize);
console.log('devicePixelRatio:', window.devicePixelRatio);

৩ · em আর rem — লেখার মাপের সাথে বাঁধা

লেখার মাপ নিয়ে একটি গুরুত্বপূর্ণ সত্য: ব্রাউজারের একটি ডিফল্ট font-size আছে, সাধারণত 16px. ব্যবহারকারী চাইলে ব্রাউজারের সেটিংসে এটি বদলাতে পারেন — চোখে কম দেখেন এমন অনেকেই 20px বা 24px করে রাখেন। লেখার মাপকে এই পছন্দের সাথে বাঁধার দুটি একক:

• em — বর্তমান font-size-এর গুণিতক। font-size-এর ভেতরে লিখলে মানে মূল উপাদানের (parent) font-size; অন্য property-তে (যেমন padding: 1em) মানে element-এর নিজের font-size.
• rem — “root em”: সবসময় root element <html>-এর font-size-এর গুণিতক। পাতার যেকোনো গভীরে লিখুন, মাপ একই।

শুনতে প্রায় এক রকম। কিন্তু একটি ফাঁদ আছে — em নেস্টেড হলে গুণ হতে থাকে। মেনুর ভেতরে মেনু, তালিকার ভেতরে তালিকা — প্রতিটি স্তর আগের স্তরের ফলকে আবার গুণ করে। ঠিক যেন চক্রবৃদ্ধি সুদ। নিচের স্টেপারে হিসাবটি দেখুন:

1html    { font-size: 16px; }2.em ul  { font-size: 1.2em; }3.rem ul { font-size: 1.2rem; }

এবার নিজের চোখে দেখুন। বাঁয়ে em, ডানে rem — একই সংখ্যা, একই কাঠামো:

.em ul  { font-size: 1.2em; }
.rem ul { font-size: 1.2rem; }

/* বাক্সের padding em-এ — লেখার সাথে বাক্সও বাড়ে */
.em, .rem {
  display: inline-block;
  vertical-align: top;
  width: 45%;
  padding: 0.5em;
  border: 1px solid #94a3b8;
}

৪ · % — কিন্তু কিসের শতাংশ?

“৫০% ছাড়” শুনলে প্রথম প্রশ্ন — কিসের ৫০%? দামের, না লাভের? CSS-এর %-এও এই প্রশ্নটাই আসল, আর উত্তরটা property অনুযায়ী আলাদা। বেশিরভাগ ক্ষেত্রে শতাংশ হিসাব হয় containing block-এর মাপ থেকে — সাধারণত সেই বাক্স, যার ভেতরে element-টি আছে। কিন্তু ব্যতিক্রমগুলোই পরীক্ষায় আর বাস্তবে সবচেয়ে বেশি ঝামেলা করে:

padding-এর নিয়মটি অদ্ভুত লাগে, কিন্তু এর পেছনে যুক্তি আছে। চওড়া সাধারণত আগে জানা যায়, উচ্চতা জানা যায় ভেতরের জিনিস সাজানোর পরে। ওপর-নিচের padding যদি উচ্চতা থেকে হিসাব হতো, তাহলে একটি চক্র তৈরি হতো — উচ্চতা জানতে padding লাগে, padding জানতে উচ্চতা। তাই spec চারদিকের padding-কেই চওড়ার সাথে বেঁধেছে।

নিচের এডিটরে ছয়টি বার, ছয়টি এককে। ড্যাশ দাগের বাক্সটির নিচে-ডান কোণ ধরে টেনে ছোট-বড় করুন — কোনটি বাক্সের সাথে বদলায়, কোনটি বদলায় না, খেয়াল করুন:

<style>
  .wrap { resize: horizontal; overflow: auto; width: 360px; max-width: 100%;
          border: 2px dashed #888; padding: 8px; font-size: 18px; }
  .bar  { background: #2563eb; color: white; margin: 6px 0;
          padding: 2px 6px; white-space: nowrap; box-sizing: border-box; }
  .a { width: 200px; }
  .b { width: 50%; }
  .c { width: 10em; }
  .d { width: 10rem; }
  .e { width: 30vw; }
  .f { width: 20ch; }
</style>
<div class="wrap">
  <div class="bar a">200px</div>
  <div class="bar b">50%</div>
  <div class="bar c">10em</div>
  <div class="bar d">10rem</div>
  <div class="bar e">30vw</div>
  <div class="bar f">20ch</div>
</div>

৫ · Viewport একক — vw, vh আর মোবাইলের address bar

Viewport হলো ব্রাউজারে পাতার যে অংশ দেখা যায় — জানালার কাচটুকু। viewport units সেই জানালার মাপের শতাংশ: 1vw = জানালার চওড়ার ১%, 1vh = উচ্চতার ১%. সাথে আছে vmin (চওড়া আর উচ্চতার মধ্যে ছোটটির ১%) আর vmax (বড়টির ১%). “পুরো পর্দা জুড়ে একটি স্বাগত-অংশ” বানাতে মানুষ বহু বছর লিখেছে height: 100vh.

ডেস্কটপে এটি ঠিকঠাক চলে। সমস্যা ফোনে। মোবাইল ব্রাউজারের ওপরে বা নিচে address bar থাকে, যা স্ক্রল করলে লুকিয়ে যায় আর ফিরে আসে। ফলে “জানালার উচ্চতা” একটি নয় — দুটি। বেশিরভাগ মোবাইল ব্রাউজার vh-কে ধরে বড় মাপটি, অর্থাৎ bar লুকানো অবস্থার। তাই পাতা খোলার মুহূর্তে, যখন bar দেখা যাচ্ছে, 100vh বাক্সের নিচের অংশ পর্দার বাইরে চলে যায়। আর ঠিক সেখানেই সাধারণত থাকে “এখনই কিনুন” বাটনটি!

এর সমাধানে CSS তিন জোড়া নতুন একক এনেছে — small, large আর dynamic viewport. উদাহরণের একটি ফোন ধরে দেখুন (সংখ্যাগুলো বোঝানোর জন্য — bar দেখা গেলে পাতার জায়গা ৬৪০px, লুকালে ৭০০px):

1.hero-a { height: 100vh;  }2.hero-b { height: 100svh; }3.hero-c { height: 100lvh; }4.hero-d { height: 100dvh; }

লেখা দিয়ে মাপা — ch আর ex

ch হলো বর্তমান ফন্টে “0” অঙ্কটির চওড়া, আর ex হলো ছোট হাতের “x”-এর উচ্চতা। ch-এর সবচেয়ে কাজের ব্যবহার — অনুচ্ছেদের লাইন খুব লম্বা না হতে দেওয়া: max-width: 65ch মোটামুটি ৬০–৭০ অক্ষরের লাইন দেয়, যা পড়তে আরামদায়ক। বাংলা লেখায় অক্ষরের চওড়া ইংরেজি “0”-এর সমান নয়, তাই ch এখানে আনুমানিক মাপ — পর্ব ২১-এ বাংলা টাইপোগ্রাফিতে আরও দেখবেন।

এক ঝলক সামনে — container query units

viewport একক পুরো জানালা দেখে। কিন্তু একটি কার্ড কখনো চওড়া মূল অংশে বসে, কখনো সরু sidebar-এ। তখন জানালা নয়, কার্ডের পাত্রের মাপ জানা দরকার। এজন্য আছে container query units — cqw, cqh, cqi, cqb — যা কাছের container-এর মাপের শতাংশ। এগুলোও এখন Baseline Widely available; container বানানোর পুরো কৌশল পর্ব ৩১-এ।

৬ · একক ছাড়া line-height আর calc()

line-height ঠিক করে এক লাইন থেকে পরের লাইনের দূরত্ব। এটি চারভাবে লেখা যায়: 24px, 1.5em, 150%, অথবা শুধু 1.5 — কোনো একক ছাড়া। চেহারায় প্রথম তিনটি প্রায়ই একই রকম লাগে, কিন্তু সন্তানেরা কী পায় সেখানেই বড় পার্থক্য।

অংশ ২-এর “আরও গভীরে”-তে বলেছিলাম — inheritance-এ সন্তানেরা পায় computed value. 1.5em বা 150% লিখলে computed value একটি স্থির px (16 × 1.5 = 24px), আর সেই 24px-ই সব সন্তানের কাছে যায় — তাদের লেখা যত বড়ই হোক। কিন্তু একক ছাড়া 1.5 লিখলে সন্তানেরা পায় শুধু গুণকটি, আর প্রত্যেকে নিজের font-size দিয়ে নতুন করে গুণ করে।

.a { line-height: 1.5em; } /* সন্তানেরা পায় 24px */
.b { line-height: 1.5; }   /* সন্তানেরা পায় গুণক 1.5 */

.big { font-size: 36px; margin: 4px 0; }

.a, .b {
  width: calc(100% - 2rem);
  padding: 0 1rem;
  border: 1px solid #94a3b8;
  margin-bottom: 8px;
}

calc() — আলাদা একক মিলিয়ে হিসাব

কখনো মাপটা দুই রকম এককের মিশ্রণ: “পুরো চওড়া থেকে দুই পাশে ১rem করে বাদ” বা “sidebar-এর ২৫০px বাদ দিয়ে বাকিটা”। calc() ঠিক এই কাজ করে — calc(100% - 250px). ব্রাউজার লেআউটের সময় % আর px দুটোকেই px-এ বদলে হিসাব শেষ করে, তাই পর্দা বদলালেও ফল ঠিক থাকে। তিনটি নিয়ম মনে রাখুন:

• + আর --এর দুই পাশে ফাঁকা জায়গা বাধ্যতামূলক। calc(100%-2rem) অবৈধ, কারণ -2rem-কে ব্রাউজার একটি ঋণাত্মক সংখ্যা ভাবে।
• * আর /-এ অন্তত একদিকে শুধু সংখ্যা থাকতে হয়: calc(2rem * 3) ঠিক, calc(2rem * 3rem) নয়।
• calc()-এর ভেতরে calc() বা CSS variable (পর্ব ৩৩) রাখা যায়।

calc()-এর তিন ভাইও আছে: min() (কয়েকটির মধ্যে ছোটটি), max() (বড়টি) আর clamp(সর্বনিম্ন, পছন্দের, সর্বোচ্চ). যেমন width: min(100%, 40rem) মানে “৪০rem-এর বেশি চওড়া নয়, কিন্তু ছোট পর্দায় পুরো চওড়া”। সবগুলো অনেক বছর ধরে সব আধুনিক ব্রাউজারে আছে; clamp() দিয়ে পর্দার সাথে মসৃণভাবে বাড়া লেখা পর্ব ৩৫-এ বানাব।

৭ · কোন কাজে কোন একক — আর ব্যবহারকারীর পছন্দকে সম্মান

সব একক জানার পর আসল দক্ষতা হলো বেছে নেওয়া। নিচের টেবিলটি কোনো কঠিন আইন নয়, অভিজ্ঞ ডেভেলপারদের সাধারণ অভ্যাস — প্রতিটির পেছনে প্রশ্ন একটাই: “এই মাপটা কিসের সাথে বদলানো উচিত?”

দুটি আলাদা জিনিস — Zoom আর “লেখার মাপ” সেটিং

ব্যবহারকারীর হাতে লেখা বড় করার দুটি উপায়। Zoom (Ctrl + +) পুরো পাতাকে বড় করে — px, rem, ছবি, সব। আর ব্রাউজারের সেটিংসে ডিফল্ট font size বদলালে বদলায় শুধু root-এর লেখার মাপ। আপনি যদি সব লেখা px-এ দেন, দ্বিতীয় উপায়টি আপনার পাতায় কাজই করে না — অথচ বয়স্ক মানুষ আর কম দেখেন এমন অনেকে ঠিক এটাই ব্যবহার করেন, কারণ এতে প্রতিটি সাইট আলাদা করে zoom করতে হয় না।

নিজে পরীক্ষা করে দেখার সহজ উপায়: Chrome-এর Settings → Appearance → Font size থেকে (Edge-এ Appearance-এর Fonts অংশে) “Very large” বেছে নিন, তারপর কয়েকটি পরিচিত সাইট খুলুন। যেগুলোর লেখা বড় হলো না, সেগুলো px-এ লেখা। পরীক্ষা শেষে সেটিং আবার আগের মতো করে দেবেন।

৮ · রং লেখার ভাষা — নাম, hex, rgb(), hsl()

স্ক্রিনের প্রতিটি পিক্সেল আসলে তিনটি ছোট বাতি — লাল (Red), সবুজ (Green), নীল (Blue). প্রতিটির উজ্জ্বলতা ০ থেকে ২৫৫. তিনটিই পুরো জ্বললে সাদা, সব নিভলে কালো, লাল আর সবুজ মিলে হলুদ। স্ক্রিনের সাধারণ রঙের এই জগতের নাম sRGB. CSS-এ একই রং কয়েকটি “ভাষায়” লেখা যায়:

• নাম: named color — red, tomato, seagreen… প্রায় ১৫০টি তৈরি নাম। দ্রুত পরীক্ষার জন্য ভালো, কিন্তু ব্র্যান্ডের নির্দিষ্ট রং নামে পাওয়া যায় না।
• Hex: #RRGGBB — তিন জোড়া ষোলো-ভিত্তিক (hexadecimal) অঙ্ক। ছোট রূপ #RGB (প্রতিটি অঙ্ক দুবার: #0a8 = #00aa88), আর স্বচ্ছতাসহ #RRGGBBAA.
• rgb(): rgb(244 42 65) — একই তিন সংখ্যা দশমিকে। আধুনিক লেখায় কমা নেই, স্বচ্ছতা দেওয়া হয় /-এর পরে: rgb(244 42 65 / 50%). পুরোনো rgba(244, 42, 65, 0.5) এখনো চলে, তবে আলাদা rgba() আর দরকার নেই।
• hsl(): hsl(353 90% 56%) — রঙের চাকায় কোণ (hue), রঙের তীব্রতা (saturation) আর আলো (lightness). নিচে বিস্তারিত।

Hex দেখে ভয় পাওয়ার কিছু নেই — এটি শুধু অন্য ভিত্তিতে লেখা সংখ্যা। বাংলাদেশের পতাকার লাল #F42A41-কে ভেঙে দেখি (ষোলো-ভিত্তিক সংখ্যা নিয়ে বিস্তারিত জানতে ICT কোর্সের সংখ্যা পদ্ধতির পর্ব দেখুন):

hsl() — মানুষের মতো করে রং ভাবা

RGB হলো মেশিনের ভাষা — তিন বাতির মাত্রা। কিন্তু মানুষ রং এভাবে ভাবে না। আমরা বলি “এই সবুজটা আরেকটু হালকা করো” বা “এটা একটু ফ্যাকাশে লাগছে”। hex-এ “আরেকটু হালকা” করতে তিনটি সংখ্যাই বদলাতে হয়, আর কোনটা কতটা — আন্দাজ করা কঠিন। HSL এই তিনটি মানুষের প্রশ্নকে আলাদা করে:

• Hue (০–৩৬০): রঙের চাকায় কোন দিকে — ০ লাল, ১২০ সবুজ, ২৪০ নীল, আবার ৩৬০-এ লাল।
• Saturation (০%–১০০%): রং কতটা তীব্র — ০% মানে ধূসর।
• Lightness (০%–১০০%): কতটা আলো — ০% কালো, ১০০% সাদা, ৫০% খাঁটি রং।

.wheel {
  width: 140px; height: 140px; border-radius: 50%;
  background: conic-gradient(
    hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
    hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
    hsl(360 100% 50%));
}
span { display: inline-block; width: 56px; height: 40px; margin-right: 4px; }

.s1 { background: hsl(160 100% 20%); }
.s2 { background: hsl(160 100% 35%); }
.s3 { background: hsl(160 100% 55%); }
.s4 { background: hsl(160 100% 80%); }

currentColor, transparent আর opacity বনাম alpha

দুটি বিশেষ শব্দ খুব কাজের। currentColor মানে “এই element-এর লেখার রং যা, সেটাই” — বর্ডার বা আইকনের রং লেখার সাথে মিলিয়ে রাখতে চমৎকার; লেখার রং বদলালে সব একসাথে বদলায়। transparent মানে পুরো স্বচ্ছ — আসলে rgb(0 0 0 / 0).

আর স্বচ্ছতা দেওয়ার দুটি উপায় প্রায়ই গুলিয়ে যায়। রঙের ভেতরে alpha (rgb(0 106 78 / 50%)) শুধু সেই রংটিকে স্বচ্ছ করে। আর opacity: 0.5 পুরো element-কে — লেখা, বর্ডার, ভেতরের ছবি, সন্তান, সব কিছু — একসাথে আধা-স্বচ্ছ করে:

.stage {
  padding: 10px;
  background: repeating-linear-gradient(45deg, #fde68a 0 12px, #fff 12px 24px);
}
.card { padding: 10px; margin: 8px 0; font-weight: bold; }

.op { background: #006A4E; color: white; opacity: 0.5; }
.al { background: rgb(0 106 78 / 50%); color: white; }
.cc { color: #b91c1c; border: 3px solid currentColor;
      background: transparent; }

বাংলাদেশের পতাকা — একক আর রং একসাথে

পতাকার মাপের নিয়মে এই পর্বের অনেক কিছু একসাথে আছে: দৈর্ঘ্য-প্রস্থের অনুপাত ১০:৬, লাল বৃত্তের ব্যাসার্ধ দৈর্ঘ্যের পাঁচ ভাগের এক ভাগ, আর বৃত্তের কেন্দ্র বাঁ দিক থেকে দৈর্ঘ্যের ৯/২০ অংশে (৪৫%), উচ্চতার ঠিক মাঝখানে। সরকারি নির্দেশে রং বলা আছে রঞ্জকের নামে; স্ক্রিনে সাধারণত ব্যবহৃত মান সবুজ #006A4E আর লাল #F42A41 — এগুলো আনুমানিক রূপান্তর।

<style>
  .flag {
    position: relative;
    width: 300px;
    aspect-ratio: 10 / 6;
    background: #006A4E;
  }
  .sun {
    position: absolute;
    width: 40%;              /* ব্যাস = দৈর্ঘ্যের ২/৫ */
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(244 42 65);
    left: calc(45% - 20%);   /* কেন্দ্র ৪৫%-এ, তাই বাঁ প্রান্ত ২৫%-এ */
    top: 50%;                /* পতাকার উচ্চতার অর্ধেক */
    translate: 0 -50%;       /* নিজের উচ্চতার অর্ধেক ওপরে */
  }
</style>
<div class="flag" role="img" aria-label="বাংলাদেশের জাতীয় পতাকা">
  <div class="sun"></div>
</div>

৯ · আধুনিক রং — oklch(), color-mix() আর পড়ার মতো কনট্রাস্ট

HSL মানুষের মতো ভাবতে সাহায্য করে, কিন্তু এর একটি লুকানো দুর্বলতা আছে: এর “lightness” আসলে মানুষের চোখের অনুভূতি মাপে না। hsl(60 100% 50%) (হলুদ) আর hsl(240 100% 50%) (নীল) — দুটোরই lightness ৫০%, অথচ চোখে হলুদ প্রায় সাদার মতো উজ্জ্বল, আর নীল বেশ গাঢ়। ফলে HSL-এ “সব রঙের ৫০% সংস্করণ” বানালে একটি সমান-উজ্জ্বল প্যালেট পাওয়া যায় না — কোনো বাটনের লেখা পড়া যায়, কোনোটার যায় না।

এর সমাধান oklch() — একটি আধুনিক color space, যার নকশাই হয়েছে perceptual uniformity মাথায় রেখে: সংখ্যায় সমান পরিবর্তন মানে চোখেও প্রায় সমান পরিবর্তন। তিনটি সংখ্যা: L (lightness, ০%–১০০%, চোখে অনুভূত আলো), C (chroma, রঙের তীব্রতা — ০ থেকে সাধারণত ০.৩৭-এর মধ্যে) আর H (hue, ০–৩৬০)। এর আয়তাকার রূপ oklab(). নিচে দুই সারি তুলনা করুন:

.row span { display: inline-block; width: 48px; height: 40px;
            margin-right: 4px; text-align: center; line-height: 40px; }
.hsl span:nth-child(1) { background: hsl(0 100% 50%); }
.hsl span:nth-child(2) { background: hsl(60 100% 50%); }
.hsl span:nth-child(3) { background: hsl(120 100% 50%); }
.hsl span:nth-child(4) { background: hsl(180 100% 50%); }
.hsl span:nth-child(5) { background: hsl(240 100% 50%); }
.hsl span:nth-child(6) { background: hsl(300 100% 50%); }
.ok span:nth-child(1) { background: oklch(70% 0.14 20); }
.ok span:nth-child(2) { background: oklch(70% 0.14 90); }
.ok span:nth-child(3) { background: oklch(70% 0.14 145); }
.ok span:nth-child(4) { background: oklch(70% 0.14 200); }
.ok span:nth-child(5) { background: oklch(70% 0.14 260); }
.ok span:nth-child(6) { background: oklch(70% 0.14 320); }
.mix span:nth-child(1) { background: #006A4E; }
.mix span:nth-child(2) { background: color-mix(in oklch, #006A4E 60%, white); }
.mix span:nth-child(3) { background: color-mix(in oklch, #006A4E 25%, white); }

সমর্থন: oklch(), oklab(), lab(), lch() আর color-mix() সবগুলো ২০২৩ সালে সব প্রধান ব্রাউজারে এসেছে, এখন (২০২৬) Baseline Widely available. খুব পুরোনো ব্রাউজারের কথা ভাবলে আগে একটি hex লিখে পরের লাইনে oklch দিন — না বুঝলে ব্রাউজার দ্বিতীয় লাইন বাদ দেয়। ডিজাইনাররা oklch পছন্দ করেন আরও একটি কারণে: একটি ব্র্যান্ড রঙের ৫০ থেকে ৯০০ পর্যন্ত ধাপ বানাতে শুধু L বদলালেই চলে, hue স্থির থাকে।

sRGB-এর বাইরে — display-p3

অনেক আধুনিক ফোন আর ল্যাপটপের পর্দা sRGB-এর চেয়ে বেশি তীব্র রং দেখাতে পারে — একে বলে wide gamut, আর সবচেয়ে প্রচলিতটির নাম Display P3. CSS-এ লেখা হয় color(display-p3 1 0 0) — sRGB-এর সবচেয়ে তীব্র লালের চেয়েও বেশি তীব্র লাল। oklch-এ বেশি chroma লিখলেও এই রং পাওয়া যায়; সাধারণ পর্দায় ব্রাউজার নিজেই কাছের দেখানো-যায় এমন রঙে নামিয়ে আনে। কোনো পর্দা এমন রং দেখাতে পারে কি না জানতে আছে media query @media (color-gamut: p3). শুরুর দিকে এটি জানা থাকলেই যথেষ্ট।

সুন্দর, কিন্তু পড়া যায় কি?

রং বাছাইয়ের সবচেয়ে গুরুত্বপূর্ণ প্রশ্ন সৌন্দর্য নয় — লেখাটা পড়া যায় কি না। contrast ratio মাপে লেখা আর পেছনের রঙের আপেক্ষিক উজ্জ্বলতার পার্থক্য: ১:১ (একই রং) থেকে ২১:১ (সাদায় কালো)। WCAG 2.2-এর AA স্তরে:

• সাধারণ লেখা: অন্তত ৪.৫:১.
• বড় লেখা (প্রায় 24px, অথবা মোটা হরফে প্রায় 18.66px বা তার বেশি): অন্তত ৩:১.
• বাটনের বর্ডার, ইনপুটের দাগ, আইকনের মতো UI অংশ: আশেপাশের সাথে অন্তত ৩:১.

অর্থাৎ পতাকার লাল দিয়ে বড় শিরোনামের ব্যানার চলে, কিন্তু ছোট লেখার বাটনে লালটাকে একটু গাঢ় করতে হবে — oklch-এ শুধু L কমিয়ে (প্রায় ৬২% থেকে ৫৫%) একই পরিবারের রং পাওয়া যায়। আর সবুজের ওপর লাল লেখা — পতাকায় সুন্দর, লেখায় অচল; লাল-সবুজ রং আলাদা করতে অসুবিধা হয় এমন মানুষের জন্য তো আরও বেশি। মাপার সহজ উপায়: DevTools-এ কোনো লেখার রঙের ছোট বর্গে ক্লিক করুন — color picker-এ “Contrast ratio” দেখাবে, পাস না ফেল সহ। পুরো আলোচনা পর্ব ৪৫-এ।

১০ · AI-এর যুগে — একক আর রঙের কাজ AI-কে দিলে কী দেখবেন

“একটা সুন্দর landing page-এর CSS লিখে দাও” — AI কয়েক সেকেন্ডে দেবে, আর ল্যাপটপে দেখতেও ভালো লাগবে। কিন্তু AI শিখেছে বহু বছরের পুরোনো কোড থেকে। তাই একক আর রঙে এমন কিছু অভ্যাস প্রায়ই আসে, যা ল্যাপটপে ধরা পড়ে না — ধরা পড়ে ফোনে, বড় লেখার সেটিংয়ে, আর কনট্রাস্ট পরীক্ষায়।

AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া CSS হাতে পেলে — যাচাইয়ের চেকলিস্ট

• DevTools-এর Computed প্যানেলে কয়েকটি element দেখেছি — em/rem/% শেষ পর্যন্ত কত px হলো, আমার ধারণার সাথে মেলে
• ব্রাউজারের ডিফল্ট লেখার মাপ “Very large” করে আর ২০০% Zoom-এ দেখেছি — লেখা বড় হয়, কিছু কাটা পড়ে না
• DevTools-এর ফোন-মোডে (device toolbar) আর সম্ভব হলে আসল ফোনে দেখেছি — স্বাগত-অংশের বাটন ঢাকা পড়ে না, পাশে স্ক্রল নেই
• DevTools-এর color picker-এ প্রতিটি লেখার কনট্রাস্ট দেখেছি, আর Lighthouse-এর Accessibility রিপোর্ট চালিয়েছি — AI-এর দেওয়া সংখ্যা নিজে মিলিয়েছি
• CSS-টি W3C CSS Validator-এ দিয়েছি, নতুন একক বা রঙের ফাংশন (svh, oklch, color-mix) নিয়ে MDN আর Can I use-এ সমর্থন দেখেছি