OKLCH Color কী? RGB ও HSL ছেড়ে কেন এই নতুন color format ব্যবহার করবেন

CSS-এ color লেখার অনেক উপায় আছে — #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%) কিন্তু গত এক বছরে modern web platform-এ একটা নতুন format দ্রুত জনপ্রিয় হয়েছে OKLCH

Tailwind CSS v4 এটাকে default color space বানিয়েছে। Radix UI, shadcn/ui, modern Figma plugins — সবাই এই দিকে যাচ্ছে। কিন্তু এখন কথা হলো তাহলে এটায় বিশেষ কী আছে?

আজকের পোস্টে দেখব:

• OKLCH আসলে কী এবং কীভাবে কাজ করে
• কেন RGB ও HSL এর সমস্যা সমাধান করে
• কীভাবে ব্যবহার করবেন practical example দিয়ে
• কোন situation-এ কোন format choose করবেন

প্রথমে পুরোনো format-এর সমস্যা বুঝি

আপনি যখন hsl(0, 100%, 50%) (লাল) আর hsl(120, 100%, 50%) (সবুজ) দেখেন, কাগজে-কলমে দুটোরই lightness 50% কিন্তু চোখে দেখলে? লাল গাঢ় লাগে, সবুজ অনেক উজ্জ্বল লাগে।

এটা কেন হয়? কারণ মানুষের চোখ সব রঙ একই brightness-এ perceive করে না। সবুজ আলোর প্রতি আমাদের চোখ সবচেয়ে sensitive, নীল-এর প্রতি কম কিন্তু RGB এবং HSL এই biological reality জানে না তারা শুধু গাণিতিক value calculate করে।

আর ঠিক এই সমস্যাটাই OKLCH solve করে।

OKLCH কী?

OKLCH মানে চারটা জিনিস:

• L = Lightness — চোখে কতটা উজ্জ্বল মনে হয় (0% থেকে 100%)
• C = Chroma — রঙের তীব্রতা/গাঢ়ত্ব (0 থেকে ~0.4)
• H = Hue — রঙ নিজেই কোনটা (0° থেকে 360°)
• OK = একটা গাণিতিক formula-এর নাম (Björn Ottosson, ২০২০ সালে আবিষ্কার)

লেখার পদ্ধতি:

color: oklch(70% 0.15 240);
/*       L   C    H        */

এই value-টা মানে:

• 70% lightness → মাঝারি উজ্জ্বল
• 0.15 chroma → মাঝারি saturated
• 240° hue → নীলের দিকে

OKLCH-এর প্রধান সুবিধা

১. একই lightness মানে চোখেও একই উজ্জ্বলতা

OKLCH-এ oklch(70% 0.15 60) (হলুদ) আর oklch(70% 0.15 240) (নীল) চোখে **প্রায় একই উজ্জ্বলতায় দেখা যায় কারণ formula মানুষের visual perception অনুযায়ী calibrate করা।

আর এটা design system-এর জন্য এতো বিপ্লবী কেন?

ধরুন আপনি ১০টা category-র জন্য ১০টা ভিন্ন color চান, কিন্তু সবগুলোর "brightness feel" একই থাকা দরকার (যাতে কোনো button অন্যদের চেয়ে বেশি bright না লাগে) OKLCH-এ এটা trivial সব color-এর L একই রাখুন, শুধু H পাল্টান:

.category-ai {
  background: oklch(70% 0.15 240);
} /* blue */
.category-nature {
  background: oklch(70% 0.15 140);
} /* green */
.category-warning {
  background: oklch(70% 0.15 60);
} /* yellow */
.category-error {
  background: oklch(70% 0.15 25);
} /* red */

সব color চোখে একই brightness দেবে কিন্তু HSL-এ এটা একবারেই অসম্ভব।

২. Predictable lighten/darken

ডার্ক মোডের জন্য একটা color কে ১০% darker বানাতে চান? OKLCH-এ:

/* Light mode */
--primary: oklch(60% 0.18 250);
 
/* Dark mode — শুধু L কমালেই দারুণ কাজ করে */
--primary: oklch(50% 0.18 250);

RGB বা HSL-এ এই lighten/darken করলে color-এর hue subtly shift করে — মানে নীল একটু violet-এর দিকে চলে যায়, লাল একটু orange হয়ে যায়। OKLCH-এ hue stable থাকে।

৩. Gradient অনেক smooth হয়

দুটো color-এর মধ্যে gradient বানালে OKLCH সবচেয়ে natural-looking interpolation দেয়।

/* RGB gradient — মাঝে কুৎসিত ধূসর হয়ে যায় */
background: linear-gradient(to right, rgb(255, 0, 0), rgb(0, 0, 255));
 
/* OKLCH gradient — মাঝে সুন্দর বেগুনি হয়ে যায় */
background: linear-gradient(in oklch, oklch(60% 0.25 25), oklch(60% 0.25 270));

in oklch keyword দিয়ে browser-কে বলেন "gradient OKLCH space-এ calculate করো"।

৪. Wide color gamut (P3, Rec2020) support

আধুনিক display (iPhone, Mac, ভালো মনিটর) "wider gamut" — অর্থাৎ RGB এর চেয়ে বেশি রঙ দেখাতে পারে OKLCH সেই extended colors access করতে পারে:

/* sRGB-এ এই উজ্জ্বল লাল impossible */
color: oklch(70% 0.35 25);

পুরোনো screen-এ browser automatic fallback দেয় এবং নতুন screen-এ ব্যবহারকারী আরো রঙিন, vivid color দেখেন।

OKLCH বনাম পুরোনো formats — তুলনা

কীভাবে OKLCH লিখবেন

Basic syntax

.element {
  color: oklch(70% 0.15 240);
}

তিনটা value space দিয়ে আলাদা তবে comma না।

Alpha (transparency)

.tint {
  background: oklch(70% 0.15 240 / 0.2);
  /*                              ^ slash দিয়ে alpha */
}

20% opacity-র tint। Decimal বা percentage দুটোই কাজ করে:

oklch(70% 0.15 240 / 20%)    /* same as 0.2 */

Modern CSS feature — relative color

এটা সবচেয়ে শক্তিশালী part আপনি একটা existing color থেকে modify করে নতুন color বানাতে পারেন:

:root {
  --primary: oklch(60% 0.18 250);
}
 
.button:hover {
  /* primary থেকে 10% darker, বাকি সব same */
  background: oklch(from var(--primary) calc(l - 0.1) c h);
}

মানে:

• from var(--primary) → এই color-কে base হিসেবে নাও
• calc(l - 0.1) → এর lightness থেকে 10% কমাও
• c h → chroma এবং hue অপরিবর্তিত রাখো

এটা design tokens build করার সবচেয়ে clean উপায়।

Value-গুলোর জন্য reference

OKLCH-এ value-গুলোর reasonable range কী, এখানে দেখুন:

সাধারণ rule of thumb

Lightness:

• 0% → পুরো কালো
• 20-30% → dark mode background
• 50-60% → standard color (button, accent)
• 90-95% → light mode subtle background
• 100% → পুরো সাদা

Chroma:

• 0 → grayscale (চাইলে hue ignore হবে)
• 0.05 → মৃদু রঙ, neutral-ই থাকে
• 0.15 → typical UI accent
• 0.25 → vibrant, brand colors
• 0.30+ → super saturated (only wide gamut display-এ পুরোপুরি দেখাবে)

Hue (360° চারপাশে):

বাস্তব উদাহরণ — একটা design system

ধরুন আপনি একটা blog platform বানাচ্ছেন। এখানে আপনার ৬টা category color দরকার — সব একই brightness-এ কিন্তু distinct (একটি রঙ যেন অন্য রঙ থেকে সহজে আলাদা করে চেনা যায়)

:root {
  /* Base shared values */
  --cat-lightness: 60%;
  --cat-chroma: 0.18;
 
  /* Different hues for each category */
  --cat-tech: oklch(var(--cat-lightness) var(--cat-chroma) 250);
  --cat-design: oklch(var(--cat-lightness) var(--cat-chroma) 320);
  --cat-business: oklch(var(--cat-lightness) var(--cat-chroma) 30);
  --cat-health: oklch(var(--cat-lightness) var(--cat-chroma) 140);
  --cat-education: oklch(var(--cat-lightness) var(--cat-chroma) 60);
  --cat-lifestyle: oklch(var(--cat-lightness) var(--cat-chroma) 190);
}

সবগুলো:

• চোখে একই উজ্জ্বলতা
• একই vibrancy/saturation
• শুধু hue ভিন্ন

ফলে কোনো একটা category অন্যগুলোর চেয়ে loud বা bland লাগবে না।

Dark mode-এ OKLCH-এর জাদু

Dark mode-এর জন্য background ও text শুধু lightness flip করেই সুন্দর কাজ করে:

:root {
  --bg: oklch(98% 0.005 240);
  --fg: oklch(15% 0.01 240);
  --primary: oklch(55% 0.18 250);
}
 
.dark {
  --bg: oklch(15% 0.01 240); /* L এর পরিবর্তন */
  --fg: oklch(95% 0.005 240); /* L এর পরিবর্তন */
  --primary: oklch(70% 0.18 250); /* একটু brighter */
}

লক্ষ্য করুন hue (240, 250) সব মোডে একই থাকছে। শুধু lightness বদলাচ্ছে এটা OKLCH-এর consistency।

Browser support এবং fallback

OKLCH support করে এখন প্রায় সব modern browser:

• Chrome 111+ (March 2023)
• Safari 15.4+ (March 2022)
• Firefox 113+ (May 2023)

Global support প্রায় 94%+, তাই বেশিরভাগ project-এ direct ব্যবহার করতে পারেন। তবে পুরোনো browser support করতে fallback রাখা ভালো:

.button {
  background: #3b82f6; /* fallback */
  background: oklch(60% 0.18 250); /* modern */
}

Browser পরের declaration use করে যদি বুঝতে পারে না বুঝলে আগেরটায় fall back করে।

কনভার্ট করার উপায়

আপনার পুরোনো hex/rgb color-গুলো OKLCH-এ convert করতে চান?

অনলাইন tool:

• oklch.com — interactive picker, real-time preview
• Convert a Color — quick conversion

Built-in DevTools:

Chrome DevTools-এ যেকোনো color এর উপর click করুন → format dropdown → "OKLCH" সাথে সাথে দেখাবে।

Tailwind v4-এ পূর্ব-built:

@theme {
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-emerald-500: oklch(69.6% 0.17 162.48);
  /* ... সব Tailwind color এখন OKLCH-এ */
}

আপনি Tailwind class ব্যবহার করলে OKLCH automatic পাচ্ছেন।

কিছু সাধারণ ভুল

ভুল ১: Lightness 50% মানেই দেখতে balanced হবে।

oklch(50% 0 0)   /* এটা ধূসর, কিন্তু সাদা/কালোর exact মাঝামাঝি না */

OKLCH লক্ষ্য করে perception-এর দিকে, সাদা-কালোর গাণিতিক mid-point না। সাধারণত 60-65% সবচেয়ে balanced লাগে।

ভুল ২: Chroma খুব বেশি দেওয়া।

oklch(70% 0.5 30)   /* sRGB-এ render হবে না, clipped হবে */

বেশিরভাগ screen-এ chroma 0.3 -এর বেশি দিলে color "clip" হয়ে যায় (অর্থাৎ গাঢ়তা lose করে) Brand color-এর জন্য 0.15-0.25 ideal

ভুল ৩: Hue degree-এর % লেখা।

/* ❌ */
oklch(70% 0.15 60%)
 
/* ✅ */
oklch(70% 0.15 60)     /* শুধু সংখ্যা, % না */

L-এ percentage দিতে হয়, C decimal, H শুধু সংখ্যা। কেউ চাইলে 60deg লিখতে পারেন, কিন্তু সাধারণত শুধু 60 যথেষ্ট।

সংক্ষেপে

• OKLCH = perceptually uniform color format — চোখে যা দেখায়, value তাই বলে
• L, C, H = lightness, chroma, hue — তিনটাই independent control
• from keyword দিয়ে existing color থেকে নতুন color derive করা যায়
• Design system-এ multiple color একই brightness রাখতে চাইলে L একই রাখুন, H পাল্টান
• Dark mode-এ শুধু L flip করলেই 80% কাজ হয়ে যায়
• Gradient-এ in oklch যোগ করলেই smooth result
• Browser support 94%+ — সরাসরি ব্যবহার করতে পারেন
• পুরোনো hex/RGB-এর জন্য fallback রাখুন

OKLCH কোনো hype না — এটা CSS color-এর সত্যিকারের functional upgrade বিশেষ করে যারা design system বানান, dark mode নিয়ে কাজ করেন, বা multi-brand product-এ কাজ করেন তাদের জন্য এটা game-changer.

আপনার পরবর্তী project-এ একবার OKLCH ব্যবহার করুন, দেখেবন পুরোনো RGB/HSL-এ ফিরে যেতে চাইবেন না......