ਤੁਸੀਂ 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 ਨਾਲ ਸਭ ਚੈਨਲਾਂ ਨੂੰ ਦੁਬਾਰਾ ਗਣਨਾ ਕਰਨੀ ਪੈਂਦੀ ਹੈ।

## Alpha / ਪਾਰਦਰਸ਼ਤਾ

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

`/ alpha` syntax (0 = ਪਾਰਦਰਸ਼ੀ, 1 = ਸ਼ਾਮਲ) ਅਰਧ-ਪਾਰਦਰਸ਼ੀ ਰੰਗ ਬਣਾਉਣ ਦਾ ਢੰਗ ਹੈ, ਓਵਰਲੇ ਅਤੇ ਛਾਂਵਾਂ ਲਈ ਉਪਯੋਗੀ। (ਨੋਟ: ਕਿਸੇ ਤੱਤ ਵਿੱਚ `opacity` ਪੂਰੇ ਤੱਤ ਨੂੰ ਫਿੱਕਾ ਕਰਦਾ ਹੈ, ਬੱਚਿਆਂ ਸਮੇਤ — alpha ਰੰਗ ਸਿਰਫ ਉਸ ਰੰਗ ਨੂੰ ਫਿੱਕਾ ਕਰਦੇ ਹਨ।)

## ਆਧੁਨਿਕ ਫਾਰਮੈਟ

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

## ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

ਫਾਰਮੈਟਾਂ ਨੂੰ ਜਾਨਣਾ ਤੁਹਾਨੂੰ ਸਠਿਕ ਟੂਲ ਚੁਣਨ ਦਿੰਦਾ ਹੈ: ਇੱਕਾ ਮੀਲ ਦੇ ਰੰਗਾਂ ਲਈ hex/rgb, **ਡਿਜ਼ਾਈਨ ਸਿਸਟਮਾਂ ਲਈ HSL/OKLCH** (ਆਸਾਨ, ਸਹਜ ਛਾਂ ਪਰਿਵਰਤਨ), ਅਤੇ ਪਾਰਦਰਸ਼ਤਾ ਲਈ `/ alpha` syntax।

HSL ਖਾਸ ਤੌਰ 'ਤੇ ਧਾਰਣਸਮੱਰਥ, ਥੀਮਨਯੋਗ ਰੰਗ ਪੈਲੇਟਾਂ ਨੂੰ ਬਣਾਉਣਾ ਬਹੁਤ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ।