آپ 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 کے ساتھ یہ کام تمام channels کو دوبارہ شمار کرنے کی ضرورت ہے۔

## Alpha / شفافیت

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

`/ alpha` syntax (0 = شفاف، 1 = مکمل) یہ ہے کہ آپ نیم شفاف رنگ کیسے بناتے ہیں، جو overlays اور shadows کے لیے مفید ہے۔ (نوٹ: کسی عنصر پر `opacity` *پورے* عنصر کو فیکا کرتا ہے، بشمول بچوں کے — alpha رنگ صرف اس رنگ کو فیکا کرتے ہیں۔)

## جدید شکلیں

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

## یہ کیوں اہم ہے

شکلوں کو جاننے سے آپ صحیح ٹول کا انتخاب کر سکتے ہیں: hex/rgb ایک بار کے رنگوں کے لیے، **design systems کے لیے HSL/OKLCH** (آسان، شہودی سایے کی تبدیلیاں)، اور شفافیت کے لیے `/ alpha` syntax۔

HSL خاص طور پر مستقل، themeable رنگ کے پیلیٹ بنانا بہت آسان بناتا ہے۔