તમે 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` સિન્ટેક્સ (0 = પારદર્શક, 1 = અપારદર્શક) અર્ધ-પારદર્શક રંગો બનાવવાનો તરીકો છે, જે overlay અને છાયા માટે ઉપયોગી છે. (નોટ: તત્વ પર `opacity` પુરા તત્વને ઝાંખો કરે છે, બાળકો સહિત — alpha રંગો માત્ર તે રંગને ઝાંખો કરે છે.)

## આધુનિક ફોર્મેટ

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

## તે શા માટે મહત્વપૂર્ણ છે

ફોર્મેટો જાણવાથી તમે યોગ્ય સાધન પસંદ કરી શકો છો: એક-બંધ રંગો માટે hex/rgb, **ડિઝાઇન સિસ્ટમ્સ માટે HSL/OKLCH** (સરળ, સાહજિક શેડ ભિન્નતાઓ), અને પારદર્શકતા માટે `/ alpha` સિન્ટેક્સ.

HSL ખાસ કરીને સુસંગત, થીમ્ડ રંગ પેલેટ્સ બનાવવાને ખૂબ સરળ બનાવે છે.