আপনি কীভাবে CSS-এ রঙ নির্দিষ্ট করবেন?

Question

Accepted Answer

CSS বিভিন্ন রঙের ফরম্যাট অফার করে। এগুলি একই রঙ তৈরি করে — পছন্দটি পাঠযোগ্যতা এবং আপনার স্বচ্ছতার প্রয়োজন কিনা তার উপর নির্ভর করে।

```css
.a { color: red; }                      /* named keyword (~150 of them) */
.b { color: #ff5733; }                  /* hex: #RRGGBB */
.c { color: #ff5733cc; }                /* hex with alpha: #RRGGBBAA */
.d { color: rgb(255 87 51); }           /* red green blue (0–255) */
.e { color: rgb(255 87 51 / 0.8); }     /* with 80% opacity */
.f { color: hsl(9 100% 60%); }          /* hue saturation lightness */
.g { color: hsl(9 100% 60% / 0.5); }    /* HSL with alpha */
```

## HSL কেন প্রায়ই সবচেয়ে দরকারী

HSL রঙকে **H**ue (রঙ চাকায় 0–360°), **S**aturation এবং **L**ightness হিসাবে বর্ণনা করে — যা মানুষ কীভাবে রঙ সম্পর্কে চিন্তা করে তার সাথে মানিয়ে যায়, যা বৈচিত্র্যকে স্বজ্ঞাত করে তোলে:

```css
:root { --brand-h: 220; }
.primary       { background: hsl(var(--brand-h) 80% 50%); }
.primary-light { background: hsl(var(--brand-h) 80% 70%); } /* just raise lightness */
.primary-dark  { background: hsl(var(--brand-h) 80% 30%); } /* just lower it */
```

হালকা/অন্ধকার ছায়া তৈরি করা তুচ্ছ — একটি সংখ্যা পরিবর্তন করুন। hex বা rgb দিয়ে তা করা সমস্ত চ্যানেল পুনরায় গণনা করা প্রয়োজন।

## আলফা / স্বচ্ছতা

```css
background: rgb(0 0 0 / 0.5); /* 50% transparent black — for overlays */
```

`/ alpha` সিনট্যাক্স (0 = স্বচ্ছ, 1 = অস্বচ্ছ) অর্ধ-স্বচ্ছ রঙ তৈরি করার উপায়, ওভারলে এবং ছায়ার জন্য দরকারী। (দ্রষ্টব্য: একটি উপাদানে `opacity` *সম্পূর্ণ* উপাদান, শিশু সহ অনুপ্রবেশ করায় — আলফা রঙ শুধুমাত্র সেই রঙটি অনুপ্রবেশ করায়।)

## আধুনিক ফরম্যাট

```css
color: oklch(70% 0.15 220); /* perceptually-uniform; better for color systems */
```

## এটি কেন গুরুত্বপূর্ণ

ফরম্যাটগুলি জানা আপনাকে সঠিক টুল বেছে নিতে দেয়: এককালীন রঙের জন্য hex/rgb, **ডিজাইন সিস্টেমের জন্য HSL/OKLCH** (সহজ, স্বজ্ঞাত ছায়ার বৈচিত্র্য), এবং স্বচ্ছতার জন্য `/ alpha` সিনট্যাক্স।

HSL বিশেষভাবে সামঞ্জস্যপূর্ণ, থিমযোগ্য রঙ প্যালেট তৈরি করা অনেক সহজ করে তোলে।